ansaurus

Question

Two column div layout, with one taking the remainder

Answer 1

A:

Floating only one will allot the remaining space to the other.

<div style="float:left; width:100px;">This is my floated DIV</div>
<div style="margin-left:100px;">And this is my non-floated DIV</div>
<div style="clear:both;"></div>

Jonathan Sampson 2009-12-28 13:55:42

This sets a fixed width on the left column, and I want the left column to scale according to content.

Staale 2009-12-28 14:11:40

Answer 2

+1 A:

Try this:

<body>
<div style="float: left; background: red; width: 200px; ">Hi</div>
<div style="background: blue; margin-left: 210px; ">Hi again</div>
</body>

This way your right div will take up the remainder of the space. But you will have to watch out for clearing.

Igor Zinov'yev 2009-12-28 13:56:31

This sets a fixed width on the left column, and I want the left column to scale according to content.

Staale 2009-12-28 14:10:41

Maybe there's a clean way to do it, but I can't see it. Maybe you should determine some certain width that your tree will use and set it fixed? In my experience sites that have defined column width just look better than the ones that stretch to fit the content.

Igor Zinov'yev 2009-12-28 14:20:03

@Staale well, that's not what your question says...probably should edit it to say the "FIRST" NOT the second column (div)

Mark Schultheiss 2009-12-28 15:34:44

Answer 3

A:

It looks like you need a table. I think you should try to solve your issues with ie6 and tables instead.

Alsciende 2009-12-28 14:38:42

This is what I ended up doing.

Staale 2009-12-28 14:48:34

Answer 4

A:

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
    margin:0;
    padding:0
}
html, body {
    height:100%
}
#left {
    background:red;
    float:left;
    height:100%;
    overflow:hidden
}
#right {
    background:blue;
    height:100%
}
</style>
</head>
<body>
<div id="left">
    <p><img src="http://www.google.be/intl/en_com/images/logo_plain.png" alt="Google" /></p>
</div>
<div id="right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit massa vel nisi suscipit tincidunt. Proin tortor massa, pellentesque eget pharetra et, rutrum eu purus. Pellentesque iaculis justo a erat ultricies sodales. Nunc eu justo felis. Nullam fermentum erat sed ligula interdum consectetur imperdiet odio sagittis. Mauris sodales magna ornare dui imperdiet pretium. Donec augue erat, suscipit at aliquet vel, sodales id lorem. Aenean id fermentum est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin hendrerit ligula a neque placerat condimentum at ornare odio. Etiam metus augue, fringilla malesuada vestibulum eget, gravida sed mauris. Pellentesque non orci eget libero placerat vehicula. Vivamus iaculis bibendum risus, ac venenatis tellus consequat convallis. Nam tristique eros quis odio commodo venenatis. Suspendisse volutpat euismod mi eu facilisis. Quisque malesuada libero quis est suscipit et cursus augue rhoncus. Pellentesque molestie convallis nibh at pretium.</p></div>
</body>
</html>

There is only a little gap between the div's in IE6.

Midas 2009-12-28 14:43:21

ansaurus

tags:

views:

answers:

Two column div layout, with one taking the remainder

related questions