Forum Moderators: not2easy
I've used webmasterworld as a tool to solve alot of my css problems for some time now, and finally I've decided to sign up! I'm fairly new to css as well.
Well here goes here's my problem:
I have a 3 column fixed layout; top, leftnav, content, and footer. My problem is that i'm gettin this weird padding on the left in the content div. I've declared content div to have 8px padding but I get 11px.
My other problem is, getting the second set of h2 and <p>'s to clear. To be honest i'm not sure where to clear it, I've tried putting clear: left, right, and even both every where it didn't work. Maybe I need to separate it with divs but even when I do that it still does not work the way I would like it to fall.. Or maybe the whole code is wrong! ; ;
anyways below is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>test</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
font-size: 90%;
}
#container {
width: 750px;
padding: 0;
margin: 0px auto;
background-color: #333;
}
#top {
height: 70px;
padding: 0;
margin: 0;
background-color: #666;
}
#top h1 {
padding: 0;
margin: 0;
visibility: hidden;
}
#leftnav {
position: relative;
float: left;
width: 240px;
height: 670px;
margin: 0;
padding: 0;
background-color: #ccc;
}
#content {
margin-left: 240px;
margin-right: 24px;
margin-bottom: 24px;
padding: 8px;
background-color: #000;
}
#footer {
clear: both;
margin: 0;
padding: 0;
color: #333;
height:40px;
background-color: #666;
}
#footer h5 {
padding-top: 14px;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #fff;
text-align: center;
}
/* Left Nav Starts */
#menu {
position: absolute;
}
#menu a {
position: absolute;
height: 24px;
width: 127px;
text-decoration: none;
}
#menu a i { visibility: hidden; }
a#home { top: 85px; left:9px; height:43px; width:156px;}
a#print { top: 152px; left:19px; }
a#promo { top: 184px; left:19px; }
a#eps { top: 216px; left:19px; }
a#char { top: 248px; left:19px; }
a#tv { top: 280px; left:19px; }
a#form { top: 312px; left:19px; }
/* Left Nav Ends */
div.imgright img {
padding: 0;
margin: 0;
float: right;
border: solid 1px #666;
}
#content h2 {
margin: 0;
padding-top: 5px;
background-color: #333;
width: 260px;
height: 22px;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #fff;
}
p {
padding-left: 23px;
padding-right: 17px;
padding-top: 4px;
margin:0;
background-image: url("images/arrbg.gif");
background-repeat: no-repeat;
border-bottom: solid 1px #666;
width: 220px;
height: 19px;
}
a.aleft {
display: block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #cc9900;
text-decoration: none;
margin: 0;
padding: 0;
width: 150px;
}
a.aright {
display: block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #fff;
text-decoration: none;
margin: 0;
padding: 0;
float: right;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Print Ad</h1>
</div>
<div id="leftnav">
<div id="menu">
<a href="test.html" id="home"><i>test</i></a>
<a href="test.html" id="print"><i>test</i></a>
<a href="test.html" id="promo"><i>test</i></a>
<a href="test.html" id="eps"><i>test</i></a>
<a href="test.html" id="char"><i>test</i></a>
<a href="test.html" id="tv"><i>test</i></a>
<a href="test.html" id="form"><i>test</i></a>
</div>
</div>
<div id="content">
<div class="imgright"><img src="images/pro1.jpg" width="200" height="149" alt="" /></div>
<h2 class="header">Print Creative #1</h2>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a></p>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a></p>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a></p>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a>
<div class="imgright"><img src="images/pro1.jpg" width="200" height="149" alt="" /></div>
<h2 class="header">Print Creative #1</h2>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a></p>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a></p>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a></p>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a>
</div>
<div id="footer"><h5>© Footer . All Rights Reserved.</h5></div>
</div>
</body>
</html>
leftnav id had a hight of 670px which was pusing content id column on IE6.
In the content ID I just added divs to separate the floats,
div.floatleft {
float: left;
}
div.floatright {
float: right;
margin:0;
padding:0;
}
div.group {
height:200px;
border: 1px dashed #333;
}
div.spacer {
clear: both;
}<div class="group">
<div class="floatleft">
<h2 class="header">Print Creative #1</h2>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a></p>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a></p>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a></p>
<p><a href="#" class="aright">50</a><a href="#" class="aleft">Test</a>
</div>
<div class="floatright"><img src="images/pro1.jpg" width="200" height="149" alt="" /></div>
</div>
lol fixed my own problem yay!
=P
