473,327 Members | 2,025 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,327 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 41471
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...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

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.