Menu
I need three divs in one line.
One is size 200px, second 300px and last div should be what's left.
Why is my last div in a new row?
<div style="float: left; width: 200px; background: #223355">a</div>
<div style="float: left; width: 300px; background: #223344">b</div>
<div style="float: left; width: 100%; background: #334455">c</div>
346
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent. so setting the 'width' to 'auto' would be better? Yes, but that's the default anyway.
Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.
AS others have said 100% is 100% of page width.. but I disagree with user who says it can't be done with 'plain' CSS
<div style="float: left; width: 200px; background: #223355">a</div>
<div style="float: left; width: 300px; background: #223344">b</div>
<div style="overflow: hidden; background: #334455">c</div>
Shouldn't you just have to remove the float:left; on the last div for it to work?
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
