Trouble with float: right

**Thehappyhack** · 08-04-2009 12:12 AM

Hello,

I'm trying to develop a two column page. I can float the div to the right, but it doesn't line up flush with the right margin. Here is the Website with the code:

www.stcmedical.com/test/

I use the following CSS to center and "jello" the page:

#allcontent {
width: 400px;
margin-left: auto;
margin-right: auto;
}

I suspect this is where my problem lies, but I can't be sure. If someone could please take a look at the simple code, I would appreciate it. Naturally, it is best viewed with Mozilla. Explorer doesn't render it as intended.

Thank you,

Greg

**sujay.es@gmail.** · 08-04-2009 01:01 AM

i cant get u exactly.....

<div id="sidebar"> & <div id="main"> are overlaping

you dont want to overlap them?

ie. you have header on top and below two column with out overlaping!

**Scriptage** · 08-04-2009 01:20 AM

The page is rendering correctly. The width of the div element is equivalent to its width property plus its padding and border widths, thus, if we take a box of 200 px with a border value of 2px the actual visual width of the box is 204 px.

The W3C box model sucks. Microsoft had it right.

**Thehappyhack** · 08-04-2009 09:58 AM

I've played around with changing widths on the various elements, and one thing that works is to reduce the width of the top header box by 6 pixels, to 394, and to reduce the width of the left-side element also by 6 pixels, to 194.

Alternatively, I can enter 406px for the width of the allcontent div and reset the two other divs (header and main) to 400px and 200px, respectively.

Both methods allow the borders to not overlap between the left-side element and the floated element, and for the header to line up on top. So I'm thinking that the default border width value must be 3px, and not 2. I verified this by entering 3px for the main and floated element, and the layout was unaltered.

And this, of course, only works in W3C compliant browsers. IE doesn't respect any of this.

Am I missing an easier way of doing this here?

Thanks,

Greg

**Scriptage** · 08-13-2009 03:23 PM

There should be no difference between IE and other browsers, sounds like yo don't have a DOCTYPE and IE is rendering in quirks mode.

**Thehappyhack** · 08-13-2009 03:27 PM

Originally Posted by Scriptage

There should be no difference between IE and other browsers, sounds like yo don't have a DOCTYPE and IE is rendering in quirks mode.

I'm using this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Does anything look wrong there?

Thanks,

Greg

**Andyram2k** · 08-16-2009 09:28 AM

Hi thehappyhack,
This should work for you:

Code:

#allcontent {
	WIDTH: 400px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}
#header {
	BORDER-BOTTOM-STYLE: solid; BORDER-RIGHT-STYLE: solid; WIDTH: 400px; BORDER-TOP-STYLE: solid; HEIGHT: 100px; float: left; BORDER-LEFT-STYLE: solid
}
#main {
	BORDER-BOTTOM-STYLE: solid; BORDER-RIGHT-STYLE: solid; WIDTH: 200px; BORDER-TOP-STYLE: solid; HEIGHT: 200px; float: left; BORDER-LEFT-STYLE: solid
}
#sidebar {
	BORDER-BOTTOM-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; WIDTH: 200px; BORDER-TOP-STYLE: dotted; FLOAT: left; HEIGHT: 200px; BORDER-LEFT-STYLE: dotted
}

Just a matter of floating the other elements, but you may want to increase the container div to 403, as previously stated to accommodate for those borders, and also set the width of the borders too:

Code:

border: #000000 1px dotted;

Hope this helps

**Thehappyhack** · 08-16-2009 09:01 PM

Andy,

Your code resulted in the header div being on top of the dotted border sidebar div, with the solid border main div directly underneath the sidebar div.

I don't understand why you would want to float the header div? For me, removing it made no difference.

Thanks,

Greg

Thread: Trouble with float: right

Thread Tools

Display

Trouble with float: right

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions