CSS Layout Help

JamesU2005 · 3 Apr 2007 at 22:12

Dear all,

I'm having a problem with two divs. One on the left and one on the right.

The problem is when I add text to the left one it drops the right one down. However, if I don't have any text in the left and just the right it nearly works but is still not exactly level. I have included the CSS within the HTML.

Any ideas?

Cheers

P.S. I realise there are a few things I need to change in the CSS but I just want to get the foundations done before formatting correctly to standards.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Design</title>
<style type="text/css">

* {margin: 0; padding: 0;} 

body {
  font: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  color: white;
  background-color:#670001;
}

body {
  text-align: center; 
  }

#wrapper {
width: 980px;
margin: 5px auto 0 auto;
  text-align: left;
}

#mainContent { 
  height:873px; 
  background-image:url(border.gif);
  background-repeat: no-repeat;
} 

.menu {
height:646px;
width:100%; 
margin: 202px 0 0 7px;
padding: 5px 0 5px 5px;
background:url(menu.gif);
background-repeat: no-repeat;
float:left;
}

.rightbar {
height:646px; 
margin: 0 0 0 735px;
padding: 5px 0 5px 5px;
background:url(menu.gif);
background-repeat: no-repeat;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="mainContent">
<div class="menu">Hello
<div class="rightbar">Hello 
</div> 
</div> 
</div> 
</div>


</body>
</html>

RandomTom · 3 Apr 2007 at 22:59

That's really quite messy at the moment for what there is, so for the final layout you're looking for 3 columns, a left right and middle? at the moment your wrapper and maincontent seem to be doing the same sort of thing. And the closing for the divs seems a bit irrational at the moment.

I'll have a go when I understand what you want exactly.

lozza · 3 Apr 2007 at 23:06

From what i can see in your code the fact that your positioning your divs using margins is causing your problems.

RandomTom · 3 Apr 2007 at 23:09

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Design</title>
<style type="text/css">

* {margin: 0; padding: 0;} 

body {
	font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, sans-serif;
	color: #fff;
	background-color:#670001;
}

#wrapper {
	width: 980px;
	height: 700px;
	margin: 20px auto;
	text-align: left;
}

#mainContent {
	float: left;
	margin-left: 150px;
} 

.menu {
	float: left;
}

.rightbar {
	float: right;
}

</style>
</head>

<body>
<div id="wrapper">
		<div class="menu">Hello Left</div> 
		<div id="mainContent">Main Content area</div>
		<div class="rightbar">Hello Right </div> 
	</div> 
</body>
</html>

does that help??

JamesU2005 · 4 Apr 2007 at 08:42

Not really.

The reason I have margins on the left and right columns is because of this:

Image-Finished Design Should Look Like This

Image-Problem With My Code

I made one slight change to the code but still the same problem.

One this is sorted I should be able to do the rest.

Cheers for the help so far.

Any ideas?

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Design</title>
<style type="text/css">

* {margin: 0; padding: 0;} 

body {
  font: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  color: white;
  background-color:#670001;
}

#wrapper {
width: 980px;
margin: 5px auto 0 auto;
  text-align: left;
  background-image:url(border.gif);
  background-repeat: no-repeat;
    height:873px; }


.menu {
height:646px;
width:100%; 
margin: 202px 0 0 7px;
padding: 5px 0 5px 5px;
background:url(menu.gif);
background-repeat: no-repeat;
float:left;
}

.rightbar {
height:646px; 
margin: 0 0 0 735px;
padding: 5px 0 5px 5px;
background:url(menu.gif);
background-repeat: no-repeat;
}
</style>
</head>

<body>
<div id="wrapper">
<div class="menu">Hello
<div class="rightbar">Hello 
</div> 
</div> 
</div>


</body>

RandomTom · 4 Apr 2007 at 10:35

Are you aiming to acheive something like this?

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Design</title>
<style type="text/css">

* {margin: 0; padding: 0;} 

body {
	font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, sans-serif;
	color: #fff;
	background-color:#670001;
}

#wrapper {
	width: 980px;
	height: 570px;
	margin: 20px auto;
	background-color:#000
}

#banner {
	height: 150px;
	width: 980px;
}

#mainContent {
	float: left;
	margin: 0px 20px;
	background-color:#670001;
	border: 1px solid #fff;
	height: 200px;
	width: 500px;
} 

.menu {
	float: left;
	margin-left: 10px;
	background-color:#670001;
	border: 1px solid #fff;
	height: 400px;
	width: 200px;
}

.rightbar {
	float: right;
	margin-right: 10px;
	background-color:#670001;
	border: 1px solid #fff;
	height: 400px;
	width: 200px;
}

</style>
</head>
<body>
	<div id="wrapper">
		<div id="banner">Banner</div>
			<div class="menu">Hello Left</div> 
			<div id="mainContent">Main Content area</div>
			<div class="rightbar">Hello Right </div> 
	</div> 
</body>
</html>

I've only put heights and widths in as an example, but using float: left as well as float: right seems to work in this case, but if there's going to be a footer you'd need to remember to clear both of them. Je ne sais pas.

JamesU2005 · 4 Apr 2007 at 10:58

Pretty much exactly that, I can do the rest from here.

I can see my problem was the margins on the left and right columns. Rather now they are positioned by the height of the banner.

I always over complicate things!

Thanks a bunch though Tom, really appreciate it!