Wrapper will not extend – floats, clears – my head hurts!

[jchap59]

Hi,

Now be gentle with me as I’m new to this.

Building a web site and cannot get the ‘wrapper’ element to extend to accomodate expansion of floated elements within it – hope that makes sense – have read it may be to do with inserting a ‘clear statement’ after the floated elements and before the wrapper closes but, can’t get it to work – hense the headache! CSS and HTLM below

Code:

CSS
/* CSS Document */
/* Myer reset v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* reset end

/* Headings & fonts */

h1 {
font-family: Verdana;
font-size: 16px;
color: #FFFFFF;
text-align: center;
font-weight: normal;
}

h2 {
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
text-align: justify;
font-weight: normal;
text-indent: 290px;
}

/* Main Body Charateristics */

#wrapper {
background-color: #000000;
width: 900px;
margin-right: auto;
margin-left: auto;
background-color: #000000;
margin-top: 100px;
margin-bottom: 10px;
height: 500px;
font-family: Verdana;
font-size: 9px;

}

#topleftbox {
height: 150px;
width: 200px;
background-color: #7E7E7E;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
border-left-width: 1.5px;
border-left-style: solid;
border-left-color: #000000;
background-image: url(images/2q.gif);
background-position: center;
}

#header {
height: 150px;
width: 700px;
background-color: #000000;
left: 200px;
top: -150px;
position: relative;
}

#leftsidebox {
height: 350px;
width: 200px;
position: relative;
top: -150px;
background-color: #333333;
float: left;
}

#content1 {
height: 350px;
width: 685px;
position: relative;
border: thin none #00FF00;
float: left;
background-color: #000000;
top: -150px;
}
#imagebox1 {
height: 250px;
width: 200px;
position: absolute;
background-image: url(images/jel2_web.jpg);
border: thick solid #000000;
float: left;
left: 260px;
}

#footer {
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
height: 15px;
width: 680px;
position: relative;
background-position: center;
float: right;
border: thin none #FF0000;
top: 335px;

}

/* Navigation section */

#left {
float:left;
width:201px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0;
}
#left ul { margin: 0; padding:0; }
#left ul li {
list-style:none;
margin:0;
padding:0;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
#left ul li a {
display:block;
width:152px;
margin:0;
padding:5px;
font-size:11px;
color: #FFFFFF;
font-family: Verdana;
}
#left ul li a:hover {
padding:5px 3px 5px 7px;
}
#left ul li ul { margin: 0; padding:0; }
#left ul li ul li { list-style:none; margin:0; padding:0; border-left:none; border-right:none; }
#left ul li.on {
padding:4px 0 4px 10px;
background-repeat: no-repeat;
background-position: 1px 1px;
}
#left ul li ul li a { padding:4px 5px; background:#EFEFEF; }
#left ul li ul li a:hover { padding:4px 0 4px 10px; }

/* Navigation section ends */

Code:

HTML

 

 

 

2 Q u i r k y

• what we do
• prices
• gallery
• guests
• video safe
• contact us

Copyright 2Quirky 2009

Any help, ideas, solutions gratefully accepted

John C

[eip56]

Do you have this somewhere we can physically look at it?

[jchap59]

All,

Thanks for all of the help / ideas – think I have solved it – more luck than anything else! – rebuilt the main section and included a footer and by using the ‘clear’ option under the ‘box entry – appears to force the ‘wrapper’ element to expand- hey-ho – off for a beer..

[Author]

Posts