Grow your CSS skills. Land your dream job.

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

  • # August 9, 2009 at 5:22 pm

    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

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Any help, ideas, solutions gratefully accepted

    John C

    # August 10, 2009 at 2:14 am

    I have not studied or played with your code…..

    but have this in your css
    .clear { clear:both;}

    and the rule for the wrapper is:

    Code:
    # August 10, 2009 at 8:27 am

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

    # August 10, 2009 at 11:22 am
    "eip56" wrote:
    Do you have this somewhere we can physically look at it?

    yes: http://www.woskf.co.uk/

    also, just for you: http://www.honeycomb-web.co.uk/test.html

    # August 10, 2009 at 1:23 pm

    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..

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".