Forums

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

Home Forums CSS my “wrap-all” div doesn’t wrap all

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #28363
    snillor
    Member

    Not sure what’s going on. For a client redesign, my wrapper divs seem to NOT encompass the divs & other stuff inside. I want to apply a background color to these wrapper divs, but so far I’m stymied.

    Markup and CSS both validated at W3C.

    My outermost div (#wrap-all) and an inner div (#content-wrap) both seem to occupy only the small area of my heading, instead of expanding to surround their contents. ( I use bright background colors and borders to help me see where things are in the layout.)

    I must be missing something very basic, and I suspect I’ll feel real stupid when I learn what it is. Also, I apologize for the length of the markup and CSS – most of it doesn’t apply to the problem but I figured I’d better show everything than guess what’s necessary.

    Here’s the markup:





    Carol Taylor Watercolors




    Carol Taylor Watercolors










    Peppers & bottles

    Peppers & Bottles

    34 x 30 matted

    watercolor

    SOLD



    Journey to the Top

    Journey to the Top

    34 x 30 matted

    watercolor

    SOLD



    Cactus Bouquet

    Cactus Bouquet

    34 x 30 matted

    watercolor

    SOLD





    Tropical Bouquet

    Tropical Bouquet

    36 x 28 matted

    watercolor

    SOLD



    Sunflower Medlee

    Sunflower Medlee

    36 x 28 matted

    watercolor

    SOLD



    Sunflowers Out the Window

    Sunflowers Out the Window

    36 x 28 matted

    watercolor

    SOLD










    Here’s the CSS (omitting initial comments and my reset);

    /* =layout */

    body {
    text-align: center;
    background: #435cc9 url("../images-pres/body-BG.png") repeat-x;
    }
    #wrap-all {
    min-width: 780px;
    max-width: 1100px;
    background: #fc0;
    text-align: left;
    margin: 0 auto;
    border: 2px solid #f00;
    }
    #heading {
    /* background-color: #0f0; */
    }
    #content-wrap {
    background-color: #333 !important; /* this isn't showing ! */
    border: 3px solid #0c3;
    }
    #content {
    background-color: #f00; /** bright red - NOT SHOWING **/
    /* margin: 20px auto; */
    border: 2px solid #fff;
    background-color: #333 !important;
    }
    #content h1 {
    text-align: left;
    }
    ul.nav {
    float: right;
    background: #333;
    }
    ul.nav li {
    padding: 1em;
    font-size: 2em;
    }
    .row-1 dl, .row-2 dl {
    display: inline;
    width: 350px;
    text-align: center;
    float: left;
    /* padding: 10px 15px; */
    margin-bottom: 20px;
    }
    div.row-1, div.row-2 {
    display: inline;
    clear: both;
    float: left;
    padding: 10px 15px;
    margin-bottom: 0px;
    }
    div.row-1 {
    margin-top: 30px;
    }
    dd {
    text-align: center;
    }
    dd.first {
    margin-top: 10px;
    }
    dd.status {
    padding-top: .9em;
    }
    #footer {
    clear: both;
    background-color: #000 !important;
    padding: 20px 0;
    }
    /* =typography */
    body {
    font-size: 62.5%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #fff;
    }
    p {
    }
    h1 {
    font-size: 3em;
    color: #fff;
    }
    h1 span {
    font-family: "comic Sans MS";
    font-size: 2em;
    padding-top: 1em;
    }
    h2 {
    font-size: 2.5em;
    }
    h3 {
    font-size: 2.0em;
    }
    h4 {
    font-size: 1.5em;
    }
    dd {
    font-size: 1.5em;
    line-height: 1.3em;
    }
    dd.status {
    color: #CCFFCC;
    font-weight: bold;
    font-style: italic;
    }
    #footer {
    color: #f00;
    background-color: #ccc;
    }
    /* =nav styling */
    ul.nav li {
    display: inline; /* fixes IE/Win double-margin bug */
    }
    ul.nav li.not-link {
    color: #f00;
    }
    ul.nav li a:link {
    color: #fff;
    }

    Thanks…

    #61680
    TheDoc
    Member

    Looks like it’s because you haven’t cleared any of the floats. You’ll need to clear the divs before the wrapper closes.

    https://css-tricks.com/all-about-floats/

    #61649
    snillor
    Member

    Thanks for the quick reply, TheDoc.

    I couldn’t get anything accomplished with clear.

    But I did notice that if I add this:

    padding-bottom: 100%;

    to my

    #content-wrap

    it looks like it displays things the way I want.

    #61650
    TheDoc
    Member

    Negatory! That will cause you some problems.

    Do you have a link to the site?

    #61652
    snillor
    Member

    No link at the moment – working locally.

    #61579
    snillor
    Member

    OK, I’ve uploaded the rough site to:

    very rough draft page

    The garish colors are just to help me see the layout during development; hopefully the color palette I select for the real thing will be better.

    #61564
    snillor
    Member

    I’ve retained the

    padding: 100%;

    on the

    #content_wrap

    Haven’t seen any ill effects of it so far in my testing, but if this is a bad idea, I’ll remove it once I have a better solution.

    #61565
    TheDoc
    Member

    I have a feeling that it should cause ill effects, but I can’t quite give you a specific scenario right now of that happening.

    The ‘classic’ solution to solve the clearing of the floats would be to add this right before you close #content_wrap:


    Then in your CSS file add:
    .clear { clear: both; }

    #61546
    noahgelman
    Participant

    remove padding:100% and add overflow:hidden to #content

    #61543
    TheDoc
    Member

    Or do as noahgelman says! I’m still stuck in my clearing div ways!

    #61525
    snillor
    Member

    TheDoc,

    Thanks, your explanation of how/where to use clear did the job.

    I’ve removed my odd padding entry. I trust your instincts on that: even though it seemed to work with no ills effects, it sure had the look and feel of an ill-advised hack.

    #61509
    snillor
    Member

    Thanks noahgelman. Interesting how often there are multiple solutions to a problem.

    #107239
    NaomiPierce
    Member

    Many thanks for this. You solved my dilemma too!

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.