469,312 Members | 2,524 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,312 developers. It's quick & easy.

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

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?

Jan 28 '06 #1
8 41336
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)
Jan 28 '06 #2
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.
Jan 30 '06 #3
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
Jan 30 '06 #4
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)
Jan 31 '06 #5
>>> 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)
Jan 31 '06 #6
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)
Jan 31 '06 #7
> 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)
Jan 31 '06 #8
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.

Feb 1 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Marie ALHOMME | last post: by
7 posts views Thread by Gnolen | last post: by
11 posts views Thread by Dennis | last post: by
reply views Thread by McGeeky | last post: by
2 posts views Thread by rfox | last post: by
2 posts views Thread by Ben C | last post: by
5 posts views Thread by maya | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.