CSS - Floating For Page Layout?

Hey all,

I'm looking to create a simple CSS layout design with a title bar running across the top, with the title picture/text in a middle column and then a middle column running down the centre of the page, something like this.

Can anyone tell me how I can do that, with the top bar/title and the central title/main column?

Thanks.

I have been tasked with creating a webpage, they have told me what they want and i have found the perfect template that fulfills there needs except for one thing.

this template ((oswd.org/design/preview/id/3428)) is what i will be using from oswd, its great but i would like to have it sit centered in the page with a margin on all sides not just the right and the left.

for example omniture.com has margins on all 4 sides, allowing the grey background to be viewable above the header and footer. how can i achieve this result with my template ive tried numerous things and nothing has worked for me so far. im not an expert web designer and dont have time to learn css inside and out, just need a little guidance or some code i can impliment.

Thanks in advance

I am having issues with my index page not showing correctly in IE. It works properly in all other browsers I have tested. Below the banner area the register, login, and members areas should go across the page but in IE they go down the page as if there is only one column. I need them to go across the page as they do in all other browsers. Any help would be greatly appreciated. Below is the CSS code and HTML code. The site this is for is www.mycookfamily.info.

CSS Code:
Code:

* { padding: 0; margin: 0; outline: 0; }

body { font-size: 12px; font-family: Arial, "Trebuchet MS", sans-serif; color:#565656; background:#212121; left bottom repeat-x; }

.index_box {
	margin:0 0 20px 0;
	background: #E1F7FA;
	padding:0 0 5px 0;
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px;
}

a { color: #565656; text-decoration: underline; }
a:hover { text-decoration:none ; }

.cl, .clear { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }

.shell { width:960px; margin:0 auto; position:relative; }

h2 { padding-bottom:4px; background:url(images/h2.gif) left bottom repeat-x; margin-bottom:9px; font-family: "Trebuchet MS", Arial, Sans-Serif; font-size:27px; color:#272728; }

h3 { color:#fff; font-size:20px; padding-bottom:10px; }

h5 { font-size:10px; color:#4062b7; font-weight:normal; padding-bottom:2px; }
h5 a { color:#4062b7; text-decoration:none; }
h5 a:hover { color:#4062b7; text-decoration:underline; }

.button { font-size:11px; color:#2a2b22; font-weight:bold; text-decoration:none; }
.button span { font-size:11px; color:#2a2b22; font-weight:bold; cursor:pointer; }

/*
	Header
*/

#header { background:url(images/header.jpg) left top repeat-x; height:75px; }

#logo { float:left; width:201px; height:75px; text-align:left; }
#logo a { float:left; width:201px; height:75px; font-size:0; line-height:0; text-indent:-4000px; background:url(images/logo.png); }

/* Navigation */
#navigation { float:right; padding-top:5px; background:url(images/navigation-separator.jpg) right 1px no-repeat; }
#navigation ul { list-style:none; padding-right:1px; }
#navigation ul li { float:left; padding-left:1px; background:url(images/navigation-separator.jpg) left 1px no-repeat; }
#navigation ul li a { float:left; padding:0 16px 0 15px; height:64px; line-height:64px; font-weight:bold; font-size:13px; color:#272727; text-decoration:none; }
/* #navigation ul li a:hover, */
#navigation ul li a.active { background:url(images/navigation-active.gif); color:#fff; }
#navigation ul li a span { float:left; }



/* 
	Intro
*/

#intro { background:url(images/intro.gif) left top repeat-x; height:418px; padding-top:22px; }

#intro .slider-holder { width:960px; height:353px; position:relative; overflow:hidden; }

#intro .slider-holder ul,
.jcarousel-clip { list-style:none; width:960px; height:353px; position:relative; overflow:hidden; }
#intro .slider-holder ul li { float:left; position:relative; width:960px; height:353px; list-style:none; }
#intro .slider-holder .offer-image { position:absolute; top:0; left:0; }
#intro .slider-holder .offer-image img { border:1px solid #a7a0a0; }
#intro .slider-holder .offer-data { position:absolute; top:1px; right:1px; height:317px; width:230px; background:url(images/semi-transparent.png); padding:34px 20px 0 25px; }
#intro .slider-holder .offer-data .entry { height:212px;}
#intro .slider-holder .offer-data p {
	color:#FFF;
	font-weight: bold;
	line-height:18px;
	padding-bottom:18px;
	text-align:justify;
}
#intro .slider-holder .offer-data p a {
	color:#C90;
	font-weight: bold;
}

#intro .slider-holder .offer-data .buttons { padding-right:4px; }

#intro .slider-holder .offer-data .buttons .button,
#intro .slider-holder .offer-data .buttons .button span { height:29px; line-height:29px; float:left; }
#intro .slider-holder .offer-data .buttons .button { float:right; background:url(images/intro-button.jpg) left top repeat-x; border:1px solid #434340; padding:0 8px; }
#intro .slider-holder .offer-data .buttons .button span { background:url(images/intro-button-span.jpg) left top no-repeat; padding-left:7px; }

#intro .slider-navigation { height:24px; background:url(images/intro-shadow.jpg) left top no-repeat; padding-top:36px; }
#intro .slider-navigation ul { list-style:none; margin-left:420px; }
#intro .slider-navigation ul li { float:left; }
#intro .slider-navigation ul li a { background:url(images/slider-navigation-normal.jpg); width:19px; height:20px; display:block; font-size:0; line-height:0; text-indent:-4000px; text-decoration:none; }
#intro .slider-navigation ul li a.active,
#intro .slider-navigation ul li a:hover { background:url(images/slider-navigation-active.jpg); }

/* 
	Main
*/

#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .shell { width: 900px; margin-left:auto; margin-right:auto; padding:25px 0; }

#main p { padding-bottom:10px; line-height:17px; }
.box-first { float:left; width:250px; padding:0 19px 0 0; }
.box-center { float:left; width:250px; padding:0 19px 0 0; }
.last-box { float:left; width:300px; padding:0 19px 0 0; }

.box .entry { height:217px; padding-left:2px; }

.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }

.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }

#main .news { }
#main .news ul { list-style:none; }
#main .news ul li { border-bottom:1px dotted #e8d0d2; padding-bottom:7px; margin-bottom:15px; }
#main .news ul li.last { border-bottom:0; padding-bottom:0; margin-bottom:0; }
#main .news ul li .post-image { float:left; width:76px; padding:3px 22px 0 0; }
#main .news ul li .post-image img { border:2px solid #fff; }
#main .news ul li .post-data { float:left; width:203px; }
#main .news ul li .post-data p { color:#413f3f; line-height:18px; padding-bottom:0; }
#main .news ul li .post-data a { color:#4062b7; }

.bullet-list ul { list-style:none; padding-top:1px; }
.bullet-list ul li { line-height:12px; background:url(images/ul-bullet.gif) left 5px no-repeat; padding:0 0 14px 10px; }
.bullet-list ul li a { color:#4062b7; }
/*
	Footer
*/

#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }

#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0;  }
#footer .footer-navigation ul li a { }

#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }

Index Page:
Code:

<?php
if (isloggedin()) forward('pg/dashboard/');
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Cook Family</title>
	<link rel="stylesheet" href="mod/xuum/css/style.css" type="text/css" media="all" />
	
	<script type="text/javascript" src="mod/xuum/js/jquery-1.4.2.min.js"></script>
	
	<script type="text/javascript" src="mod/xuum/js/jquery.jcarousel.js"></script>
	
	<!-- Cufon -->
	<script type="text/javascript" src="mod/xuum/js/cufon-yui.js"></script>
	
	<script type="text/javascript" src="mod/xuum/js/MyriadPro.font.js"></script>
	<script type="text/javascript" src="mod/xuum/js/ArialBold.font.js"></script>
	
	
	<script type="text/javascript" src="mod/xuum/js/jquery-func.js"></script>
	<link rel="shortcut icon" type="image/x-icon" href="mod/xuum/css/images/favicon.ico" />
<link href="css/style2.css" rel="stylesheet" type="text/css" />
</head>
<body>

	<style>
.messages {
	background:#ccffcc;
	color:#000000;
	padding:3px 10px 3px 10px;
	z-index: 8000;
	margin:0;
	position:fixed;
	top:30px;
	width:969px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border:4px solid #00CC00;
	cursor: pointer;
}
.messages_error {
	border:4px solid #D3322A;
	background:#F7DAD8;
	color:#000000;
	padding:3px 10px 3px 10px;
	z-index: 8000;
	margin:0;
	position:fixed;
	top:30px;
	width:969px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	cursor: pointer;
}
.closeMessages {
	float:right;
	margin-top:17px;
}
.closeMessages a {
	color:#666666;
	cursor: pointer;
	text-decoration: none;
	font-size: 80%;
}
.closeMessages a:hover {
	color:black;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
	$('.messages').animate({opacity: 1.0}, 1000);
	$('.messages').animate({opacity: 1.0}, 1000);
	$('.messages').fadeOut('slow');

	$('span.closeMessages a').click(function () {
		$(".messages").stop();
		$('.messages').fadeOut('slow');
	return false;
	});

	$('div.messages').click(function () {
		$(".messages").stop();
		$('.messages').fadeOut('slow');
	return false;
	});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
	$('.messages_error').animate({opacity: 1.0}, 1000);
	$('.messages_error').animate({opacity: 1.0}, 1000);
	$('.messages_error').fadeOut('slow');

	$('span.closeMessages a').click(function () {
		$(".messages_error").stop();
		$('.messages_error').fadeOut('slow');
	return false;
	});

	$('div.messages').click(function () {
		$(".messages").stop();
		$('.messages').fadeOut('slow');
	return false;
	});
});
</script>
	
	

<?php $messages = system_messages();	
	$message = $messages['messages'];
	
	if(count($message) > 0){ 
		echo '<div class="messages">';
		echo '<span class="closeMessages"><a href="#">click to dismiss</a></span>';
			foreach($message as $message1)
					{
					echo '<p>';
					echo $message1;
					echo '</p>';
					}
		echo '</div>';
	}

	$errors = register_error();
	$error = $errors['errors'];
	if(count($error) > 0){ 
		echo '<div class="messages_error">';
		echo '<span class="closeMessages"><a href="#">click to dismiss</a></span>';
			foreach($error as $error1)
					{
					echo '<p>';
					echo $error1;
					echo '</p>';
					}
		echo '</div>';
	}


////////////////////////////////////////////////////////////////////////////////////////////////
?>

<!-- Header -->
<div id="header">
	<div class="shell">
		<!-- Logo -->
		<h1 id="logo"><a href="">My Cook Family</a></h1>
		<!-- /Logo -->
		
		<!-- Navigation -->
		<div id="navigation">
			<ul>
				<li><a href="" class="active">HOME</a></li>
				
				<li><a href="pg/expages/read/Terms/">TERMS</a></li>
				<li><a href="pg/expages/read/Privacy/">PRIVACY</a></li>
				<li><a href="#">ABOUT</a></li>
			</ul>
		</div>
		<!-- /Navigation -->
	</div>
</div>
<!-- /Header -->

<!-- Intro -->
<div id="intro">
	<div class="shell">
		<!-- Slider Holder -->
		<div class="slider-holder">
			<ul>
				<!-- Offer -->
				<li>
					<div class="offer-image">
						<img src="mod/xuum/css/images/offer-image-1.jpg" alt="" />
					</div>
					<div class="offer-data">
						<h3>Wedding Reception</h3>
						
						<div class="entry">
							<p>Steffany & Rodney's Wedding Reception will be held Sunday, August 7th, 2011 at 1:00PM. We are asking that people do not bring gifts. If you would like to donate to our honeymoon fund, please <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5S9F6GTNXNL6J" target="_new">click here</a>.</p>
							<p><strong>If you are a member of the family, please take time to register on this site. We have created this site as a safe, secure, and private area for us to socialize.</strong></p>
						</div>
						
						
					</div>
				</li>
				<!-- /Offer -->
				
				<!-- Offer -->
				<li>
					<div class="offer-image">
						<img src="mod/xuum/css/images/offer-image-2.jpg" alt="" />
					</div>
					<div class="offer-data">
						<h3>Descendants of the Mayflower</h3>
						
						<div class="entry">
							<p> The Pilgrims were a group of English people who came to America seeking religious freedom during the reign of King James I.   They planned to make the crossing to America in two ships, the Speedwell and Mayflower. However, after many problems the Speedwell was forced to return to England where the group was reorganized. In their second attempt to cross the Atlantic, they boarded the Mayflower in September 1620 bound for the New World.						</p>
						</div>
						
						
					</div>
				</li>
				<!-- /Offer -->
				
				<!-- Offer -->
				<li>
					<div class="offer-image">
						<img src="mod/xuum/css/images/offer-image-3.jpg" alt="" />
					</div>
					<div class="offer-data">
						<h3>Purchase of Nantucket Island</h3>
						
						<div class="entry">
							<p> The history of Nantucket's settlement by the English did not begin in earnest until 1659, when Thomas Mayhew sold his interest to a group of investors, led by Tristram Coffin, "for the sum of thirty Pounds...and also two beaver hats". The "nine original purchasers" were Tristram Coffin, Peter Coffin, Thomas Macy, Christopher Hussey, Richard Swain, Thomas Barnard, Stephen Greenleafe, John Swain and William Pike. </p>
						</div>
						
						
					</div>
				</li>
				<!-- /Offer -->
				
				<!-- Offer -->
				<li>
					<div class="offer-image">
						<img src="mod/xuum/css/images/offer-image-4.jpg" alt="" />
					</div>
					<div class="offer-data">
						<h3>Whaling in New Bedford, MA</h3>
						
						<div class="entry">
							<p> American whaling's origins were in New England.   Whale oil was vital in illuminating homes and businesses throughout the world in the 19th century, and served as a dependable lubricant for the machines powering the Industrial Revolution.						  Whaling became important for a number of New England towns, particularly Nantucket and New Bedford, MASS. Vast fortunes were made, and culture of these communities was greatly affected.</p>
						</div>
						
						
					</div>
				</li>
				<!-- /Offer -->
				
				<!-- Offer -->
				<li>
					<div class="offer-image">
						<img src="mod/xuum/css/images/offer-image-5.jpg" alt="" />
					</div>
					<div class="offer-data">
						<h3>Family Tradition - Panning for Gold</h3>
						
						<div class="entry">
							<p>In memory of Grumpy (a.k.a. Nugget Bill); coined for  the tradition of gold panning becoming such a big part of the Cook Family. Panning is now enjoyed by all generations of the Cook Family, with Glenn keeping the hobby alive as a part of his normal routine...</p>
						</div>
						
						
					</div>
				</li>
				<!-- /Offer -->
			</ul>
		</div>
		<!-- /Slider Holder -->
		<!-- Slider Navigation -->
		<div class="slider-navigation">
			<ul>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
			</ul>
		</div>
		<!-- /Slider Navigation -->
	</div>
</div>
<!-- /Intro -->
<!-- Main -->
<div id="main">
	<div class="shell">
		<!-- Box -->
		<div class="box-first">
		<center>
        <h2>Login</h2>
			</center>

			<div class="buttons">
				<center>
<div id="welcome-box" class="buttons">
<div id="login-box" class="buttons">
<?php
									$form_body = 
									"
										<p>
										<label>"
										.elgg_echo('username')
										."<br />"
										.elgg_view
										(
											'input/text'
											,array
											(
												'internalname' => 'username'
												,'class' => 'login-textarea'
											)
										)
										."</label><br />
									";
									$form_body .=
										"<label>"
										.elgg_echo('password')
										."<br />" 
										.elgg_view
										(
											'input/password'
											,array
											(
												'internalname' => 'password'
												,'class' => 'login-textarea'
											)
										)
										."</label><br />
									";
									$form_body .=
										elgg_view
										(
											 'input/submit'
											,array
											(
												'value' => elgg_echo('login')
											)
										)
										."</p>
									";
									echo elgg_view
									(
										'input/form'
										,array
										(
											 'body' => $form_body
											,'action' => ""
											.$vars['url']
											."action/login"
										)
									);
									?>

</center>
			</div>
			
			
		</div>
		<!-- /Box -->
		<!-- Box -->
		<div class="box-center">
		<center>
        <h2>Newest Members</h2>
			</center>
			<div class="entry">
				<!-- News -->	
				<div class="news">
					<ul>
						<li>
							          <?php
$users_max = 25;
        $onlyWithAvatar = "no";
if(empty($onlyWithAvatar) || $onlyWithAvatar == "no")
  {$users = get_entities('user','',null,null,$users_max,0);} 
else 
  {$users = get_entities_from_metadata('icontime', '', 'user', '', 0, $users_max);}
           $wallIconSize = "small";
shuffle($users);
foreach($users as $user){

echo elgg_view("profile/icon",array('entity' => $user, 'size' => 'small', 'override' => 'true'));

} ?>

						</li>
					</ul>
				</div>
				<!-- /News -->
			</div>
			
			
		</div>
		<!-- /Box -->
		<!-- Box -->
		<div class="box last-box">
		<center>
        <h2>Sign Up</h2>
			</center>
			<center>
							
								<div id="register-box">
								<?php
								////////////////////////////////////////////////////////////////
								$form_body  = "<p><label>" . elgg_echo('name') . "<br />" . elgg_view('input/text' , array('internalname' => 'name', 'class' => "general-textarea", 'value' => $name)) . "</label><br />";
								$form_body .= "<label>" . elgg_echo('email') . "<br />" . elgg_view('input/text' , array('internalname' => 'email', 'class' => "general-textarea", 'value' => $email)) . "</label><br />";
								$form_body .= "<label>" . elgg_echo('username') . "<br />" . elgg_view('input/text' , array('internalname' => 'username', 'class' => "general-textarea", 'value' => $username)) . "</label><br />";
								$form_body .= "<label>" . elgg_echo('password') . "<br />" . elgg_view('input/password' , array('internalname' => 'password', 'class' => "general-textarea")) . "</label><br />";
								$form_body .= "<label>" . elgg_echo('passwordagain') . "<br />" . elgg_view('input/password' , array('internalname' => 'password2', 'class' => "general-textarea")) . "</label><br />";
								$form_body .= elgg_view('register/extend');
								$form_body .= elgg_view('input/captcha');
								if ($admin_option) {
									$form_body .= elgg_view('input/checkboxes', array('internalname' => "admin", 'options' => array(elgg_echo('admin_option'))));
								}
								$form_body .= elgg_view('input/hidden', array('internalname' => 'friend_guid', 'value' => $vars['friend_guid']));
								$form_body .= elgg_view('input/hidden', array('internalname' => 'invitecode', 'value' => $vars['invitecode']));
								$form_body .= elgg_view('input/hidden', array('internalname' => 'action', 'value' => 'register'));
								$form_body .= elgg_view('input/submit', array('internalname' => 'submit', 'value' => elgg_echo('register'))) . "</p>";
								?>
								<div id="register-box">
								<h2>
								<?php
								//echo elgg_echo('register');
								?>
								</h2>
								<?php
								////////////////////////////////////////////////////////////////
								echo elgg_view
								(
									'input/form'
									,array
									(
										'body' => $form_body
										,'action' => "{$vars['url']}action/register"
									)
								);
								?>
								
								
							</div><!-- div id="welcome-box" -->
							
							</center>
			
			
		</div>
		<!-- /Box -->
		<div class="cl">&nbsp;</div>
	</div>
</div>
<!-- /Main -->

<!-- Footer -->
<div id="footer">
	<div class="shell">
		<!-- Mini Nav --> 
		<div class="footer-navigation">
		  <ul>
			  <li><a href="<?php echo $vars['url']; ?>" class="active">HOME</a></li>
				
			  <li><a href="<?php echo $vars['url']; ?>pg/expages/read/Terms/">TERMS</a></li>
			  <li><a href="<?php echo $vars['url']; ?>pg/expages/read/Privacy/">PRIVACY</a></li>
			  <li><a href="#">ABOUT</a></li>
			</ul> 
    </div> 
		<!-- /Mini Nav --> 
		
		<!-- Copyrights --> 
		<p class="right"> 
			Copyright 2011 | MyCookFamily.info 
		</p> 
		<!-- /Copyrights --> 

		<div class="cl">&nbsp;</div> 
	</div>
</div>
										 
<!-- /Footer -->
</body>
</html>

I am trying to center the page layout horizontally.

I used margins: 0 auto; align: center; and it works properly in foxfire, but in IE it is aligned left. How can I make it center in IE too??

Thanks!

Need a bit of CSS guidance
I would like somefeed back on what is a good way to structure
a page template using CSS

I would like the page content to be displayed 780 px width, Centered
Header image at top 780 px wide
Horzontal Nav below 780 px wide also
2 columns of content below
footer at bottom

Im sure this is a common layout as I have seen it on many sites. Im just not sure what the optimal way to set it up using divs. SEO being my primary concern

Here is the layout:

Code:

<body>
<div id="main">
		<div id="header">
			headet stuff here
		</div>
		<div id="nav">
			the nav
		</div>
		<div class="content">
				<div id="left_content">
					left content
				</div>
				</cfif>
				
				<div id="right_content">
				right
				</div> 		
		</div>
		<div id="footer">
				footer
		</div>
</div>
</body>

STYLE SHEET:
Code:

#main{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 780px;
	}
#header {
position: relative;
	width: 780px;
	height: 100px;
	margin: 0;
	padding: 0;
	background-color:#8787d5;
}
#nav {
position: relative;
width: 780px;
margin: 0;
padding: 0;
border-top: 1px solid #ffffff;
background-color:#8787d5;
background-image:url(../images/nav_bg.png);
}
.content {
position: relative;
top: 0px;
left: 0px;		
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
margin: 0px 0px 0px 0px;
background-color:#e9e9f5;
}
#left_content {
position: relative;
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
margin: 0px 0px 0px 0px;
left: 5px;
top: 5px;
width: 325px;
padding: 0;

}
#right_content {
position: relative;
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
top: 5px;
left:335px;
width: 440px;
padding: 0;
}
#footer {
position: relative;
	padding: 20px 10px 10px 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	color: #993300;
	text-align: center;
}

