Hi all,

I came across a simple layout tutorial @ http://www.vanseodesign.com/blog/css/2-column-css-layout/ which I found very useful and started to play with the code. I'm have altered it to whats below and have a margin/padding issue between the content-wrap and main divs left side in IE7 and not in FF3. Would really like to know whats going on and a W3C valid fix if there is! If anyone has other browsers and it's showing differently I'd like to know as well.

 

Thanks

Denis

 

<html>
<head>
<title>2 Column CSS Layout</title>

<style type="text/css">

div {
text-align:center;
}

div#wrap {
border: 1px solid purple;
width: 800px;
margin: 0 auto;
padding: 5px;
text-align: left;
}

div#header {
border: 1px solid red;
width: 100%;
height: 300px; 
}

div#content-wrap {
border: 1px solid black;
width: 800px;
}

div#main {
border: 1px solid blue;
width: 60%;
min-height: 500px;
_height: 500px;
margin: 5px;
}

div#sidebar {
float: right;
border: 1px solid green;
width: 35%;
height: 350px;
margin: 5px;
}

div#footer {
border: 1px solid red;
width: 100%;
height: 30px;
}

</style>
</head>
<body>

<div id="wrap">
	<div id="header">
	</div>
	<div id="content-wrap">
		<div id="sidebar"></div>
		<div id="main"></div>
	</div>
	<div id="footer">
	</div>
</div>

</body>
</html>

This might be worth a look: http://www.webdesignerforum.co.uk/index.ph...p;hl=css+layout

Its a simple way to avoid troubles with inter-browser compatibility. I dont think its W3C standard though?

Thanks for that. What I'm after here at the moment is an understanding of the issue more than a fix

Hi,I've amended your code slightly and I'll try to explain what I've done.

First of all, always declare a DOCTYPE at the start of your html.

This tells the browser how to render the page.

Without this, the browser has to guess which IE isn't very good at.

Secondly, you have percentage widths and fixed pixel margins.

Always try to use one or the other (it's easier to work out for a start)

Thirdly, remember that borders and padding are added to the width you specify; a div with width 800px and border:1px has a total width of 802px.

With this in mind, always apply any padding that you need on a div to the elements inside the div i.e. the paragraphs,headings etc. This won't affect the container div's width.

Fourthly, a simple reset at the top of your stylesheet can get rid of a lot of browser differences.

* {
padding:0;
margin:0;
}

The amended code is below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 Column CSS Layout</title>

<style type="text/css">
* {
padding:0;
margin:0;
}
div {
text-align:center;
}

div#wrap {
border: 1px solid purple;
width: 800px;
margin: 0 auto;
padding:0;/*remove the padding from the wrap*/
text-align: left;
}

div#header {
border: 1px solid red;
width: 798px;/*width minus the border*/
height: 300px;
}

div#content-wrap {
border: 1px solid black;
width: 798px;/*width minus the border*/
}

div#main {
border: 1px solid blue;
width: 478px;/*width minus the border*/
min-height: 500px;
_height: 500px;

}

div#sidebar {
float: right;
border: 1px solid green;
width: 316px;/*width minus the border*/
height: 350px;
}

div#footer {
border: 1px solid red;
width: 798px;/*width minus the border*/
height: 30px;
}

</style>
</head>
<body>

<div id="wrap">
	<div id="header">
	</div>
	<div id="content-wrap">
		<div id="sidebar"></div>
		<div id="main"></div>
	</div>
	<div id="footer">
	</div>
</div>

</body>
</html>

 

Hope that helps

Regarding the reset, I have used the one Elanman suggested in the past, but have also read that it can slow the page down a bit.

 

I would recommend using Eric Meyer's css reset on any web project, it completely clears the default styling in all browsers, leaving you with a blank canvas to start work with.

 

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Thanks for that guys. I feel I know my way around css but I always seem to come back asking questions. This has answered quite a few of them.

 

Cheers

Denis