2 Column CSS Layout Help [Archive]

View Full Version : 2 Column CSS Layout Help

Brywright

04-07-2005, 06:07 AM

Hi im having problems creating my first 2 column pure css layout (no tables) and was wondering if someone could give me some help.

As the screenshot shows its looking abit weird in internet explorer and need some help.

The first problem si with the ehader. The header background is set to blue and is 800px wide and 95px in height. I made a plain red header image and linked this into the header as shown in index.php. Yet although its the same size as the header area there is still a bit of blue background showin.
Why is this? and how can i make it so this small blue background dissappears?

My Other problem is with the main content (the purple css box which says slogan here). It wont line up fully with the menu on the left. Instead as you can see there is a small orange gap on the left (part of the background)

Would someone mind helping a first time css coder into removing these 2 bits of backgrounds and getting everything line up correctly?

All my code is shown below
index.php

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

<head>
<title>Test</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="outer">
<div id="header">
<img src=/design/header.jpg>
</div>
<div id="nav">
menu here
</div>
<div id="main">
<h3>Slogan here</h3>

</div>
<div id="footer">

</div>
</div>
</body>
</html>

style.css

body {
background-color: #999999;
height:80%;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer {
width: 800px;
height: 100%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: 0px;
background-color: orange;
}
div#header {
padding: 0px;
width:800px;
height:95px;
margin: 0px;
background-color: blue;

}
div#nav {
width: 140px;
padding: 0px;
margin: 0px;
float: left;
height: 100%;
background-color: green ;
line-height: 1.4em; /*The line-height property sets the distance between lines. */
}
div#main {
width: 650px;
margin-left: 140px; /*sets starting left*/
background-color: purple ;
padding:3px;
}

div#submain {
width: 650px;
margin-left: 1410px; /*sets starting left*/
background-color: purple;
padding: 3px;
}
div#footer {
padding: 0px;
width:800px;
margin: 0px;
text-align: center;
background-color: yellow;
border-top: thin solid #000000;
}

the_pm

04-07-2005, 07:30 AM

First of all, for your header, try running everything together. This is a problem whether you're using CSS/divs or tables. IE looks at carriage returns in code and interprets them as meaning it needs to leave space for text descenders. Why does it do this? Because IE is stupid!

So, for your header, do this:
<div id="header"><img src="/design/header.jpg" /></div>

(note the use of quotations around the src link and the self-closing img tag - this is the proper way to write XHTML, which is what you've declared in your doctype)

For the second question, congratulations! You've just experienced your first 3-pixel-jog bug, another insanely stupid error that occurs only in IE! There's a very simple fix for this - declare something for the height element of the object being pushed over by three pixels. It won't seem obvious how to best do this from my description alone, but this article will help tremendously: http://positioniseverything.net/explorer/threepxtest.html

It's a shame you have to put up with these problems, but it's worthwhile in the long run. You've made a wise decision to lose the tables. Good luck with the browser bugs! :)

Brywright

04-07-2005, 05:30 PM

Thank you so much for spending the time to help me.
ive sorted 1) and cant beleive it was such a simple fix and that ie was even doing that in the first place.
2)Cheers for that as well havent had time yet to have alook (damm work) but will do tomorror

cheers

mysticcowboy

04-08-2005, 12:48 PM

You already have your answer but there is one more point you might want to consider. When you design for 800 pixel screens, remember that the browser window, itself, takes screen real estate. A width of something like 760px fits better.

Also, if you specify an absolute width for your outer div, try 100% for the inner ones. That makes it much simpler to change things if you need to.

Brywright

04-21-2005, 01:20 PM

Hi i must apologise for the late reply but family problems has meant i have been away for a while.

i have tried the fix with number 2 but i think i must not be understanding it correctly.
the div#main and the div#nav always has the gap shown by the orange background .
How do i use the said fix to remove it. As i said i am still learning css 9from the beginning) and can't get my head around what the site said about fixing it and actually implementing it.

Many thanks

Brywright

05-01-2005, 07:34 AM

Sorry but is anyone able to help?

Cheers

ubernostrum

05-04-2005, 06:07 AM

Have you tried it without the 3px padding on #main?