CSS 2.1: floating <div>s next to each other: variable width

Forum Moderators: not2easy

Message Too Old, No Replies

CSS 2.1: floating <div>s next to each other: variable width

Two <div>s, one floated left, the other right. Is variable width possible?

polemon

11:12 am on Jul 23, 2008 (gmt 0)

Hi!

I have Two <DIV>s, one is floated left, the other right.

They should appear next to each other, so I assign CSS width attributes.
This works fine, if the left div is "width: 32%;" and the right one is "width: 66%;".
But I want a static width for the right one: "width: 10em;".
Now I want the right one, to occupy all the rest of the available space, in effect the whole browser width, minus those 10em the left div occupies.

Those are the DIVs and in that order:

<div id="main-wrapper">
<div id="main">
... 
</div></div>
<div id="sidebar-wrapper">
<div id="sidebar">
...
</div></div>

And this is the CSS 2.1:

div#main {
 float: right;
 width: auto; <--- what to put in here?
}
div#sidebar {
 float: left;
 width: 10em;
}

"width: auto;" does not work, mind you. with "auto", the div will take up as much space as possible, pushing the other div down.

D_Blackwell

1:42 am on Jul 24, 2008 (gmt 0)

Do you need to float left and right for what you describe?

If you float the 'sidebar' left (You'll need to move that <div> in the HTML.), then, unless I misunderstand, there is no need to float the 'main'. You won't need any width: or margin: for it either. It will just automatically fill the space to the right of 'sidebar'.

Of course, when you start putting stuff in those <div>s you might find other issues to solve but this may be sufficient to get you started.

<html>
<head>
<style>
div#main {
background-color: #ccc;
}
div#sidebar {
float: left;
width: 10em; background-color: #eee;
}
</style>
</head>
<body>
<div id="sidebar-wrapper">
<div id="sidebar">
DIV - SIDEBAR
</div>
</div>
<div id="main-wrapper">
<div id="main">
DIV - MAIN
</div>
</div>

</body>
</html>