2 Replies - 917 Views - Last Post: 17 July 2008 - 09:56 AM

#1 CarpeD1em500  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 12-July 08

Help with aligning CSS div's, etc...

Posted 17 July 2008 - 09:17 AM

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...):

<!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 :)

Is This A Good Question/Topic? 0
  • +

Replies To: Help with aligning CSS div's, etc...

#2 chili5  Icon User is offline

  • D.I.C Lover

Reputation: 19
  • View blog
  • Posts: 1,144
  • Joined: 28-December 07

Re: Help with aligning CSS div's, etc...

Posted 17 July 2008 - 09:40 AM

Can't you use absolute positioning to position the divs exactly where you want them?

Also you should use code tags with your code. :D Makes it easier to read and may get people to post a response. :D
Was This Post Helpful? 0
  • +
  • -

#3 P4L  Icon User is offline

  • Your worst nightmare
  • member icon

Reputation: 34
  • View blog
  • Posts: 2,788
  • Joined: 07-February 08

Re: Help with aligning CSS div's, etc...

Posted 17 July 2008 - 09:56 AM

Try using id's. Like this
<div id="content"> <!--html code here</div>
on the html page, the on your css page
#content {size: 1000;}
So forth, and so on. This will allow you to have multiple div's, and place them right where you want them, and still align the text to center. The other thing to "clean" up your code is to use a separate css page, and have it linked into your html page using something like this...
<link href="style.css" type="text/css" rel="stylesheet">
. This is how was able to code a page with multiple div's and line everything up as needed. There is one thing to this you might need to do as well... that is to test in multiple browsers, but you probably already know that. If you do, set the css to the main browser, and have separate ones for specific browser types.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1