I have 6 images next to each other in two rows. I used a CSS container to center it (couldn't use padding). However, when I shrink the screen, since the margin is set to auto, the container shrinks opposed to the blank space around the container. You can see this here . The blue is just there to show the container. The images need to stay in that order until it becomes physically impossible for them to stay there. Any help would be appreciated! Thank you in advanced!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Featured Industries</title>
</head>
<style>
.center {
margin: auto;
width: 66%;
height: 625px;
border: 3px solid #0026E3;
padding: 0px;
}
.img {
float: left;
}
a:hover img {
position: relative;
z-index: 1;
transition: -webkit-box-shadow 0.3s ease-in-out;
-webkit-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
}
</style>
You have the container size in %, which means, in this case, it will always be 66% of the document width that matches the window's width. That's why, it shrinks when you change the window size. If you set the container width to double the width of the images, it will not shrink.
So, according to your example, this will work:
.center {
margin: auto;
width: 622px; /* (311 x 2) */
height: 625px;
border: 3px solid #0026E3;
padding: 0px;
}
Now you have to solve another problem when they don't fit in the windows, like in mobile phones for example. Then you can use CSS Media Queries. So now let's add another rule for when there is no space for the 2 images column.
/* This is the default behavior (mobile first) */
.center {
margin: auto;
width: 311px; /* 1 column by default */
height: 625px;
border: 3px solid #0026E3;
padding: 0px;
}
/* Let's now modify the container size when there is space */
/* for 2 image columns */
#media screen and (min-width: 622px) {
.center {
width: 622px; /* 1 column by default */
}
}
Use this class:
.center {
margin: auto;
width: 933px;
height: 625px;
border: 3px solid #0026E3;
padding: 0px;
}
If you set the width to the 66% it will depend on the father width, bit if you just set it to a number of px it will remain the same size
Related
What order would this go in?
div{
margin:0px 0px 13px 0px;
}
What side of the div would the 13px effect?
Also would I need all of the px or just one or none?
could I do this?
div{
margin:0 0 13 0;
}
It goes in this order: top, right, bottom and left. For example:
div {
margin: 1px 2px 3px 4px;
}
is equal to
div {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}
You also can specify only 2 properties, and for example:
div {
margin: 10px 20px;
}
means the following: margin-top and margin-bottom are equal to 10px, margin-left and margin-right are equal to 20px.
You can also specify 3 values, like this:
div {
margin: 1px 2px 3px;
}
And it equals to:
div {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 2px;
}
And as you already know margin: 1px will set all 4 margins to 1px.
When you specifuing a number not equal to 0, you should specify px or % and so on, but when you specify 0, it can be just 0, it's OK.
I'm having a problem on my new website. But first I should give you some information.
I'm building a full responsive website with a portfolio. My portfolio images stands in a DIV and response to the screen size. On a screen with more then 1005px it's working perfect. Also the scaling works great. This is because the following CSS line:
#media only screen and (max-width: 1005px) {
The div with my image is newtextportfolio. The image itself doesn't use CSS except 100% width and height. When i give my div the follow definition (height: auto;) i get a white line under my images. And i don't want the white line :(
.newtextportfolio {
width: calc(95% + 10px);
height: auto;
margin-right: 25px;
}
I can make it disappear if I make the height for example 200px. But when I view my site on an iPad this makes the images stretch (because it's fixed and not responsive).
Does anyone know how i can make the white line disappear? I already tried some things with calc, percentages but this also makes the line, only fixed pixels doesn't.
.newcontainersmallleftprices {
width: 310px;
float: left;
margin-left: 14px;
}
.newtop1 {
width: 310px;
background-image: url("../images/tops/portfolio1.png");
text-align: center;
font-size: 23px;
color: #FFFFFF;
height: 50px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
margin: auto;
padding-top: 20px;
float: left;
position: relative;
z-index: 2;
}
.newtextportfolio {
width: 310px;
height: 200px;
text-align: center;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
margin: auto;
background-color: #FFFFFF;
float: left;
position: relative;
z-index: 1;
font-size: 17px;
}
#media only screen and (max-width: 1005px) {
.newcontainerpricesmall {
width: 100%;
}
.newcontainersmallleftprices {
width: 95%;
margin-bottom: 25px;
margin-left: 4%;
}
.newtextportfolio {
width: calc(95% + 10px);
height: auto;
margin-right: 25px;
}
.newtop1 {
width: 95%;
padding-top: 20px;
padding-left: 5px;
padding-right: 5px;
margin-right: 25px;
}
}
<div class="newcontainer">
<div class="newcontainerpricesmall">
<div class="newcontainersmallleftprices">
<div class="newtop1">Broeckerhave</div>
<div class="newtextportfolio">
<a href="http://beta.gjwd.nl/images/portfolio/broeckerhave.png" data-lightbox="image-100" title="" class="portfolioimg"><img src="http://beta.gjwd.nl/images/portfolio/thumb/broeckerhave.png" width="100%" height="100%" /> </div>
</div>
Make the img element display:block.
https://jsfiddle.net/jmarikle/95gsk2tu/
An alternative approach is to give the image vertical-align: top;. This is being caused by the fact that images are inline elements with some block attributes. They retain line height, letter spacing, etc. Block level elements do not have those added calculations to their size, and aligning vertically collapses the attributes that cause the gap at the bottom.
I have a centered webpage and for now I have resized it using media-queries but I don't know how I can achieve something like on stackoverflow itself. Once you decrease the width of the page, it's gettings smaller and smaller and the margin-left is decreasing towards zero; so at one point the page fills the whole window. I use a lot of margin-left: 25% to have the page centered, but this does not work like the design I want. Once I resize the browser window, the pages width gets smaller and it stays centered, while I don't really want the width to get smaller, but rather decreasing the space at the left and right of the page.
This is for example a title I use:
margin-top: 3%;
float:left;
font-size: 350%;
margin-left: 25%;
width:10%;
This is the "middle" of the site which has a white background:
position: absolute;
border-radius: 3px;
top: 0px;
left: 21%;
width: 58%;
min-height: 100%;
background: white;
z-index: -1;
-webkit-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
Sorry, this is probably quite easy, but I somehow really don't get it...
Thanks
I think you need to set your left and right margins to auto. Not 25%.
Like this:
margin-left:auto;
margin-right:auto;
But you have to define a width of your container to which the auto values are applied.
If you take a look at the CSS of the example site you provided in your comment:
#mainbody {
width: 980px; /*this line*/
text-align: center;
vertical-align: top;
padding: 0;
margin: auto; /*this line*/
height: auto;
background: #fff;
}
I am trying to make an expandable div that will have a minimum width of 200 px but will expand if the content is longer. the problem is the width always displays as 100%, If i put a width: 200px it will stay 200 and will not expand.
This is my CSS code for the div:
#section_title {
background-color: #2b65ae;
border-radius: 10px;
color: #ffffff;
padding: 5px 30px 0px;
background-size: 100% 100%;
font-size: 24px;
min-width: 200px;
height: 30px;
text-align: center;
font-style: italic;
margin: 0 auto;
text-transform: uppercase;
-moz-box-shadow: inset 0 0 8px #444444;
-webkit-box-shadow: inset 0 0 8px #444444;
box-shadow: inset 0 0 8px #444444;
}
You may use display:table properties to achieve this :
Update your CSS with :
display:table;
width: 200px;
DEMO , using just words and white-space to keep all on one line for the demo purpose.
You can use this
div {
float: left; /* or right according to your requirement */
width: auto;
min-width: 200px;
max-width: 100%;
}
This will keep the minimun width 200, will expand on more content and won't go beyond 100% width.
Try like this:
#section_title {
display:inline-block;
width: auto;
min-width: 200px;
max-width:100%;
}
Updated fiddle
If it's just for one line of content, then you can add a float to your css.
#section_title {
min-width: 200px;
height: 60px;
background-color: rgb(14,87,145);
float: left;
}
Example fiddle here.
I want the block elements inside CSS columns to have box shadow. The following, simplified code renders as expected in IE10 and Firefox 21, but in current Chrome version (28.0.1500.72) shadows near the column sides are trimmed.
The images present results in IE/FF (on the left), and Chrome on the right:
(there's also some vertical shift, but it's not an issue)
Here's the jsfiddle:
http://jsfiddle.net/buli_pl/KxYRc/1/
div#column-container {
/* Set 2 columns*/
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
div#column-container div {
background-color: yellow;
/* set shadow for yellow elements */
box-shadow: 0px 1px 3px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow: 0px 0px 15px #000;
box-shadow: 0px 0px 15px #000;
/* Make sure that yellow div is not split between columns */
display: inline-block;
width: 100%;
/* the rest - just to better present the problem */
height: 70px;
margin-top: 0;
margin-bottom: 20px;
}
<div id="column-container">
<div>box 1</div>
<div>box 2</div>
<div>box 3</div>
<div>box 4</div>
<div>box 5</div>
<div>box 6</div>
</div>
Am I misusing some of those properties, or this is a Chrome issue? How can it be fixed at the moment?
Just happened upon a potentially more straightforward solution that seems to work. Applying transform: translateZ(0); to the elements with box-shadows seems to be resolving this issue. In the supplied code, you would add this to your div#column-container div rule.
.container{
break-inside: avoid;
column-count: 2;
column-gap: 2rem;
}
.box{
border-radius: 4px;
box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
margin-bottom: 1rem;
padding: 1rem;
break-inside: avoid;
transform: translateZ(0);
}
https://codepen.io/MarkitDigital/pen/RdLoRG
You could use flexbox for this instead of css columns.
FIDDLE
NB: This currently doesn't work in Firefox because it still doesn't support the flex-wrap property, however according to caniuse - this will be supported in version 28
CSS
div#column-container {
height: 270px; /* NB: IE requires the height property. max-height won't work on IE)*/
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
EDIT: (Updated FIDDLE which includes support for Firefox)
As per #buli's suggestion to temporarily use the -moz-colums-count for Firefox as long as flex-wrap is not supported:
Well, you could do this with the #supports which allows us to perform feature queries - sort of like Modernizr, but with CSS.
The good thing here, is that Firefox supports them.
So if I add the following code: (updated as per Pavlo's suggestion)
#supports (not (flex-wrap: wrap)) and (-moz-columns: 2) {
div#column-container {
-moz-column-count: 2;
column-count: 2;
display: block;
width: 50%;
}
}
Now, Firefox will use CSS columns, whereas other browsers will use flexbox.
this should work too : http://codepen.io/anon/pen/fiHCv
(from my comment to get your feeling about it :) )
It might work using calc() to reduce width of blocks to let shadows being seen and rework margin and padding for nicer layout
div#column-container {
/* Set 2 columns*/
column-count: 2;
column-gap:0;
width:80%;
margin:auto;
padding:20px 0;
}
div#column-container div {
background-color: yellow;
box-shadow: 0px 0px 15px #000;
/* Make sure that yellow div is not split between columns */
display: inline-block;
/* leave room for shadow to be drawn */
width: calc(100% - 30px);
/* the rest - just to better present the problem */
height: 70px;
margin: 20px;
}
manage margin and padding, so top of columns may be on same vertical level and fit to your grid
Here's a simple work-around for Chrome: For your yellow blocks, just change the width and the margin. For the drop-shadow to show up you want to make sure there is some margin room around the block.
width: 80%;
margin: 1em 10%;
http://jsfiddle.net/dPg2n/1/ --- Works in both Chrome 31 and FireFox 10.0.2.
Chrome is failing to compensate for the extra width added by the shadow.
If you add "text-align: center;" to the div#column-container, the yellow inner div will center and you can now see shadow on the left edge.
If change the insignificant "width: 100%;" on the yellow inner div to "width: 85%;" (or a width of your choice) now there is room for the entire shadow.
div#column-container {
/* Set 2 columns*/
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
/* insignificant - except text-align, which corrects Chrome */
width: 50%;
text-align: center;
}
div#column-container div {
background-color: yellow;
/* set shadow for yellow elements */
box-shadow: 0px 1px 3px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow: 0px 0px 15px #000;
box-shadow: 0px 0px 15px #000;
/* Make sure that yellow div is not split between columns */
display: inline-block;
/* the rest - width was significant for Chrome, you may need to adjust for your real project */
width: 85%;
height: 70px;
margin-top: 0;
margin-bottom: 20px;
}
Here is a jsFiddle.
Had similar issues with a 3 column layout. Chrome cut the box-shadow but only on top in column 2 and 3...
box-shadow cut
Margin Workaround:
.item {
box-shadow: 0px 0px 15px #000;
display: inline-block;
margin-top: 15px; /* same as box-shadow blur */
width: 100%;
}
.container{
column-count: 3;
column-gap: 30px;
margin-top: -15px;/* negative value same as box-shadow blur & item margin-top */
}
I think column-count is conflicting with chrome...
Try This:
div#column-container {
/* Set 2 columns*/
/* insignificant */
width: 50%;
}
div#column-container div {
background-color: yellow;
/* set shadow for yellow elements */
box-shadow: 0px 0px 15px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow: 0px 0px 15px #000;
/* Make sure that yellow div is not split between columns */
display: inline-block;
/* the rest - not significant */
width: 46%;
height: 70px;
margin-top: 0;
margin-bottom: 20px;
margin-right: 2%;
float:left;
}
div#column-container {
/* Set 2 columns*/
overflow: hidden;
padding: 5px;
display: block;
/* insignificant */
width: 50%;
}
div#column-container div {
background-color: yellow;
float: left;
width: 40%;
margin: 5%;
/* set shadow for yellow elements */
box-shadow: 0px 1px 3px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow: 0px 0px 15px #000;
box-shadow: 0px 0px 15px #000;
/* Make sure that yellow div is not split between columns */
display: block;
/* the rest - not significant */
height: 70px;
}
This will give you almost similar look.
And the Fiddle is here.
P.S.Alter the margin and width values by yourself to make the boxes closer as per your requirement.
Here's a related bug filed with chromium. Basically, it seems that chrome just isn't that good at rendering the css columns properties. https://code.google.com/p/chromium/issues/detail?id=467196
A quick workaround is to surround your boxes in larger transparent divs that leave enough room for the shadow. This solves both of the problems.
<div id="column-container">
<div class="outer"><div>box 1</div></div>
<div class="outer"><div>box 2</div></div>
<div class="outer"><div>box 3</div></div>
<div class="outer"><div>box 4</div></div>
<div class="outer"><div>box 5</div></div>
<div class="outer"><div>box 6</div></div>
</div>
div#column-container {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
div#column-container div {
background-color: yellow;
box-shadow: 0px 1px 3px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow: 0px 0px 15px #000;
box-shadow: 0px 0px 15px #000;
width: 100%;
height: 70px;
margin: 0;
}
.outer {
break-inside: avoid;
padding-top: 0px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 20px;
}
.box {
break-inside: avoid;
column-count: 2;
column-gap: 2rem;
}
.item {
border-radius: 4px;
box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
margin-bottom: 1rem;
padding: 1rem;
break-inside: avoid;
transform: translateZ(0);
}