Trouble with float: right
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:
I use the following CSS to center and "jello" the page:
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.
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!
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.
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?
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:
Originally Posted by Scriptage
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Does anything look wrong there?
This should work for you:
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:
WIDTH: 400px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto
BORDER-BOTTOM-STYLE: solid; BORDER-RIGHT-STYLE: solid; WIDTH: 400px; BORDER-TOP-STYLE: solid; HEIGHT: 100px; float: left; BORDER-LEFT-STYLE: solid
BORDER-BOTTOM-STYLE: solid; BORDER-RIGHT-STYLE: solid; WIDTH: 200px; BORDER-TOP-STYLE: solid; HEIGHT: 200px; float: left; BORDER-LEFT-STYLE: solid
BORDER-BOTTOM-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; WIDTH: 200px; BORDER-TOP-STYLE: dotted; FLOAT: left; HEIGHT: 200px; BORDER-LEFT-STYLE: dotted
Hope this helps
border: #000000 1px dotted;
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)