473,225 Members | 787 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 software developers and data experts.

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 41466
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Marie ALHOMME | last post by:
Hello everybody ! I'm working on a new stylesheet for my website, and haven't been able to understand how to make it do what *I* want :) I'm pretty sure it's simplistic, but I'm stuck... To...
5
by: Urs Martini | last post by:
Hi! I experienced some problems using IE 6 and some kind of css like this: .... text above ... <div style="border: 1ps solid blue; float: left;">This is my 1st float</div> <div...
7
by: Gnolen | last post by:
Hi, I have a problem with float in firefox/mozilla, the 'ads'-div doesn't resize on the height with the 'ads_left' and 'ads_right'. In IE there is no problem but in FF there is. The 'ads'-div do...
11
by: Dennis | last post by:
Please bear with me ... I am a newbie to DIVs. Why does the following work in IE6, but not in NS7? ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> ><HTML> > ><HEAD> > <META...
3
by: inkswamp | last post by:
I've been using CSS for quite a while now but I have yet to master its eccentricities. Here's something I recently ran across and if someone could explain why this happens, I would appreciate it. ...
0
by: McGeeky | last post by:
Hi. I am using DIVs for lay outs rather than tables but cannot resolve a catch 22. I need to use the float: left so that I can get DIVs to line up in rows however, float : left does not respect the...
2
by: rfox | last post by:
I'm attempting to eliminate tables from my diet and rely instead on nutritious and tasty CSS. However, every time I do, IE6 makes me nauseous. In what I would think would be a very...
2
by: Ben C | last post by:
On 2008-04-08, Gus Richter <gusrichter@netscape.netwrote: Sometimes 0,0 of more than one container blocks occupy the same pixel on the screen, so this is not a good criterion. body float div...
5
by: maya | last post by:
hi, here, http://www.mayacove.com/design/sd/test2.html <div class="entry"has a bottom-margin of 20px.. but it's ignored if divs inside it have "float" property.. (put borders around divs for...
2
dlite922
by: dlite922 | last post by:
The frustrating thing with coding with divs instead of tables is trying to get them to "act" like they're inside each other. I have a container div, and three sub-divs. First contains a plus...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.