100% Width Divs Not Spanning Entire Width of the Browser in Webkit

fixed div not taking full width on one page only

The right arrow for your image slideshow is causing the position of your nav menu to be thrown out. The right arrow is currently coded to display at -5% on an iphone screen) and it is the css includes position:absolute. There is currently no media query to handle resize for devices under iPad size, so on mobile phones, the main div, containing the slideshow + arrows, is impacting the nav menu; this is causing the a negative 'shift'.

The issue could most likely be resolved by moving the div containing the arrows further down on mobile devices using media queries.

Hope this helps

How to make an element width: 100% minus padding?

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.

Width 100% is larger than the screen size

Add box-sizing: border-box; to #main-wrapper - that fixes it.

#main-wrapper has 100% width PLUS 15px padding, which is more than 100%. box-sizing: border-box; includes the padding in the width.

https://jsfiddle.net/tx9wLb40/

Why are the divs not expanding to the full width of the parent div

Somehow in Chrome the outer div is exactly one pixel wider than the contained divs.

You could however solve that by not using display: table; and display: table-cell; (if you only did that to make the vertical centering work) like so:

<div style="width: 100%; height: 65px; background: #00CC00;">  <div style="width: 60%; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center;">    <span style="font-size: 35px; line-height: 65px;">My Name</span>  </div>  <div style="width: 40%; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center;">    <span style="font-size: 20px; line-height: 65px;">My Job</span>  </div></div>

div with width 100% style actually wider than page

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

Making an unordered list span 100% the width of a div

I think you have three options:

Use JavaScript to calculate the sizes
Use a table, as discussed in this question (this is actually not a bad option — it’s pure HTML and CSS

If you’re only targeting new browsers, you can use the new flexible box component of CSS (shown here with a couple of vendor prefixes):

ul{
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
}
li{
    list-style: none;
    list-style:none;
    text-align: center;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}