PDA

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


dsnyder
04-17-2007, 03: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:
http://cellocelli.com/template.htm

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

<head>
<title>template</title>
<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" />
</head>

<body>
<div id="header">
<table class="header_nav">
<tr>
<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>
</tr>
</table>
</div>

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

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


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

<div id="leftcol">
<!-- insert flash movie (ds) -->
<p>
<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>
</object>
</p>
</div>

</div>
</body>
</html>
body {
margin: 0px;
padding: 20px;
background-color:#e7e4bb;
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;
text-align:left;
}

#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;
border-top:none;
margin: 0px 20px 0px 0px;
float:right;
width:auto;
}

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

table.header_nav tr{
background: #e7e4bb;
}

#banner {
height: 75px;
background-color:#758279;
background-image:url(../Images/BkGrd/CelloTop4.gif);
color:#FFFFFF;
}

#leftcol{
margin-left: 10px;
margin-top:20px;
margin-bottom:30px;
width: 170px;
float: left;
border-right: 1px solid #fff;
padding-right:10px;
background-color: #fff;
}

.leftimage {
padding-left: 15px;
margin-bottom: 0px;
float:left;
background-color:#fff;
}
Thanks for any brilliance!

dsnyder
04-17-2007, 03: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?

domedia
04-17-2007, 07: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>
<div class="clearer"></div>
</div>
</body>

.clearer {
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
display: block;
}

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

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

Mike...

dsnyder
04-18-2007, 03: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…
http://cellocelli.com/SHEET%20MUSIC/KatzMusic/bitterroot.htm

Is there a better way to organize or achieve this?

chriskq
04-19-2007, 07: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

dsnyder
04-19-2007, 01: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: