Forum Moderators: not2easy
I'm having a problem lining up my topic boxes. I'ved added extra divs as I've tried to fix things which make it a bit ugly so I'd like to simplify as much as possible.
But anyway... The left side of the topic boxes don't line up in IE6 as well as the right sides of the team leaders and latest news box. Oh... it looks like the lastmatch box doesn't line up with the poll and schedule boxes.
In FF the right sides of the team leaders and latest news box seem to be the only issue.
Any help to get this working and to cut out any un-needed code to simplify this would be appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{text-align:center;background:#FFF}
div#container{text-align:left}
div#container{width:762px;margin:0 auto}
div#content{background: #000;margin:0;padding:2px;float:left;}
div.topic{background:#E4E4E4; border:1px solid #7c7c7c;font:8pt arial;color:#000;margin:2px;margin-bottom:5px;}
div.topic h1{background:#3e3e3e; margin:1px;padding:1px 7px;font:10pt arial;color:#FFF;font-weight:bold;}
div.topic p,div.topic img,div.topic td{padding:0 5px;margin:5px 0 7px 0;line-height:1.4;}
div.topic td{font:8pt arial;}
.topic img {vertical-align: middle;}
.topic ul {margin:0;padding:5px 0 0 20px;list-style-type:square;}
.topic ul li {margin: 0 0 5px 0;}
div#upper-half{float:left;width:100%;height:185px;margin-bottom:5px;}
</style>
</head><body>
<div id="container">
<!-- HEADER AND MENU GOES HERE -->
<div id="content"><!-- USED FOR A BACKGROUND IMAGE -->
<div id="main"><!-- main content goes in here -->
<div style="width:630px">
<div id="upper-half">
<div class="topic" style="width:208px;float:left;height:100%;">
<h1>Next Match</h1>
<p>next game info</p>
</div>
<div class="topic" style="width:408px;float:right;height:100%;">
<h1>Last Match</h1>
<p>Last game recap</p>
</div>
</div>
<!-- start lower half -->
<div style="width:404px;float:left;">
<div class="topic" style="width:402px;">
<h1>Latest News</h1>
<ul>
<li><a href="">news 1</a></li>
<li><a href="">news 2</a></li>
<li><a href="">news 3</a></li>
<li><a href="">news 4</a></li>
<li><a href="">news 5</a></li>
<li><a href="">news 6</a></li>
</ul>
</div>
<div class="topic" style="width:196px;float:left;">
<h1>League Standings</h1>
<TABLE width="194" cellPadding=0 cellSpacing=0>
<TR>
<TD width="6%" height="18" align="left"><strong>#</strong></TD>
<TD width="65%"><strong>TEAM</strong></TD>
<TD width="14%" align="center"><strong>GP</strong></TD>
<TD width="15%" align="center"><strong>PTS</strong></TD>
</TR>
<tr><td height='18'>1</td>
<td>team1</td>
<td class="center">-</td>
<td class="center">-</td>
</tr>
<tr ><td height='18'>2</td>
<td>team2</td>
<td class="center">-</td>
<td class="center">-</td>
</tr>
<tr>
<td height='18'>3</td>
<td>team3</td>
<td class="center">-</td>
<td class="center">-</td>
</tr>
<tr><td height='18'>4</td>
<td>team4</td>
<td class="center">-</td>
<td class="center">-</td>
</tr>
<tr><td height='18'>5</td>
<td>team5</td>
<td class="center">-</td>
<td class="center">-</td>
</tr></table>
</div>
<div class="topic" style="width:196px;float:right;margin-right:0;">
<h1>Team Leaders</h1>
<TABLE width="194" cellPadding=0 cellSpacing=0>
<TR>
<TD width="6%" height="18" align="left"><strong>#</strong></TD>
<TD width="65%"><strong>NAME</strong></TD>
<TD width="14%" align="center"><strong>GP</strong></TD>
<TD width="15%" align="center"><strong>G</strong></TD>
</TR>
<tr><td height='18'>1</td>
<td>player1</td>
<td class="center">-</td>
<td class="center">-</td>
</tr>
<tr ><td height='18'>2</td>
<td>player2</td>
<td class="center">-</td>
<td class="center">-</td>
</tr>
<tr>
<td height='18'>3</td>
<td>player3</td>
<td class="center">-</td>
<td class="center">-</td>
</tr>
<tr><td height='18'>4</td>
<td>player4</td>
<td class="center">-</td>
<td class="center">-</td>
</tr>
<tr><td height='18'>5</td>
<td>player5</td>
<td class="center">-</td>
<td class="center">-</td>
</tr></table>
</div>
</div><div style="width:214px;float:right;">
<div class="topic" style="width:212px;float:right;">
<h1>Practice Schedule</h1>
<ul>
<li>Scheduled time</li>
</ul>
</div>
<div class="topic" style="width:212px;float:right;">
<h1>Poll Box</h1>
<p>Poll goes here</p>
<p>option1</p>
<p>option2</p>
<p>option3</p>
<p>option4</p>
<p>VOTE!</p>
</div>
</div>
</div>
</div><!-- end main content -->
</div>
</div>
</body>
</html>
I think this is really too much code to t/shoot.. but don't worry about posting it all it helped to see the whole picture! - as a general answer you need to check the math for the boxes and (topics) and also be aware of the BOX Model.
Your topic boxes are wider than you think they are because of the borders, borders add to the width.
So if I just take the upper half (the easy bit;))
You want the two top divs to sit side by side and fill a width of 630px; but you want 2px space/margins on both sides of the boxes so 1st sum is
630px - 8px (2 divs x 4px margins) - 622px
2nd sum is 622px - left/right borders (for box model) which is 4px (2 divs x 2px borders)
= 618px
so 618px is the amount available for content width (this is what is different in box models it will be 622px for IE5.x and below)
Your two divs are given widths of 208 + 408 = 616px so you have a stray 2px. It not obvious in the code as you've posted it because you have floated the right div right, so the 2px are in the gap between the two divs.. however if you float it left you see the misalignment.
It's the same thing that's causing you problems in the lower half.. as far as I can see you should be able to float everything LEFT and this might help get the sums right.
You are also going to get problems caused by hasLayout using this method it's really too much to go into.. and double margin bug could well be triggered in IE6 and below as well as that you're going to need different widths for IE5.x and below.. there really is too much here and the clue is the amount of counting necessary, a rule of thumb I've found to be safest - is to make it so IE doesn't have to do too much (if any) counting - tell it exactly or make it easy for it to calculate!
I wonder if instead of trying to use the formatted .topic in both halves you should should use plain containers (no margin/borders) then add the decoration to divs inside them?
Suzy
[edited by: SuzyUK at 7:22 am (utc) on Mar. 26, 2007]
I'll look into your comments later tonight. Looks like my addition is what's causing the issue. And floating everything left is probably a better way to go.
Thanks.
