Side by Side div boxes?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
wurdup
Forum Commoner
Posts: 39
Joined: Thu Apr 01, 2010 11:36 am

Side by Side div boxes?

Post 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
ajith_rock
Forum Newbie
Posts: 11
Joined: Wed Sep 08, 2010 2:37 am

Re: Side by Side div boxes?

Post 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
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Side by Side div boxes?

Post 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.
Post Reply