Why <body> has the certain width, if there is no width property in css?

I have a header with 100% width and grey line under it. The line should use 100% width of the browser window. But when I reduce the browser width the grey line doesn’t take the whole width of the webpage. Why? Strange, but a body tag takes certain width value although no width setted up for the body in css. Please, check the picture below and the code. Thanks a lot!

If you reduce browser width, there is a problem: no grey border on the right any more! https://drive.google.com/file/d/0B35EX-b9d628ZmxBWFJjOTF1eFU/view

Here is the code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Max's Icebrrrg</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header>
        <div class="headerInner">
            <div class="logo">
                <h1>Icebrrrg</h1>
            </div>
            <div class="mainNav">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Three Column</a></li>
                    <li><a href="">Sidebar Right</a></li>
                    <li><a href="">Sidebar Left</a></li>
                    <li><a href="">Full Width</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
        </div>
    </header>

    <div class="contentWrapper">

    </div>

    <footer>

    </footer>

</body>
</html>

CSS

* {
	box-sizing: border-box; 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
}

body {
	font: 14px/21px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #444;
}



/******************** HEADER ************************/

header {
	border-bottom: 1px solid #E3E3E8;
	margin-bottom: 30px;
}

.headerInner {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

.logo {
	width: 157px;
	height: 63px;
	background: url(../img/icebrrrg-logo.png) no-repeat;
	background-size: contain;
	margin: 22px 0;
	float: left;
	display: inline;
}

.logo h1 {
	text-indent: -99999px;
}

.mainNav {
	float: right;
	display: inline;
}

.mainNav ul {
	margin: 44px 0;
	padding: 0;
	list-style: none;
}

li {
	display: inline;
}

.mainNav a {
	text-decoration: none;
	color: #2C88C9;
	padding: 48px 10px 43px;
	font-size: 12px;
	border-bottom: 3px solid white;
}

.mainNav a:hover {
	font-weight: bold;
	border-bottom: 3px solid #2C88C9;
}

The code that you are showing does not allow me to replicate the issue. Do you have a link to the test site?

EDIT: never mind. I can replicate it now. I just needed to scroll to the right to the end of the menu.

Not sure what your design intent is, but so far, I’d suggest changing the innerHeader width:960px to max-width:960px so it will narrow as the window narrows.

You answered the question yourself :smile:

The line should use 100% width of the browser window

The line does take 100% of the viewport but that doesn’t include any content outside the viewport (e.g. the part you have to scroll to). The content outside the viewport (the bit you have to scroll to see) is greater than 100%.

Your inner element is 960px but when you close the screen smaller say to 800px then the 100% on the header equates to 800px so your line will be 800px wide although your inner element is 960px. Your inner element is now too big to fit inside 100% so a scrollbar appears to let you see content that is outside the viewport.

Just because the inner element is bigger than its parent doesn;t mean that the parent will stretch to fit. The way css works is that your inner element will overflow the parent but the parent wil not stretch to accommodate the larger inner element. Otherwise the whole system would break down.

The answer is simple though and if you have fixed width elements in your page you need to add a min-width to 100% wide (or auto width elements) where you don’t want them to get smaller than their children.

e.g.

header {
	min-width:960px;
}

However as Ron said above you really should be looking at fluid layouts these days and a max-width approach would avoid the issue and allow all the page to get smaller assuming you cater for elements correctly.

1 Like

Thanks a lot!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.