THe problem I am having is when I use relative position for left-content and right_content the right content is positioned to right of but at the bottom of the left_contetn div.

I can get them to line up correctly using absolute positioning but then the content div that contains them and that also has the border and backgrond color does not expand vertically to to contain the left_content and right_content divs.
any help is greatly appreciated

thankya

Only to be associated with Firefox for now.....

As I come near the end of my page layout, there are just a few things that I need to fix.

First off, in my navigation menu, when you roll over a link, the entire menu expands. I have the border set before and after hover to be 1px, so I don't understand why this is occuring.

Also, there seems to be somewhat of a margin for my banner inside it's container...both the margin and padding of the container and banner are set to 0, so I don't know how this can be.

The web page can be found at the following address:

http://prosurfacing.com/beta/

Attached is the document source and the CSS for the page.
(index=page, site=CSS)

I am developing a prototype site and have hand coded it using HTML 4.x as a base and CSS for styling

However allthough the site runs fine on IE7, it does not load well on FF and Chrome. I know the browsers handle css differently but have no idea what code to change

http://rich-carey.com/aufdw/


Any Ideas or pointers?

Hi all...

I'm designing a website based on this structure by Paul O'Brien: http://www.pmob.co.uk/temp/fixedlayoutexample6.htm

It's working fine, except for one thing... the first time the page loads in IE6, the content div is offset about 5px to the left - see screenshot 1 (I've made it a nasty green, so it's obvious)

