0
Anyway, what's happening is, the main content DIV, for some reason, is causing the right content DIV to be pushed down.
It's not appost tah do that.
What I want if for them to line up evenly, like in the example [http://www.csslicing...com/live/5.html], but instead, it looks like this [http://i30.tinypic.com/30w57hc.jpg]
I'm posting the code below. Can anyone help out?
CSS
<style type="text/css">
html { font-size: 100%; }
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
margin: 0;
padding: 0;
text-align: center;
}
#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}
#header {
height: 102px;
padding-bottom: 36px;
background: #FFF url('webpage/header_gradient.gif') repeat-x bottom;
}
#logo {
position: relative;
top: 0;
left: 0;
}
#content {
margin-top: 20px;
}
#left {
width: 193px;
float: left;
}
#main {
width: 398px;
margin: 0 10px 0 10px;
float: left;
font-size: 1.2em;
color: #333;
}
#right {
width: 193px;
float: right;
}
.clear {
clear: both;
}
#content .gradient {
height: 30px;
border: 1px solid #720000;
}
#left .gradient {
background: #a50a0a url('webpage/content_lc_head.gif') no-repeat;
padding: 5px 10px 0 5px;
}
#right .gradient {
background: #a50a0a url('webpage/content_rc_head.gif') no-repeat;
padding: 5px 5px 0 5px;
}
#footer {
margin-top: 30px;
border: 1px solid #720000;
height: 36px;
padding: 5px 10px 0 10px;
background: #a50a0a url('webpage/footer_gradient.gif') repeat-x;
}
#content .gradient, #footer {
font-size: 1.1em;
font-weight: bold;
color: #FFF;
}
ul#menu {
margin: 5px 0 5px 0;
padding: 0;
}
ul#menu li {
margin-bottom: 4px;
list-style-type: none; /* removes the bullet point */
}
ul#menu li a {
display: block;
padding: 3px;
text-decoration: none;
color: #000;
}
ul#menu li a:hover {
background-color: #720000;
color: #FFF;
}
ul#menu li.alt a:link, ul#menu li.alt a:visited {
background: #ffc6c6;
}
#right .box {
margin-top: 3px;
border: 1px solid #AAA;
background: #DCDCDC;
color: #333333;
padding: 4px;
}
</style>
HTML
<body> <div id="container"> <div id="header"><img id="logo" src="webpage/logo.gif" width="328" height="102" alt="Red Arrow Designs" /></div> <div id="content"> <div id="left"> <div class="gradient">Heading</div> <ul id="menu"> <li><a href="#" title="Visit our homepage">Home</a></li> <li class="alt"><a href="#" title="Buy products online in our store">Our Store</a></li> <li><a href="#" title="Find our shop by online map">Shop</a></li> <li class="alt"><a href="#" title="Our range of cordless phones">Telephones</a></li> <li><a href="#" title="Our networking range">Home and Office Networking</a></li> <li class="alt"><a href="#" title="Other services we offer">Services</a></li> </ul> </div> <div id="main">This is some sample stuff!</div> <div id="right"> <div class="gradient">Heading</div> <div class="box">Right Column text can go here! </div> </div> <div class="clear"></div> </div> <div id="footer">Copyright © 2007 Your Name</div> </div> </body>
Any and all help is much appreciated.
Edited by SniperFox, 23 January 2008 - 06:23 AM.
. I knew it was gonna be something simple.
