Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #25684
    jchap59
    Participant

    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




    2Quirky Home Page


    Any help, ideas, solutions gratefully accepted

    John C

    #61988
    eip56
    Member

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

    #62005
    jchap59
    Participant

    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 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.