Page 1 of 1

Side by Side div boxes?

Posted: Thu Sep 02, 2010 2:37 pm
by wurdup
I have 2 div boxes in a containing div (900px). The left box is width 200px and I want the second div to get width automatically (would be 700px in this case). I tried this and works ok with float:left but as soon as you fill the box with text/pics the box moves below so it's no longer side by side. How is this achieved without actually using width:700px;

thanks

Re: Side by Side div boxes?

Posted: Wed Sep 08, 2010 5:31 pm
by ajith_rock
Hello Wurdup,

I assume that you are actually using a "border" attribute with your divs. If this is the case, try to remove the border and test the code again. Else try the following code :

<html>
<body>
<div style="width:900px;height:900px;border:1px solid green;">
<div style="width:198px;height:400px;float:left;border:1px solid red;"></div>
<div style="width:698px;height:400px;float:left;border:1px dotted black;">
this will work.
</div>
</div>
</body>
</html>

Remember,

Each time you float an element :

1. You have to specify the width for the element.
2. Div's are greedy. They will want to occupy the biggest space available, and thus will always want to get below the first div, to occupy the entire width of the parent element.

Let me know, if it still doesnt work.

Cheers,

--
Ajith

Re: Side by Side div boxes?

Posted: Wed Sep 08, 2010 8:43 pm
by califdon
Also, if you have margins or padding for any of the 3 divs, this will affect how the divs are displayed. If your left box has a width of 200px, for instance, and has a margin of 6px, and maybe a border too, that's all going to be considered when rendering the layout. What I sometimes do is use percentages, with min-width to prevent them from being squeezed unreasonably when the window is re-sized.