3 replies [Last post]
eddjc
eddjc's picture
Offline
Regular
Last seen: 8 years 14 weeks ago
Timezone: GMT+1
Joined: 2007-07-28
Posts: 33
Points: 16

Hi There,

I'm having a problem with this layout - I've encased the whole thing in one divider with a grey boarder, then further divided it into content sections, starting with a title, then a navlist, then a some flash, then two columns. But for some reason when it gets to the columns the wrapper doesn't continue, but stops underneath the flash content - Here's the code:

HTML:

Rolling Snowballs


logo
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','150','title','browser','src','images/browser','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/browser' ); //end AC code










Recent News




19th June - Squelch

I slipped on a frog



18th June

I espied a frog looking evily at me




17th June - mmmm!

I had female frogs legs for dinner



16th June

16th June

Went to Chris's






AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','337','height','252','src','images/deathvdeath','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/deathvdeath' ); //end AC code



CSS:
@charset "UTF-8";
.body {
font-family: Helvetica, Geneva;
font-size: 10px;
background-color:#000000;
margin:0px;
text-align: center;
}
.wrapper{
width:800px;
margin:0 auto;
background:#fff;
border-right:3px solid #ededed;
border-left:3px solid #ededed;
border-top:3px solid #ededed;
border-bottom:3px solid #ededed;

}
.bannertop{

background-image:url(images/main.jpg);
text-align:left;
background-position: center;
background-repeat: no-repeat;
padding-top:50px;
padding-bottom:5px;
padding-left:20px;

}
.navbg{

height:23px;
border-bottom:thin #333 solid;
padding-left:0px;
padding-right:76px;
}
#navcontainer ul
{
margin:0px;
padding-top: 0px;
list-style-type: none;
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
padding-top:4px;
padding-bottom:4px;
display:block;
width:100%;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
font-size: 12px;
font-weight:bold;
padding-right: 30px;
padding-top:4px;
padding-bottom:4px;
padding-left: 30px;
color:#000000;
width:50px;

}

#navcontainer ul li a:hover
{
color:#EDEDED;
background:#3399FF;
font-size: 12px;
font-weight:bold;
text-decoration:none;

}

.flashcontent{
height:150px;
padding-top:2px;
}
.content
{
background:#FFFFFF;
}
.leftcolumn
{
float:left;
width:200px;
height:800px;
padding-top:10px;

}
.leftcolumnheader
{
height:20px;
border-top:thin solid #000000;
border-bottom:thin solid #000000;
text-align:center;
color:#FFFFFF;
font-family:Helvetica, Arial, Geneva;
font-weight:bold;
padding-top:5px;
font-size:12px;
background-image:url(images/main.jpg);
}
.rightcolumn {

float:right;
width:600px;
height:800px;
padding-top:10px;

}
.videobox {
height:252px;
width:337px;
float:right;

padding-top:3px;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
text-align:center;
border:thin solid #3366FF;

}

Anybody know how to get the wrapper to continue round the whole layout?

Thanks

Edd

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

learn how to contain your

learn how to contain your floats.
add overflow: hidden; to #wrapper

eddjc
eddjc's picture
Offline
Regular
Last seen: 8 years 14 weeks ago
Timezone: GMT+1
Joined: 2007-07-28
Posts: 33
Points: 16

aha! Thanks! How come they

aha! Thanks! How come they were overflowing? They seem to make up the full 800px and no more...

Thanks again,

Edd:-)

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 6 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

eddjc wrote:aha! Thanks! How

eddjc wrote:
aha! Thanks! How come they were overflowing? They seem to make up the full 800px and no more...

Because they are supposed to overflow. That's what the CSS standard calls for them to do. IE6 mucks this up of course.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.