Wrapper not wrapping

the_cobbinator · Jul 7, 2006

Hello, just doing a simple site for a friend and I'm trying my best to use semantic code for good practice. My only problem at this point is that the wrapper doesn't want to wrap around whatever's in it. Here's the file:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Testing CSS Positioning</title>
<style type="text/css">
body {
	font-family: Verdana, Tahoma, "Trebuchet MS";
	color: #000000;
}

h6 {
	font-size: 1em;
}

h5 {
	font-size: 1.1em;
}

h4 {
	font-size: 1.2em;
}

h3 {
	font-size: 1.3em;
}

h2 {
	font-size: 1.4em;
}

h1 {
	font-size: 1.5em;
}

#wrapper {
	width: 645px;
	margin: 0px 0px 0px 100px;
	border: 2px solid #C0C0C0;
}

#sidebar1 {
	width: 190px;
	min-height: 500px;
	border-right: 2px solid #C0C0C0;
	float: left;
}

#main {
	width: 450px;
	height: auto;
	float: left;
}

.content {
	width: 400px;
	height: auto;
	margin-left:25px;
}

#adspace_site {
	text-align: center;
}


#header {
	border-bottom: 2px solid #C0C0C0;
}
</style>
</head>

<body>
	<div id="wrapper">
		<div id="header">
			<h1>[--HEADER--]</h1>
		</div>
		
		<div id="sidebar1">
			<ul><li>link</li><li>link</li><li>link</li></ul>
		</div>
		
		<div id="main">
			<div id="adspace_site"><h3>Ads Go here</h3></div>
			<div class="content"><h1>Untitled</h1>
			<p><h6>Lorem ipsum dolor sit amet.</h6></p></div>
		</div>
	</div>
</body>
</html>

P.S. yeah, I know it's not XHTML compliant, but I'm going to go back through later and fix it. Here's a screenshot of what I'm seeing:

Also, any tips on organizing CSS and DIV tags in the future would also be apreciated.

Thanks!

donbenni · Jul 7, 2006

Don't know if it's going to help, but afaik you don't need "http://www.w3.org/TR/html4/loose.dtd" in the doctype tag.

I still design all my websites with tables, so can't really help, but the code looks ok. Is the problem that the wrapper class is being seemingly ignored by the code?

the_cobbinator · Jul 7, 2006

Not ignored, per se, but it seems that while I have all of my content inside the wrapper class in my HTML, the wrapper only contains the header on-screen. You'll see that the header's bottom border is twice the size of the others. This is because the wrapper is tucked right up against it.

Blake · Jul 9, 2006

The solution to your problem was floating the #wrapper.

I got rid of some minumum height stuff, changed it to valid XHTML, and changed the positioning of some things, but if you want to change any of that back, it shouldn’t be too hard.

HTML:

<!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" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Testing CSS Positioning</title>
    <style type="text/css">
body { font-family: Verdana, Tahoma, "Trebuchet MS"; color: #000000; }
h6 { font-size: 1em; }
h5 { font-size: 1.1em; }
h4 { font-size: 1.2em; }
h3 { font-size: 1.3em; }
h2 { font-size: 1.4em; }
h1 { font-size: 1.5em; }
#wrapper { width: 645px; margin-left: 100px; border: 2px solid #C0C0C0; float: left; }
#sidebar { width: 153px; float: left; }
#main { width: 450px; border-left: 2px solid #C0C0C0; float: left; }
.content { width: 400px; margin: 0 auto; }
#adspace { text-align: center; }
#header { border-bottom: 2px solid #C0C0C0; }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        <h1>[--HEADER--]</h1>
      </div>
      <div id="sidebar">
        <ul>
          <li>link</li>
          <li>link</li>
          <li>link</li>
        </ul>
      </div>
      <div id="main">
        <div id="adspace">
          <h3>Ads Go here</h3>
        </div>
        <div class="content">
          <h1>Untitled</h1>
          <h6>Lorem ipsum dolor sit amet.</h6>
        </div>
      </div>
    </div>
  </body>
</html>

the_cobbinator · Jul 10, 2006

Thanks, works like a champ

Wrapper not wrapping

the_cobbinator

donbenni

the_cobbinator

Blake

the_cobbinator

Similar threads

Latest Posts