Question

Trying to create a content box that has a background color of white. It is inbetween the header div and footer div which are both images. I can’t get it to align with the two divs AND have it without white space, only one or the other.

This is the CSS:

#content {
    background-color:#ffffff;
    width:1024px; 
    margin: 0 auto; 
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    padding: 0;
    display: inline-block;
}

How do I get the content box to align with the rest of the page and not have any whitespaces?

This is what it looks like at the moment, I want to get rid of the space between the HELLO box and the images above and below it.

Answer 1

It’s not a great solution, but with the given information it’s the only one i can come up with.

CSS

#content {
    background-color:#ffffff;
    width:1024px; 
    margin: 0 auto; 
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    padding: 0;
    display: inline-block;

    position:relative;
}

#topWhiteFix, #botWhiteFix {
    position:absolute;
    left:0px;
    height:12px;
    width:100%;
    background:#FFFFFF;
}

#topWhiteFix {
    top:-12px;
}

#botWhiteFix {
    bottom:-12px;
}

HTML

<div id="content">
     <div id="topWhiteFix"></div>
     <div id="botWhiteFix"></div>

     HELLO
</div>

(Untested)