When you hit refresh, it corrects itself and displays perfectly. (screenshot 2)

Is this a known bug in IE? Or is it a problem in the design?

I am new to designing and just learning now. I want to know how to do menus when click on that menu, will link to the page in the main content area. I have a code, can someone please check and let me know how to link to the main content area?

Code:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>pool Inc</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}

#maincontent{
position: fixed;
top: 0; 
left: 200px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

</style>



</head>

<body>

<div id="framecontent">
<div class="innertube">

<h3>Home</h3>
<h3>About</h3>
<h3>Careers</h3>
</div>
</div>


<div id="maincontent">
<div class="innertube">

<h1>Welcome to pool Inc.</h1>
</div>
</div>


</body>
</html>

I am looking for some examples on making this layout:

----------HEADER----------
nav content
- -
- -
- -
-
-
-
-
-
-
----------FOOTER0---------

The page needs to be 100% the height of the browser window with header at top, footer at bottom and the content/nav being a minimum height of enough to fill the screen vertically and should be expandable. Anyone got any pointers?

Hey,
A while back i wanted to make a personal PHP based addressbook, just for my own use, very simple without much layout. But later i decided to expand the functionality and layout a bit. Now i ended up with a nice result (in my opinion) however only for Firefox in the resolution 1024x768.

Most of the problems have to do with the positioning of the div's of which my page consist.

