float boxes

B34ST · December 10, 2006

I have a new layout, the layout has 2 half box's at the top of the page and a full widht box underneath those. If I add a border to the box's they do not align any more. In firefox they simply do not align but in IE the container they are held in expands so making the rest of the page look funny. Here is an example

[url=http://www.exigence.dreamhosters.com/test/]http://www.exigence.dreamhosters.com/test/[/url]

and here is the code:

HTML[code]<!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>Exigence Runescape Clan</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="topmenu">
<ul class="fleft">
<li><a href="#">Left Link 1</a></li>
<li><a href="#">Left Link 2</a></li>
<li><a href="#">Left Link 3</a></li>
</ul>
<ul class="fright">
<li><a href="#">Right Link 1</a></li>
<li><a href="#">Right Link 2</a></li>
</ul>
</div>
<div id="leftcol">
<ul class="sidemenu">
<li><h4>Navigation</h4></li>
<li><a href="#">Side Link 1</a></li>
<li><a href="#">Side Link 2</a></li>
<li><a href="#">Side Link 3</a></li>
<li><a href="#">Side Link 4</a></li>
<li><a href="#">Side Link 5</a></li>
<li><a href="#">Side Link 6</a></li>
<li><a href="#">Side Link 7</a></li>
</ul>
</div>
<div id="contentcol">
<div id="content-box-left">
<h4>Left Box Title</h4>
Left Box<br />
Left Box<br />
Left Box<br />
</div>
<div id="content-box-right">
<h4>Right Box Title</h4>
Right Box<br />
Right Box<br />
Right Box<br />
</div>
<div id="content-box">
<h4>Main Box Title</h4>
Main Box<br />
Main Box<br />
Main Box<br />
</div>
<div id="content-box">
<h4>Main Box Title</h4>
Main Box<br />
Main Box<br />
Main Box<br />
</div>
<div id="content-box">
<h4>Main Box Title</h4>
Main Box<br />
Main Box<br />
Main Box<br />
</div>
<div id="content-box-left">
<h4>Left Box Title</h4>
Left Box<br />
Left Box<br />
Left Box<br />
</div>
<div id="content-box-right">
<h4>Right Box Title</h4>
Right Box<br />
Right Box<br />
Right Box<br />
</div>
<div id="content-box">
<h4>Main Box Title</h4>
Main Box<br />
Main Box<br />
Main Box<br />
</div>
<div id="content-box">
<h4>Main Box Title</h4>
Main Box<br />
Main Box<br />
Main Box<br />
</div>
<div id="content-box">
<h4>Main Box Title</h4>
Main Box<br />
Main Box<br />
Main Box<br />
</div>
</div>
<div class="cleaner"> </div>
</div>
<p align="center">Copyright &copy Notice here</p>
</body>
</html>[/code]

CSS[code]body {
margin:0; padding:0;
font-family: verdana, sans-serif;
font-size: 12px;
color: #000000;
background: url('images/bg.jpg') fixed repeat-x;
}

#container {
float:center;
margin:5px auto;
padding:0;
width:760px;
background: #848D9E;
border:1px solid #000000;
}

#header {
background: #295B8E;
height: 125px;
}

#topmenu {
background: url('images/topbg.jpg');
margin: 0;
padding: 0;
height: 32px;
}

#topmenu ul {
list-style: none;
margin: 0;
padding: 0;
height: 32px;
}
#topmenu li {
display: block;
float: left;
width: auto;
margin: 0;
padding: 0;
}

#topmenu a {
color: #fff;
display: block;
text-decoration: none;
margin: 0;
padding: 8px;
font-size: 12px;
line-height: 15px;
background: #8f8f8f url('images/top.jpg') no-repeat;
}

#topmenu a:hover,
#topmenu a:active,
#topmenu a:focus {
background: #5585c6 url('images/tophover.jpg') no-repeat;
}

#leftcol {
float:left;
width:140px;
margin:0px;
padding:5px 0px 0px 0px;
}

.sidemenu li {
list-style: none;
}
.sidemenu {
background-color: #666;
margin: 0;
padding: 0;
width: 150px;
list-style: none;
}
.sidemenu li a {
display: block;
font-size: 11px;
color: #fff;
background-color: #666;
border-top: 1px solid #999;
border-bottom: 1px solid #424242;
text-decoration: none;
/* padding and width set in IE 5 hack below */
}
.sidemenu li a:hover,
.sidemenu li a:focus {
background-color: #708eb8;
border-bottom: 1px solid #9dbbd4;
border-top: 1px solid #435887;
text-decoration: none;
}
/* IE 5 and 5.5 hack: */
.sidemenu li a {
/*This part for IE 5* */
width:134px;
padding: 3px 0px;
voice-family: "\"}\"";
voice-family:inherit;
/* this part accurate for normal browsers */
width:142px;
padding: 3px 3px 3px 5px;
}

#contentcol {
margin:0px 0px 0px 150px;
padding:5px;
}

.cleaner {
clear:both;
height:1px;
font-size:1px;
border:none;
margin:0;
padding:0;
background:transparent;
}

#content-box {
background:#A8B4C7;
float:left;
width:100%;
margin-bottom: 5px;
text-align:left;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
}

#content-box-left {
background:#A8B4C7;
float:left;
margin-bottom: 5px;
width:49%;
text-align:left;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
}

#content-box-right {
background:#A8B4C7;
float:right;
margin-bottom: 5px;
width:49%;
text-align:left;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
}

h1, h2, h3, h4 {
background: url('images/hbg.jpg');
height:15px;
margin:0px;
padding:1px;
font-size: 10.9px;
font-weight: bold;
color: #FFFFFF;
text-align:center;
}

.fleft { float:left; }

.fright { float:right; }[/code]

Can sombody please tell me how to fix this or point me in the right direction?

B34ST · December 11, 2006

After hours of scratching my head I found an easy soloution to my problem, I used % for the boxes but had a fixed width container therefore did not have a need for perentages in the floating divs. I simply made them a fixed width also. I have since learned that using percentages and borders like this is a bad idea i.e. 100% plus a 1px border is obviousy going to lead to more than 100%. Just thought I would post incase anybody else was encountering similar problems.

Sign In

float boxes

Recommended Posts

B34ST

Link to comment

Share on other sites

B34ST

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information