CODEWITHSUNDEEP
htmlcssbackgroundbackground-color
SecretWalrus
SecretWalrus

Reputation: 99

Content area doesn't stretch over content boxes

Basically I have this code which has a content area and in that content area had two boxes floating away from each other. The content area has a background color of white which should cover the area of the other boxes as well, but for some reason doesn't. I have tried giving the boxes a background color of white, but the background doesn't show up. I have also tried changing up overflow properties of some of div statements, but that didn't help either. Any ideas?

JS Fiddle

HTML5

<div class="wrapper">
    <div id="content">
        <!-- #BeginEditable "content" -->
            <h1 class="center">Home</h1>

        <div id="content-box2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sodales justo at faucibus. Integer pharetra sagittis mauris, et sollicitudin arcu rhoncus ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur adipiscing scelerisque mauris, id adipiscing nulla placerat non.</p>
        </div>
        <div id="content-box3">
            <p class="align-right">Neque porro quisquam est qui
                <br>Neque porro quisquam est qui
                <br>Neque porro quisquam est qui
                <br>Neque porro quisquam est qui
                <br>Neque porro quisquam est qui
                <br>Neque porro quisquam est qui
                <br>Neque porro quisquam est qui</p>
        </div>
        <!-- #EndEditable -->
    </div>
</div>

CSS3 

body    {
    background-color: gray;
    color: #202020;
    font: normal .90em"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    margin: 0;
    text-align: left;
}

.wrapper {
    margin: 0 auto;
    width: 980px;
}

#content {
    background-color: #FFFAF0;
    margin: 2% auto;
    padding: 10px 25px;
    width: 88%;
}

#content-box2 {
    float: left;
    padding-left: 80px;
    width: 40%;
}

#content-box3 {
    float: left;
    padding-right: 80px;
    width: 40%;
}

.align-right {
    text-align: right;
}

Upvotes: 0

Views: 37

Answers (1)

Para&#237;so
Para&#237;so

Reputation: 384

You are using float: left; this wont make the div expand, try using display: inline-table;

JS Fiddle

Upvotes: 1

Related Questions