Previous Message
Next Message

Is it possible to create this type of a layout with CSS?

Sent by Melissa Brands on 13 September 2005 07:07


Rob,

Thank you so much for helping me! Your example has helped me
immensely! Your example works perfectly but, I've managed to break it
:)

I added: 	
     height: 200px; 
to the #header and I've tried positioning logo by adding:
     margin-left: 32px;
to the #logo to position it a bit to the right.

Page code is at the bottom of this message. Here is the result in all
browsers that I have access to:

http://img389.imageshack.us/my.php?image=errors2ti.png

As it can be seen, IE6 and IE5 (mac) don't display it as expected.

Any ideas (anyone) how to fix this?

Thank you so much!

Melissa

PS: IE is giving me a headache :(

PPS: Here is the 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">

<style type="text/css">
<!--

#container {
	width: 818px;
	\width: 838px;
	w\idth: 818px;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
}
#header {
	margin: 0px;
	padding: 0px;
	height: 200px;
	background-color: #AA44AA;
}
#logo {
	float: left;
	width: 112px;
	height: 126px;
   background-color: #0099FF; 
	margin: 0px; 
	margin-left: 32px;
	padding: 0px;
} 

#userprefs {
	float: right;
	width: 241px;
	height: 62px;
	background-color: #00FFCC;	
	margin: 0px;
	padding: 0px;
}

#navbar {
	clear: right;
	float: right;
	width: 241px;
	height: 15px;
	background-color: #99CC66;
	margin: 0px;
	margin-top:22px;
	padding: 0px;	
}



#search {
	clear: right;
	float: right;
	width: 140px;
	height: 35px;
	background-color: #99FF66;
	margin: 0px;
	margin-top: 6px;
	padding: 0px;
}

..clearing {
       clear: both;
}

-->
</style>
</head>

<body>
<div id="container">
<div id="header">
<div id="logo">Logo</div>
<div id="userprefs">User prefs</div>
<div id="navbar">Navbar</div>
<div id="search">Search</div>
<div class="clearing">&nbsp;</div>
</div> <!-- header -->
</div> <!-- container -->

</body>
</html>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: