Problems with alignment two column in IE
Hello,
I have created a two column layout and for some reason after the banner div it drops down too far (too much space) before the columns begin. I have tried alot of different things but cannot get this to work in IE. I also am having problems with the banner not centering. It leaves space on the right. I set the width the same as the wrapper border set to 0. Please help!
Thank you in advance!
Here is the CSS:
/* CSS Document */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}
body {
border: 0;
background-color: #333;
}
#wrapper{
width: 750px;
margin-left: auto;
margin-right: auto;
border:0;
background-image:url(images/sky.jpg);
}
#banner {
height: 134px;
width: 750px;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
margin: 0;
padding: 0;
border: 0;
}
#navbar li {
display:inline;
border:1px solid;
margin:0 0 0 15px;
padding:0 0 0 10px;
line-height: 9em;
float: left;
}
#navigation {padding: 0 1px 1px 5px; margin: 0 5px 5px 10px;
font: bold 11.25px arial, sans-serif;}
#navigation li {list-style: none; margin: 2px; display: inline; float:right; line-height: 22em;}
#navigation li a:visited {color: #000000;}
#navigation li a {padding: 0.5em 1em 0.5em 0.75em;
text-decoration: none;}
#navigation li a:link {color: #333;}
#navigation li a:hover {color: #990000; text-decoration: underline;}
#container{
width: 750px;
border:0;
margin:0;
padding:0;
float: left;
}
.clearit{
clear: both;
}
h2 {
font-size:18px;
font-family: times;
color: #333;
font-variant: small-caps;
letter-spacing: 4px;
line-height: 200%;
}
#leftcol {
float: left;
width: 380px;
margin-top: 20px;
padding: 0;
margin-left: 10px;
margin-right: 0;
margin-bottom: 0;
}
#rightcol {
float: right;
padding: 0;
width: 340px;
margin-right: 10px;
margin-top: 80px;
margin-left: 0;
margin-bottom:0;
}
.textbox {
background-color: #e7e7e7;
width: 300px;
height: 75px;
float: left;
padding: 10px;
margin: 20px 0 80px 0;
}
.floatLeft {
float: left;
}
p {
color: #000;
font:normal 18px times, serif;
line-height: 1.5em;
letter-spacing: .12em;
}
p.subheading {
font:normal 16px times, serif;
letter-spacing: .8px;
line-height: 1.5em;
}
IMG.stylename
{ border: 3pt solid white; }
.rule {
width: 500px;
text-align: center;
margin-left:25px;
margin-right: 25px;
background-color: #990000;
}
#footer {
height:51px;
width:890px;
background-image:url(images/barberfooter.jpg);
background-repeat:no-repeat;
}
Here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>xxxxxxxxxx</title>
<link href="testpage.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="banner">
<ul id="navigation">
<li><a href="index.html">contact</a></li>
<li><a href="about.html">property search</a></li>
<li><a href="portfolio.html">client services</a></li>
<li><a href="testimonials.html">testimonials</a></li>
<li><a href="services.html">Jan's portfolio</a></li>
<li><a href="mainframe.html">about Jan</a></li>
<li><a href="index.html" target="_top">home</a></li></ul>
</div>
<div class="clearit"></div>
<div id="leftcol">
<img src="images/7378emainst.jpg" width="350" height="250" alt="7378 East Main St Lima" class="floatleft" />
<br/>
<br/>
<img src="images/1839rochesterst.jpg" width="350" height="250" alt="1839 Rochester St" class="floatleft" />
</div>
<div id="rightcol">
<div class="textbox">
<p>
<strong>xxxxxxxxxxxxxxxxxxxxxxxx
</strong></p>
<p class="subheading">
xxxx ccc ccc cc<br />
vvvvvvvv</p>
</div>
<div class="textbox">
<p>
<strong>xxxxxxxxxxxxxxxxxxxxxxxx
</strong></p>
<p class="subheading">
xxxx ccc ccc cc<br />
vvvvvvvv</p>
</div>
<div class="clearit"></div>
</div>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks