CSS Display Table Width Overflow

Question

I have two elements on my page placed together in columns like articles on a newspaper page. One element is an <aside> tag, with the main content inside of a <section> tag.

The container has a 15px margin to its left that causes it to spill over the right side of the viewport when its width is set to 100%. How can I prevent it from doing just that.

You can see the example from this fiddle: http://jsfiddle.net/spryno724/BHr5F/2/

Note: I know I can use the calc() function to accomplish this task, but given its current browser support, and my audience, I'm not ready to rely on this function.

@HashemQolami Take a look at the JSFiddle link and you can see in the result window that you have to scroll right to see all of the content. That is because of the `margin-left: 15px` and `width: 100%`. I'm trying to fit the content within the window. — Oliver Spryn, Aug 21 '13 at 21:16

score 0 · Answer 1 · answered Aug 21 '13 at 21:04

0

Easiest Solution is to use padding-left on the .row container instead of margin-left on the content as can be seen in my updated jsfiddle:

div.row {
    background-color: rgba(51, 51, 51, 0.9);
    display: table-row;
    padding-left: 15px;
}

http://jsfiddle.net/BHr5F/4/

answered Aug 21 '13 at 21:04

Dragony

1,712
11
20

I tried that. You can see the padding to the left of the sidebar is now gone. – Oliver Spryn Aug 21 '13 at 21:07

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

Here there are a lot of good answers. My favorite is:

.container {
    width:90%;
    margin: auto;
}

edited May 23 '17 at 10:31

Community

1
1

answered Aug 21 '13 at 21:05

Johann

298
2
11

Hashem Qolami · Answer 3 · 2013-08-21T21:35:55.397

Add padding-left: 15px to body element and remove the margin from section.container:

body {
    margin: 0;
    padding-left: 15px;
}

section.container {
    border: 1px solid black;
    display: table;
    max-width: 100%;
    overflow: hidden;
    table-layout: auto;
    width: 100%;
}

JSFiddle Demo #1

You can also use box-sizing: border-box; to calculate width properties include the padding and border. and remove the horizontal scrollbar:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JSFiddle Demo #2

CSS Display Table Width Overflow

3 Answers3