Hi, i am trying to build a basic website for myself, the problem i'm having right now is my div.content. What is happenning is that when i view my site on FF or Safari, my div.content seems to encapsulate my div.nav which i don't want it to do, but when viewing it on IE it does not encapsulate it, which is what i do want it to do. To make things clearer, i've put the background color of my div.content yellow for you guys to see what i mean. /* homepage_V1.css is used to help build my homepage*/ body { margin-top: 2em; margin-left: 2em; margin-bottom: 1em; margin-right: 1em; } div.container { width: 80em; border: solid #9400D3 0.1em; height: 40em; padding-bottom: 1em; } div.header { padding: 0.5em; background-color: #66CDAA; height: 5.2em; } div.nav { border: 0.1em solid red; width: 10em; height: 28.3em; float:left; } div.content { border: solid #FF8C00 0.1em; padding-bottom: 0; margin-left: 0em; /** use this to separate nav and content **/ height: 28.4em; background-color: yellow; } Code (markup): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Home Page V1</title> <link rel="stylesheet" type="text/css" href="homepage_V1.css" /> </head> <body> <div class="container"> <div class="header" align="center"> <h1> WELCOME TO THE HOME PAGE </h1> </div> <div class="nav"> <ul> <li><a href="#Home"> Home </a></li> <li><a href="#Contact"> Contact </a></li> <li><a href="#News"> News </a></li> <li><a href="#About"> About </a></li> </ul> </div> <div class="content"> <!-- <div class="tpleft"> <h1 align="left">TOP LEFT </h1></div> <div class="tpright"><h1 align="right"> TOP RIGHT </h1></div> --> <!-- <div class="btleftimg"> <img src="gal_car_stars1.jpg" width="557" height="259" /></div>--> </div> </div> </body> </html> Code (markup): Can somebody tell me why the div.container encompasses my div.nav on both FF and Safari but not on IE? thanks
They look the same to me. Which version of IE? In any case, the modern browsers will always show what you wrote. You should never trust IE to do anything right.
I don't have IE7 on this notebook so I can't look but IE8 does not work like IE7 compatability mode which doesn't work like IE7 which doesn't work like IE6 which doesn't work at all.
Of course the box model issue. Don't use borders and paddings with width. div{width:80px; padding:10px} will display a 80px div on some browsers, a 100px one on others...
As mentioned by Javier, you're running into the box model problem. There are several work-around solutions: either use hacks or additional markup. I usually prefer the markup method so that my pages still validate strict. To do so, you need to contain your content, and add your padding and borders inside. For example: <div class="container"> <div class="content"> <p>Content goes here.</p> </div> </div> HTML: The "container" class holds your width value (e.g., 200px ) and your "content" class has the padding, border, etc. The "content" will compress itself to fit inside the container even after you've applied borders and padding. Just keep in mind that you don't apply a width to the content element. Alternatively, you could rely on the various CSS hacks or conditional stylesheets if you absolutely want to keep your markup pristine. I'm also unsure why you'd by setting your margins and widths using em. The em value is usually used with text elements so that they can "stretch" properly when the user sets his font size higher than the default. In most cases, you're better off using fixed-size values like pixels or percentages for width and margin.
Please don't confuse him over the box model issue. This is not a concern here. If you use a proper doctype, which he is, it's not an issue.
He is running into the box model issue: the total width is wider than he intended and the borders are also messing the layout a bit depending on the browser. But now I see the problem he really meant: you need to set margin-left: 10em; for div.content so there's space for the menu.
We were talking about the difference between quirks and standards mode regarding the "box model" issue.