The page is divided like this:

Without borders between the div's.

This is how it looks in Firefox which im ok with: http://img529.imageshack.us/img529/9766/ffkg1.jpg
And it looks like this in IE: http://img371.imageshack.us/img371/2332/iezn0.jpg

I used the following classes for the divs (i only post the relevant parts of the classes that has to do with the positioning):

-EDITED- deleted the css code in this post. The new updated code is in my new post.

I've spented alot of time to get the divs in the right position just for Firefox when i started this site. Can anybody help me with this? I want to specify everything in percentages to make it look right in all resolutions , however this doesnt seem to work yet but i first want to know how to make my pages look good in IE too.

thanks in advance.

Hi all,

I'm fairly new to CSS and this is one of my first attempts at a somewhat complicated layout. The page looks OK in FF, IE 7, Safari, and Opera, but if I zoom in or out while in FF or IE, it breaks the layout by increasing the width between some of the cube divs. Is there any way to fix this?

Link:
http://universalcorner.com/testsite/

Stylesheet:
Code:

body {
	font-family: Arial, "MS Trebuchet", sans-serif;
}

#maincontainer {
	width: 966px;
	height: 748px;
	border: 12px solid #000027;
	margin: 0 auto;
	padding: 0;
}

#header {
	border-bottom: 12px solid #000027;
	height: 140px;
	z-index: 100;
}

