CODEWITHSUNDEEP
htmlcss
Jay Bienvenu
Jay Bienvenu

Reputation: 3298

<div> with width 100% style actually wider than page

I am developing some code that uses both divs and tables to render blocks of data. The table elements are rendering as expected, but the divs are exceeding the width of the page. The sample code below is a minimal selection of code from my project that produces the problem,. As you can see, both elements use the same class "contentblock" to specify 100% width. Chromium Version 25.0.1364.160 Ubuntu 12.04 (25.0.1364.160-0ubuntu0.12.04.1).

<html><body>
<style>
    .contentblock {
        width: 100%;
        border: 1px solid #000;
        padding: .5em;
    }
    p {
        margin-bottom: 1em;
    }
</style>

<div class="contentblock">
    <p><span class="label">LOREM IPSUM SIC DOLOR</span></p>

    <p>Praesent aliquam varius dolor. Vestibulum at sem sed augue interdum condimentum eget ornare urna. Nullam blandit auctor bibendum. Cras hendrerit iaculis venenatis. Curabitur interdum, lorem quis feugiat interdum, urna sapien ultricies nisl, in pretium diam arcu ac eros. Fusce elit tellus, euismod at aliquet non, pulvinar at sapien. Aliquam molestie ante in augue convallis a malesuada nulla posuere. Aliquam blandit massa a eros viverra semper. </p>
</div>
<table class="contentblock">
    <tr>
        <th class="label"><span class="label">Lorem</span></th>
        <th class="checkbox"><span class="label">Ipsum</span></th>
        <th class="checkbox"><span class="label">Dolor</span></th>
        <th class="checkbox"><span class="label">Aliquam</span></th>
        <th class="initialbox"><span class="label">Dictum</span></th>
    </tr>
</table>
</body></html>

Upvotes: 4

Views: 5573

Answers (4)

rileychuggins
rileychuggins

Reputation: 79

Here is a jsfiddle to help see what you can change: jsfiddle

First what I changed was adding a margin: 0; to your body:

body { margin:0; }

Then I added box-sizing to help with the width: 100% and padding:.5em issue

.contentblock {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

Upvotes: 0

keeg
keeg

Reputation: 3978

The border is causing your div to be wider, use box-model: http://css-tricks.com/the-css-box-model/

.contentblock {
      width: 100%;
      border: 1px solid #000;
      padding: .5em;
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
      box-sizing: border-box;
}

But really you should probably have some sort of CSS reset stylesheet such as normalize: http://necolas.github.io/normalize.css/

and/or apply a global box model:

*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

Upvotes: 9

Ennui
Ennui

Reputation: 10190

In the default CSS box model, which is box-sizing: content-box, the padding and border of an element are ADDED to the specified width, so your .contentblock div is actually 100% of the window plus 1em padding and 2px border (left and right) - so it's 1em+2px wider than the viewport.

You can fix this easily by switching to the border-box box model (add box-sizing: border-box CSS property to the elements). In the border-box model, padding and borders are SUBTRACTED from the explicit width rather than added to it.

If you want everything to use the subtractive border-box CSS box model rather than the additive content-box default, just add this to your CSS:

* { box-sizing: border-box }

It's honestly a much more intuitive layout method and can help avoid a lot of sizing and positioning headaches. I've used this on every site I've built for the past two or three years.

Paul Irish has a great blog post discussing this a bit more.

Upvotes: 0

tomsullivan1989
tomsullivan1989

Reputation: 2780

Firstly reset the margins of body and html to 0:

body, html {
    margin:0;
}

Then use box-sizing so that the borders you have don't increase the width of your elements:

.contentblock {
    width: 100%;
    border: 1px solid #000;
    padding: .5em;
    // Add the next 3 lines
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Upvotes: 0

Related Questions