Web Design Forums

cathode · 01-09-2005, 21:00

Trying to get a layout that is all CSS, but I can't for some reason. I broke it down to the basic code, please tell me whet I'm doing wrong. I've tried this a few ways, going as far as having a bunch of hacks for different browsers, etc, but after beating my head against the wall for 4 hours, I've started over, so here's the layout in it's simplest form.

This is a fixed-width 2-column layout. I'm getting different results in firefox 1 and IE 6, both wrong.

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">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">	<!--
	body{
		background-color: #e0d7cc;
		font-family: Arial, Helvetica, sans-serif;
		margin:0;
		padding:0;
		min-width:780px;
	}
	#wrapper{
		width: 780px;
		position: absolute;
		left: 50%;
		margin-left: -390px;
	}
	#top{
		width: 780px;
		background-color: #FFDAB9;
	}
	#header {
		float: left;
		width: 592px;
		height: 175px;
		background-color: Olive;
	}
	#menu {
		float: left;
		width: 188px;
		height: 175px;
		background-color: #D2B48C;
	}
	#main {
		float: left;
		width: 592px;
		background-color: Silver;
	}
	#sidebar {
		float:left;
		width:188px;
		margin-left:592px;
		background-color: #f23456;
	}
	#footer{
		width: 780px;
		background-color: #AFEEEE;
		clear: both;
	}
	-->
</style>
  </head>
  
  <body>
    <div id="wrapper">
		<div id="top">top</div>
		<div id="header">header</div>
		<div id="menu"><p>menu</p></div>
		<div id="main"><p>main body<br /> main body <br /> main body</p></div>
		<div id="sidebar"><p>Sidebar</p></div>
		<div id="footer"><p>Footer</p></div>
    </div>
  </body>
</html>

finbarr · 02-09-2005, 03:45

any chnace you can provide a link to the page so we can view it online?

emil · 02-09-2005, 04:03

take out the margin left on the sidebar.
I also made a few modifications to your css (no need for an abs position on the wrapper)

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">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">	<!--
	body{
		background-color: #e0d7cc;
		font-family: Arial, Helvetica, sans-serif;
		margin:0px;
		padding:0px;
		text-align:center;
	}
	div {
		text-align:left;}
	#wrapper{
		width: 780px;
		margin:auto;
	}
	#top{
		width: 780px;
		background-color: #FFDAB9;
	}
	#header {
		float: left;
		width: 592px;
		height: 175px;
		background-color: Olive;
	}
	#menu {
		float: left;
		width: 188px;
		height: 175px;
		background-color: #D2B48C;
	}
	#main {
		float: left;
		width: 592px;
		background-color: Silver;
	}
	#sidebar {
		float:left;
		width:188px;
		background-color: #f23456;
	}
	#footer{
		width: 780px;
		background-color: #AFEEEE;
		clear: both;
	}
	-->
</style>
  </head>
  
  <body>
    <div id="wrapper">
		<div id="top">top</div>
		<div id="header">header</div>
		<div id="menu"><p>menu</p></div>
		<div id="main"><p>main body<br /> main body <br /> main body</p></div>
		<div id="sidebar"><p>Sidebar</p></div>
		<div id="footer"><p>Footer</p></div>
    </div>
  </body>
</html>

skyrocket · 02-09-2005, 09:20

Quote:

Originally Posted by finbarr

any chnace you can provide a link to the page so we can view it online?

Agreed - you need to post a link to get people to respond properly. I would need to see the page in action and tinker with the CSS in the web developer extension to find the source of your problems. I don't have the time to download your code to my machine. Just looking at it you have a lot of float:left going on but I'm just taking a guess. Hope emilpauns suggestion worked for you.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

02-09-2005, 03:45	#2 (permalink)
finbarr who the fuck am i? Join Date: Apr 2005 Location: london Posts: 2,508	any chnace you can provide a link to the page so we can view it online?

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)