Menu
How can I make div 'left' and 'right' look like columns side by side?
I know I can use float:left on them and that will work... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/ the guy says it is possible, I can't get it work though...
Code:
<style> div.left { background:blue; height:200px; width:300px; } div.right{ background:green; height:300px; width:100px; } .container{ background:black; height:400px; width:450px; } </style> <div class="container"> <div class="left"> LEFT </div> <div class="right"> RIGHT </div> </div> 
949
So if the float functions are causing problems there is a couple of options you can try. One is modify the div alignment in the div tag it self like so <div class="kosher" align=left> If this does not suit you then there is another option with margin like so. Show activity on this post. Show activity on this post.
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.
You can use display: inline to put the two div elements inline. Explanation: div elements are block elements, so their display style is usually display: block . You can wrap both the div elements in a span tag. Explanation: span works the same way as the div , to organize and group elements.
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/
.container div { display: inline-block; } Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.
Floats are also more flexible, in most cases.
107
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
