how do I have two divs with 50% width side by side and a margin without the second div dropping underneath the first?
Div id style is as follows:
#div3{width:50%; float:left; margin: 2px; background-color:yellow;}
Thanks,
Dan
50% + 50% + margins > 100%
Therefore, the elements wrap. You will need to adjust the width or the margins to stay within the 100% limit.
#div3{width:48%; float:left; margin: 1%; background-color:yellow;}
hows that?
You need to change the width of divs to less than 50% because together they have 50% + 50% + 4x margin 2px. Try to change it to an exact value in pixels or f.e. 49%.
The margin will give extra width to the div elements.
You could try setting the divs to 49% each and giving each div a margin auto.
This will centralise the divs and still give you a small amount of margin dependant on the browsers size.
I always cheated and set them both at 49% width, and then added padding (not a margin). But you want some visual colorblocking, right? If you want one to have a background and one to be no background (relative to the rest of the page) set the yellow one at 50%, and the no-color background one at 49%.
You could look into using the new box-sizing property which subtracts the padding from the width instead of adding it on top like you are experiencing:
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Most browsers don't support the entire spec yet but it can accomplish what you want: http://caniuse.com/#search=box-sizing.
Though I believe that you would have to use padding instead of margin to create the spacing.
Related
Please see example at
http://jsfiddle.net/cne94hw4/
.a{
width: 100%;
background-color: #eee;
margin-left: 200px;
}
I was expecting "width 100%" will mean 100% of the windows, but clearly it's not when I add a margin to it. I found this is difficult to understand.
What's the exact relationship of the box and the margin? It's there any written rule for this?
Your question is about the CSS Box model, which is described in detail at the CSS specification: http://www.w3.org/TR/CSS2/box.html
In brief, the width defines the width of the content box. If you add padding, borders
and margins, then the overall width of the block box is the width of the content box plus
any widths due to padding, borders and margins.
As for the height, padding and border widths are added to the overall heigth of the
block. Margins, though, can collapse with the margins of adjacent blocks, which is
another topic to look at (see: collapsing margins).
Another concept is the block formatting context, which comes into play if you
deal with elements that may be floated or positioned.
In your example, the overall width of the a element is 100% plus 200px due to the
left margin.
Finally, you can have some control over how the width is computed by using the box-sizing property.
width: 100%' does mean100%` of the document your example, but you also set a margin, which is what's limiting the width of the element. See what happens when you remove it.
try the following
.class{
width:100%;
padding-left:200px;
box-sizing:border-box;
}
margin adds extra space out of the box.
I have been trying to make fluid boxes that will squeeze when you resize the window.
but this is whats happening:
When I resize the window the 4th box moves to the bottom and then the width of the boxes shrink. why is the 4th box moves under? what am I doing wrong?
Here's is whats happening:
http://www.dinkypage.com/169785
Here's the source:
http://pastebin.com/raw.php?i=4ZbbXxCq
Help Please
It's because you give the width: 25% to all 4 block, but also give 'padding: 10px' to them so obviously the width need to take more than 100%.
You need to either remove your padding or reduce the width of your block less than the total length of your padding, for example 22%
You need to use box-sizing: border-box. This is because the padding of 10px you have assigned to each of the floated div elements are added on top of the 25% width you have assigned, so the actual sum of the width of all four floated divs will exceed 100% (in fact, it will be 100% + (2*10px)*4 = 100% + 80px
The box-sizing: border-box property will ensure that the height and width you have set for the element will also include the paddings (if any) and/or border widths (if any).
In fact, I would suggest Paul Irish's recommendation using:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Since you also have your height explicitly declared, you might want to change the height of the containers to reflect the change in the box model. Since you have a padding-top of 30px and now it will be computed as part of the height of 240px, you should change the height to 240px + 30px (top padding) + 10px (bottom padding) = 280px.
This question already has answers here:
css - 100% + padding?
(2 answers)
Closed 8 years ago.
Basically I have a div with this CSS:
.mydiv{
position:absolute;
top:0;
left:0;
width:100%;
padding:7px;
}
The browser shows the horizontal due to padding (width 100% + 7px)
Take a look here: http://jsfiddle.net/3FrLq/
How can I have that div not showing the horizontal bar? (Without having to add another div inside?)
Get rid of the width:auto and replace it with right:0.
jsFiddle example
Since your element is positioned absolutely, you can in effect pull the left and right sides to the edges of the element's container without invoking the scrollbar.
Correct HTML semantics pretty much requires that you have another element inside. In this case, your text should be wrapped in <p> tags.
Doing that automatically gives you something to hook into to set margin or padding on the inner element.
That said, if you really can't/won't have an inner element, remove your width and set right: 0. The nifty thing about absolutely positioned elements is that if you set opposing positions to 0, you can "stretch" the element (it works with top/bottom, too).
Alternatively, if your element isn't positioned absolutely, you can change your width: 100% to max-width: 100% (or add the max-width line, to deal with a bug in an old version of IE, if you have to go back that far), which will hard-cap the total width. This one's in action here - http://jsfiddle.net/3FrLq/5/ .
You can use the box-sizing: border-box CSS property which will exclude the padding and borders from the actual width and height of the element:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border -box;
Here's the fiddle:
http://jsfiddle.net/3FrLq/3/
More info / browser support for box-sizing:
https://developer.mozilla.org/en-US/docs/CSS/box-sizing
You can set the div to display inline-block:
.mydiv{
display: inline-block;
position:absolute;
top:0;
left:0;
width:100%;
padding:7px;
}
This will display it inline (not stretching horizontally), while allowing you to still apply padding and margins to the top and bottom (unlike display: inline
Get rid of width specifying & just specify 0px; for all 4 sides
if IE8+ compatibility enough for you, you can use box-sizing.
if you want it to be working only with full width, set both left & right to 0, but do not set a width.
It seems that when I have a table inside a div and I set the table to 100% width and give it some margin, it seems to disregard the rightside margin. Here is the fiddle for it:
http://jsfiddle.net/gFQGb/
The width applies to the actual content of the element, so you have a table with 100% wide content, and on top of that you add some margins pushing the width over 100%, thus the right side of the table extends beyond the parent's right edge. Probably you should go with padding on the parent instead of margin on the table, or an additional wrapper <div> with just the margin.
just add padding: 10px; to the .inner class and remove margin from the table.
Here is the demo
That's how the CSS default box model works: width of the element (defined via width: x) + borders + margins + padding = total amount of space it takes up.
http://css-tricks.com/the-css-box-model/
You can change the box-model by using box-sizing: border-box, which will cause the width: 100% to include your paddings/borders.
http://css-tricks.com/box-sizing/
Newbie question here. I have a #wrapper as my main container. Like so:
#wrapper {
margin: 0 auto;
padding: 0 20px;
width: 960px;
height: 100px;
}
My question is: what is the actual width of the wrapper now? 960px or 1000px? Let's say I want to have a #header inside the #wrapper. What should the width of my #header be, assuming I want it to be the width of the #wrapper?
The width of the wrapper in your example is now 1000px. Padding is added to the width, wheras Margin is not.
If you put a header inside the wrapper, you would want it to be 1000px to stretch entirely from side to side, but that would be impossible because of the padding, so your header would still have to be 960px.
Heres a JSFiddle (Sorry, just discovered this today!)
http://jsfiddle.net/wGYfR/8/
The outer width is 1000px and the inner width is 960px. So if you want to put inside the wrapper it should have width <= 960px
The wrapper is still 960px. However, you have added padding of 20px on both sides meaning for 20px on both sides there will be only white space. The usable area is now 920px.
You don't have to set the width of the header. If you don't it will fill the whole wrapper element (minus the padding). You header will end up being 920px.
I suggest firebug This will help you so much. Seriously.
The actual width would still be 1000px. You can set a background color on your #wrapper to see that the width will still be 1000px.
CSS Box Model Illustration http://img405.imageshack.us/img405/3402/boxmodel.png
If you use Chrome or Safari (or firebug with Firefox for that matter) you can easily check out the width of an element, and how padding and margin in affecting it.
The width should be 960px, however only FireFox adds the padding to the width.
To fix this, put the following code on top (or at least above all div selectors) of your code:
DIV { /*let Firefox stick to the web standard concerning padding*/
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}