#logo {
	background: #fff;
	width: 480px;
	height: 100%;
	border-right: 12px solid #000027;
	display: inline;
	float: left;
	vertical-align: top;
}

#logo p { /* functions as image container */
	position: relative;
	top: 20px;
}

#slogan {
	position: relative;
	background: #78C0FF;
	width: 292px;
	height: 100%;
	border-right: 12px solid #000027;
	display: inline;
	float: left;
	vertical-align: top;
	padding: 0 10px 10px 10px;
	z-index: -100;
	zoom: 1;
}

#consultants {
	position: relative;
	background: red;
	left: 6px;
	width: 150px;
	/* width: 150px; */
	height: 100%;
	display: inline;
	float: left;
	text-align: center;
	margin: 0;
	padding: 0;
	z-index: -100;
}

ul.nav { /* navigation bar */ 
	position: relative;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1em;
	width: 126px;
	height: 586px;
	background: #4486C4;
	padding: 0 10px 10px 20px;
	margin: 0 0 10px 0;
	border: solid #000027;
	border-width: 0 12px 0 0;
	list-style: none;
}

ul.nav a {
	text-decoration:none;
	color:#000;
}

ul.nav a:hover {
	color:#fff;
}

ul.nav li { /* all list items */
	padding: 16px 0 0 0;
	list-style: none;
}

