Unexpected positioning in Chrome

Question

I have such html code:

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="stylesheets.css" />
</head>        
<body>
        <div id="header"></div>
        <div id="left"></div>
        <div id="right"></div>
        <div id="footer"></div>   
</body>
</html>

and a css code:

body{
    padding:0px;
}

div {
    border-radius: 5px;
    border-collapse: collapse;
    margin:0px
}

#header {
    z-index: 1;
    position: fixed;
    width: 80%;
    height: 60px;
    background-color: #000028;
    margin: auto;
    left: 10%;
}

#left {
    width: 20%;
    height: 1500px;
    background-color: #B9D7D9;
    z-index: 2;
    position: relative;
    float: left;
    top: 60px;
    left: 10%;
}

#right {
    width: 60%;
    z-index: 0;
    height: 1500px;
    background-color: #4AB7FF;
    position: relative;
    float: right;
    right: 10%;
    top: 60px;
}

#footer {
    height: 50px;
    background-color: #668284;
    clear: both;
    width: 80%;
    z-index: 3;
    position: relative;
    left:10%;       
}

When I launch this in Chrome, there are three problems:

1)Total width of #left(20%) and #right(60%) divs is NOT equal to width of #header(80%) despite the percentage sum is equal. Where does it come from? How to make this sum match?

2) There are thin offsets between #header and top of the page and #footer and bottom of the page despite the padding and margins are set to 0px. Where do these offsets come from and how to remove them without using left and top?

3) The footer goes on top of left and right colons despite it is set to be under them (clear:both). How to make it appear below left and right divs?

One note, When using `0px;` on something, I've heard it's easier on the system to just write `0;`. Add `margin:0;` to your `body` and it will be fine — ntgCleaner, Jan 25 '14 at 17:32

NoobEditor · Accepted Answer · 2014-01-25T17:46:13.793

Total width of #left(20%) and #right(60%) divs is NOT equal to width of #header(80%) despite the percentage sum is equal. Where does it come from? How to make this sum match?

It looks same on my chromium as well as ff..!! :)

There are thin offsets between #header and top of the page and #footer and bottom of the page despite the padding and margins are set to 0px. Where do these offsets come from and how to remove them without using left and top?

that's because you have not removed the default margin from body and html.

html,body {
    padding:0px;
    margin:0;
}

In HTML, most of the tags ( not all of them but most ) have default padding and margin set by the browser.
For example, default padding/margin exists for body, <ul> etc...so you need to remove them either manually like above or use css reset tools before using any styling.

The footer goes on top of left and right colons despite it is set to be under them (clear:both). How to make it appear below left and right divs?

In HTML DOM,by default, everything is positioned relative, so you dont need to mention it explicitly....remove position:relative
Also, to clear:both, you have to mention this outside the div class or use pseudo like after / before....native css way, it has to be done as below :

    <div id="right"></div>
       <div style="clear:both"></div> <!-- clear float of #right -->
    <div id="footer"></div>

Also, a side note : a better practice is to wrap all you divs in a master container and apply styling to it to center the content and define generic css!!

fiddle to help u understand my point

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

There are predefined margin & padding for each element in browsers, that's why you are not getting 60+20 = 80 Resetting margin & padding to 0 will give you result as expected. But it's highly discouraged to use this.

   *{
        margin:0;
        padding:0;
    }

http://jsfiddle.net/Emme7/

Here is the old default style of a browser as suggested by W3C.
Browser default CSS

edited May 23 '17 at 12:03

Community

1
1

answered Jan 25 '14 at 17:25

VenomVendor

15,064
13
65
96

You can also just add `margin:0` to your body instead of making it part of the wild card. – ntgCleaner Jan 25 '14 at 17:29
1

what @ntgCleaner said: http://jsfiddle.net/Emme7/2/ -- there is no native margin or padding on DIV elements. – xec Jan 25 '14 at 17:30

vahanpwns · Answer 3 · 2014-01-25T17:48:37.217

0

Your prositioning is relative to the elements' original positions, but you want them to be relative to the page. use position: absolute instead of position: relative

#left, #right {
    position: absolute;
    float: none;
}

edit: If you don't mind changing the html, you could try this instead:

CSS:

#wrapper {
    width:80%;
    margin: auto;
}
#header {
    background-color: black;
    height: 60px;
}
#left {
    background-color: blue;
    width: 20%;
    float: left;
}
#right {
    background-color: green;
    width: 80%;
    float: right;
}
#left, #right {
    height: 600px;
}
#footer {
    background-color: red;
    height: 40px;
    clear: both;
}
#left, #right, #header, #footer {
    margin: 0;
    padding: 0;
}

HTML:

<div id="wrapper">
    <div id="header"> </div>
    <div id="right"> </div>
    <div id="left"> </div>
    <div id="footer"> </div>
</div>

http://jsfiddle.net/WGur4/

edited Jan 25 '14 at 17:48

answered Jan 25 '14 at 17:28

vahanpwns

939
5
12

I had noticed that it works ok with absolute positioning. But could you tell your opinion: why the relative positioning changes widths of elements? – Juggernaut Jan 25 '14 at 17:31
because the width of elements is set to a percentage of their container, and the container is a different size when you use absolute or relative because of padding and margins (absolute usually ignores them, thus the container is bigger). Honestly I would recommend adjusting your html, but your question was specifically for css – vahanpwns Jan 25 '14 at 17:34

Unexpected positioning in Chrome

3 Answers3