...

View Full Version : 3 column layout problem



Skippy
06-07-2010, 07:40 PM
Hey, I'm having a little CSS issue and I was wondering if you could help me out.

This is my html page:

<!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" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<body>

<div id="wrap">
<div id="topnav"></div>
<div id="header"></div>

<div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
</ul>
</div>

<div id="sidebar">
<h3>Sidebar</h3>
</div>

<div id="rightcol">
<h3>Rightcol</h3>
</div>

<div id="content">
</div>
</div>
</body>
</html>

In styles.css I have this:

body {
background: #f0f0f0;
margin: auto;
height: 100%;
font-family: tahoma;
color: #424242;
font-size: 12px;
}
a {
color: #424242;
font-size: 12px;
text-decoration: none;
}
a:hover {
color: #424242;
border-bottom: 1px dotted #424242;
}
h3 {
font-size: 16px;
font-weight: bold;
color: #424242;
margin-bottom: 2px;
}
#wrap {
background: url('../images/wrap.png') repeat-y;
width: 928px;
height: auto !important;
display: block;
margin-left: auto;
margin-right: auto;
bottom: 0;
}
#topnav {
height: 20px;
background: url('../images/topnav.png') repeat-x;
width: 900px;
margin-left: 14px;
border-bottom: 1px dashed #d6d6d6;
}
#header {
background: url('../images/header.png');
width: 348px;
height: 47px;
margin-top: 20px;
margin-left: 20px;
}
#nav {
background: url('../images/nav.png');
width: 900px;
height: 35px;
margin-top: 20px;
margin-left: 14px;
}
#nav ul {
float: left;
list-style: none;
margin:0; padding: 0 0 0 10px;
margin-top: 10px;
}
#nav ul li {
display: inline;
}
#nav ul li a {
display: block;
float: left;
padding: 0 5px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-size: 12px;
}
#nav ul li a:hover {
color: #af1a2c;
border-bottom: 0px !important;
}
#sidebar {
float: left;
width: 170px;
margin-top: 2px;
margin-left: 20px;
margin-bottom: 20px;
}
#sidebar a {
font-size: 14px;
}
#sidebar a:hover {
font-size: 14px;
}
#content {
float: left;
width: 510px;
margin-bottom: 20px;
margin-left: 5px;
}
#rightcol {
float: right;
width: 180px;
margin-top: 2px;
margin-right: -230px;
margin-bottom: 20px;
}

Now, the code above works in firefox however in internet explorer it didn't so I used a seperate stylesheet for ie.

In ie.css I have:

h3 {
margin-top: 10px;
margin-bottom: 2px;
}
#sidebar {
float: left;
width: 160px;
}
#content {
float: left;
margin-top: 0px;
width: 525px;
}
#rightcol {
margin-left: 45px;
width: 180px;
}

The problem I am having is I would like the div's to be able to move when content is added to it but the content div drops below the right div like this:

http://imagesocket.com/view/ie820.png

This only happens in internet explorer, it works in firefox, it should be like this:

http://imagesocket.com/view/firfox6e1.png

Could anyone help me out with this please?
Thanks,

cjsingsaas
06-07-2010, 09:01 PM
I do not experience the same issue you are reporting in IE8? Were you testing in an old version or something?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum