View Full Version : wrapper div not behaving - what i missing??

04-17-2007, 02:10 PM
I’m trying to create a template to duplicate and add content to. I’m checking it as I go along and can’t seem to get my wrapper div to behave. Driving me crazy! What am I missing, I’m expecting to see a 470px wide white box with a border around my banner and leftcol. I'm getting this:

What am I doing wrong?? Is there some CSS inheritance that I’m missing? Here is the relevant code – I think…

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="CssFiles/ultimateDrop.css" rel="stylesheet" type="text/css" />
<link href="CssFiles/basiclayout.css" rel="stylesheet" type="text/css" />

<div id="header">
<table class="header_nav">
<td><a href="index.htm" title="Home"><img src="Images/Buttons/Home.gif" border="0"></a></td>
<td><form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart"><input type="hidden" name="business" value="dsnyder@phoenixensemble.com">
<input type="image" src="Images/Buttons/ViewCart.gif" border="0" name="submit" alt="View Cart">
<input type="hidden" name="display" value="1"></form></td>
<td><a href="mailto:dsnyder@cellocelli.com"><img src="Images/Buttons/Contact.gif" border="0"></a></td>

<div id="wrapper">
<div id="banner">

<!-- Begin menu (ds) -->

<!-- End menu (ds) -->

<div id="leftcol">
<!-- insert flash movie (ds) -->
<object classid="<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="139" height="125" class="leftimage">
<param name="movie" value="flash movies/Elegy.swf" />
<param name="quality" value="high" />
<embed src="flash movies/Elegy.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="139" height="125"></embed>

body {
margin: 0px;
padding: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 62.5%;
text-align: center;

#wrapper {
margin: 0px auto;
width: 740px;
border: 1px solid #758279;
background-color: #fff;

#header {
padding: 0px; margin: auto; width: 740px; height: 35px;

#header p{
text-align:right; margin:0;

/* style the table for header links (ds) */
table.header_nav {border-collapse:collapse;
margin: 0px 20px 0px 0px;

table.header_nav th, td{padding: 0px;

table.header_nav tr{
background: #e7e4bb;

#banner {
height: 75px;

margin-left: 10px;
width: 170px;
float: left;
border-right: 1px solid #fff;
background-color: #fff;

.leftimage {
padding-left: 15px;
margin-bottom: 0px;
Thanks for any brilliance!

04-17-2007, 02:27 PM
when I add a footer div it behaves as I expected. I clearly am not a learned master. I take it that without the footer, there was not enough material for the wrapper to wrap?

04-17-2007, 06:22 PM
You only have one div in the main content area, and you've set it to float... What is it floating next to?

Either remove the float part of #leftcol, or add something to 'clear' the float:

<div class="clearer"></div>

.clearer {
display: block;

Let me know if that works or not and we'll take it from there!

04-18-2007, 02:20 PM
Your wrapper div is supposed to come right after the body tag, not after the header tag.


04-18-2007, 02:43 PM
Thanks for the replies!
Dom, I only pasted in some of the code. I actually have a lot of other divs for it to float around but just didn’t want to take up too much space with my code in the message. I didn’t realize that the wrapper (and its bkgd) wouldn’t have the desired effect until after I added more div. I added my footer and then this looked more like expected.

Mike – I added the header before the wrapper because it wanted some top nav buttons above the wrapped area - ‘Home’ ‘View Cart’ etc…

Is there a better way to organize or achieve this?

04-19-2007, 06:11 AM
simple site structure can acheive this.
when u rush into a site without 'laying it out' before things can get messy.

its never too late too start again.
depends on how long ur intending to maintain this site i guess thou.

menu looks great btw - as does the little flash player u got going

04-19-2007, 12:19 PM
menu looks great btw - as does the little flash player u got going thanks.

Chris, I actually have put thought into site structure of course but this is my first real project so I’m kind of ‘hillbillying’ it. I was attempting to go back and create an organized template when this wrapper thing happened. It seems that I wasn’t/am not quite clear on how my wrapper would act. I gave it a width of 740px so I expected to see it’s bkgd around my floated leftcol.

Anyhow…as far as organizing, is it strange to put something ouside of the wrapper? My ‘header’ is really a ‘top nav’ area & I also put the copyright outside of the wrapper. I do want to get the site set up well cause it’s a personal business that I’ll be maintainer for a long time hopefully.

ps nice myspace :mrgreen: