with width 100% style actually wider than page

Question

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>

keeg · Accepted Answer

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;
}

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

Tags:

html

css

Jay Bienvenu

1 Answers

keeg

Recent Activity

Donate For Us