ul.squares {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.squares li {
	position: none;
	background: #000;
	width: 150px;
	height:140px;
	padding: 0;
	margin: 0;
	border: solid #000027;
	border-width: 0 12px 12px 0;
	display: inline;
	float: left;
}

ul.squares li.end {
	border-right-width: 0;
}

ul.squares li.bottom {
	border-bottom-width: 0;
}

#textbox {
	width: 636px;
	height: 292px;
	float: left;
	display: block;
	border: solid #000027;
	border-width: 0 12px 12px 0;
	background: #C1BDFF;
	margin: 0;
	padding: 0;
}

#textbox p {
	margin: 10px;
}

div.cube {
	width: 150px;
	height: 140px;
	border: solid #000027;
	margin: 0;
	padding: 0;
}

#consultation {
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	position: relative;
	display: inline;
	float: left;
	width: 302px;
	height: 130px;
	border: solid #000027;
	border-width: 0 12px 0 0;
	background: #001E8A;
	padding: 10px 0 0 10px;
	margin: 0;
}

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Company Name, Inc.</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="maincontainer">
	
<div id="header">
	<div id="logo">
		<p align="center"><img src="images/logo.gif" alt="Company Name, Inc."></p>
	</div>
	<div id="slogan">
		<p><span style="font-size:.85em">Company Name, Inc.<br>
		Anytown, US<br>
		<a href="mailto:info@companyname.com">info@companyname.com</a><br>
		555-555-5555</span><br>
		<span style="font-size: 1.1em; font-weight:bold">Tagline Goes Here</span></p>
	</div>
	<div class="cube" style="float: left; border-width: 0 0 0 0">
		<p align="center"><img src="images/image.gif" alt="Placeholder Image"></p>
	</div>
