How do I float two divs side-by side on a page?

[Brian Kendig]

I have a page which should have a "sidebar" to the left, and a "main"
block of content to the right. I want to represent each block as a
<div>, and I thought I could do this by having "float: left" on the
sidebar's CSS, and "float: right" on the main block's CSS.

Problem is, when I do it this way, the main block goes *under* the
sidebar, not beside it. I'm guessing this is because the main block
contains text and wants to be as wide as it can be.

I don't want to have to specify an exact width for the sidebar, so I
don't want to put "width: 150px" on the sidebar and "margin-left:
180px" on the main block. I want the sidebar to be as wide as it needs
to be, and then have the main block automatically fill up the rest of
the page's width. How do I do this?

[Jim Moe]

Brian Kendig wrote:

I don't want to have to specify an exact width for the sidebar, so I
don't want to put "width: 150px" on the sidebar and "margin-left:
180px" on the main block. I want the sidebar to be as wide as it needs
to be, and then have the main block automatically fill up the rest of
the page's width. How do I do this?

You could set display:table-cell for the sidebar but that is ignored by IE.
You *must* specify a width for a floated block. Otherwise, by default,
it has a width:100% (divs are like that). Use ems for the width so it
adjusts to font size changes.
Since there are only the two columns, you need only float the sidebar in
the main block. The other elements will flow around it.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[kchayka]

Jim Moe wrote:

You *must* specify a width for a floated block. Otherwise, by default,
it has a width:100%

That is true for CSS 2.0, but not for CSS 2.1.

MacIE5 is the only CSS-capable browser I know that follows the 2.0 spec
on this. CSS 2.1 browsers should adjust the width according to the
particular content.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Spartanicus]

kchayka <us****@c-net.us> wrote:

You *must* specify a width for a floated block. Otherwise, by default,
it has a width:100%

That is true for CSS 2.0, but not for CSS 2.1.

MacIE5 is the only CSS-capable browser I know that follows the 2.0 spec
on this.

Opera 6 and earlier also.

--
Spartanicus

[Jim Moe]

kchayka wrote:

You *must* specify a width for a floated block. Otherwise, by default,
it has a width:100%

That is true for CSS 2.0, but not for CSS 2.1.

Damn! So it is.
Well, then. The OP should give us a URL that shows a test case where the
floated object does not shrinkwrap the enclosed elements.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Alan Silver]

>>> You *must* specify a width for a floated block. Otherwise, by default,

it has a width:100%

That is true for CSS 2.0, but not for CSS 2.1.

Damn! So it is.
Well, then. The OP should give us a URL that shows a test case where the
floated object does not shrinkwrap the enclosed elements.

Not the OP!! I'm the Op, and I was asking how to reproduce a common
table layout with CSS. I never laid claim to be able to do any of this
in CSS, that's why I came here to find out how to do it.

Who did you mean?

--
Alan Silver
(anything added below this line is nothing to do with me)

[Jim Moe]

Alan Silver wrote:

You *must* specify a width for a floated block. Otherwise, by default,
it has a width:100%

That is true for CSS 2.0, but not for CSS 2.1.

Damn! So it is.
Well, then. The OP should give us a URL that shows a test case where the
floated object does not shrinkwrap the enclosed elements.

Not the OP!! I'm the Op, and I was asking how to reproduce a common
table layout with CSS. I never laid claim to be able to do any of this
in CSS, that's why I came here to find out how to do it.

Who did you mean?

You are Brian Kendig? Your name, Alan Silver, never showed previously in
the thread list.
The OP, whoever that is, originally asked how to get a floated object to
size itself automatically to its content. The answer is that it does that
by design. So I requested a demo page showing how that design goal is
*not* achieved.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Alan Silver]

> You are Brian Kendig? Your name, Alan Silver, never showed previously

in the thread list.

I am Mr I.M. Confused!! I thought I was reading another thread (which I
started) and was confused when a reference to the OP didn't seem to
refer to me.

I'll just go and sit quietly in the corner ;-)

--
Alan Silver
(anything added below this line is nothing to do with me)

[Trevor L.]

Well, let's forget all the to'ing and fro'ing as to who wrote what in
reply to whom

The simple answer (and I have tried it) is this
#left {
float: left;
width: 135px;
height: 100%;
}

#right {}

The width is *not* necessary. I set it for another reason. The <div>
will expand in width to the size of the contents, *not* to the size of
the browser window. The height is also not necessary.

The HTML is just
<div id="left">
<!-- contents here -->
</div>

<div id="right">
<!-- contents here -->
</div>

If you don't want any CSS for the "right" <div>, just omit
#right {} from the CSS
and id = "right" from the second <div> in the HTML

In #right, you an add any CSS that you want.