Hey guys, I'm trying to create a site that has the same lay out as ESPN (generally)...
I have a giant div container, which should hold all of the other divs in it (header, left column, right column, etc.).
I set this to be a width of 1000px. I want this div to be centered, and thus, everything within it, centered.
However, within this div, I need the left column to be aligned left, the right, right, etc. BUT they need to all be within the 1000px container. (please look at espn, that should give you an idea of what I mean).
However, when I try to do this, I have to use a <center> tag to center any divs that are on their own line, which is fine, but if you have multiple divs on one line (say, a right and left column), using <center> just stacks them. I tried using "float: left" and "float: right" on these, but then they stretch all the way to the edge of the browser (i.e. outside of the 1000px main container that I made to try and hold everything in place).
Any ideas?
Code is below (I have some google adsense stuff that positions correctly, but has some sensitive info in it, so i deleted it...):
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to Late Hitz Beta: Where Boredom Gets BLITZED</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
h2
{
color: #0033cc;
text-align: left;
font-size: 18pt;
font-weight: bold;
}
ul#twitter_update_list
{
color: #0033cc;
font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
padding-left:20px;
padding-right:5px;
margin-left:0px;
}
ul#twitter_update_list a {
line-height: 20px;}
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;
height: 25px;}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 5px 4px;
width: 83px;
background: #000000;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #000000;
color: #ffffff;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
#container{
width: 1000px;
margin: auto;
padding: 0;
}
#topad {
background: #000;
width: 1000px;
height: 100px;
}
#logonav {
background: #000;
width: 1000px;
height: 200px;
}
#googlesearch{
float: right;
}
#leftc {
background: #0f0;
width: 700px;
float: left;
}
#rightc {
background: #0e0;
width: 300px;
float: right;
}
-->
</style>
</head>
<body bgcolor="#efefef">
<div id="maincontainer"><center>
<div id="topad"><center>
IMAGINE AN AD HERE
</center>
</div>
<div id="logonav">
<img src="http://www.latehitz.com/templogoleft1.jpg" align="left">
There is a google search box here!
<br /><br><br><br>
<ul id="sddm">
<li><a href="http://sports.latehitz.com"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Sports</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="http://www.latehitz.com/sports/nba">NBA</a>
<a href="http://www.latehitz.com/sports/nfl">NFL</a>
<a href="http://www.latehitz.com/sports/mlb">MLB</a>
<a href="http://www.latehitz.com/sports/nhl">NHL</a>
<a href="http://www.latehitz.com/sports/boxmma">Boxing / MMA</a>
<a href="http://www.latehitz.com/sports/ncaab">NCAA Basketball</a>
<a href="http://www.latehitz.com/sports/ncaaf">NCAA Football</a>
<a href="http://www.latehitz.com/sports/other">Other Sports</a>
<a href="http://www.latehitz.com/sports/ncaaother">Other NCAA Sports</a>
</div>
</li>
<li><a href="http://gaming.latehitz.com">Gaming</a></li>
<li><a href="http://www.latehitz.com/Entertainment.html"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">Entertainment</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="http://music.latehitz.com">Music</a>
<a href="http://movies.latehitz.com">Movies</a>
<a href="http://tv.latehitz.com">Television</a>
</div>
</li>
<li><a href="http://collegelife.latehitz.com">College Life</a>
</li>
<li><a href="http://wwwlatehitz.com/hitzsquad.html">Hitz Squad</a></li>
<li><a href="http://www.latehitz.freeforums.org">Forums</a></li>
</ul>
<div style="clear:both"></div>
</div>
<div id="leftc">
Lots of div shit here. broken down. etc. etc. blah blah
</div>
<div id="rightc">
Podcast, etc.
</div>
</center>
</div>
</body
</html>
Ugh I hate this - I totally mistyped one of my div ids....sigh...alright well thanks for the help anyways, sorry, delete this please...
Mod edit: Please
[html
] post your HTML between these tags
[/html
]Thanks, gabehabe 
Makes it easier to read and may get people to post a response. 
| 