</div>

<ul class="nav">
	<li><a href="index.php">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Plans & Pricing</a></li>
	<li><a href="#">Our Clients</a></li>
	<li><a href="#">Press Room</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>

	<div style="background: #001E8A; display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div>
	<div style="display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div>
	<div style="background: #002455; display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div>
	<div style="display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div>
	<div style="background: #4486C4; display:inline; float: left; border-width: 0 0 12px 0" class="cube"></div>
	
	<div id="textbox">
		<div style="background: #002455; position: relative; float: right; top: 130px; border-width: 12px 0 0 12px; margin-top: 10px; margin-left: 10px" class="cube"></div>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p></div>
	
	<div style="background: #002455; position: relative; top: 0; left: 0; display: inline; float: right; border-width: 0 0 12px 0" class="cube"></div>
	<div style="position: relative; top: 0; left: 0; display: block; float: right; border-width: 0 0 12px 0" class="cube"></div>
		<div style="position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 12px 0 0" class="cube"></div>
		<div style="background: #002455; position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 12px 0 0" class="cube"></div>
		<div id="consultation">Click here to get your FREE ONSITE CONSULTATION from Company Name</div>
		<div style="background: #78C0FF; position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 0 0 0" class="cube"></div>

</div>

</body>
</html>

Any suggestions would be much appreciated.

Hey,
I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg

The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore.

Does anybody know how to fix this?

Thanks in advance.

Hi

I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac.

I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac.

This is a link to the page:

http://www.independentliving.co.uk/index1.shtml

And this is the relevant bit of the stylesheet:

div#header {
background-image: url("header.jpg");
background-repeat: no-repeat;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 0;
width:780px;
height: 200px;
margin-bottom: 10px;
font-size: 0.8em;

}

#header .welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

#header .slogan {
text-align: left;
width: 700px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.slogan {
text-align: left;
width: 700px
padding-left: 20px;
padding-right: 20px;
color: #003366;
}

If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working!

Thanks

Frances