Fixed Width Layout (Jon Duckett Book)

Hi, I’m trying to figure out how this works:

In the book HTML and CSS : Design and Build Websites by Jon Duckett there’s a chapter FIXED WIDTH LAYOUT and like everyone knows there’s a code sample of this topic. It’s with this sample that I have a trouble to understand:

Code Sample link:
http://www.htmlandcssbook.com/code-samples/chapter-15/fixed-width-layout.html

This is the code:

<!DOCTYPE html>
<html>
	<head>
		<title>Fixed Width Layout</title>
		<style type="text/css">
			* {
				font-family: Arial, Verdana, sans-serif;
				color: #665544;
				text-align: center;}
			body {
				width: 960px;
				margin: 0 auto;}
			#content {
				overflow: auto;
				height: 100%;}
			#nav, #feature, #footer {
				background-color: #efefef;
				padding: 10px;
				margin: 10px;}
			.column1, .column2, .column3 {
				background-color: #efefef;
				width: 300px;
				float: left;
				margin: 10px;}
			li {
				display: inline;
				padding: 5px;}
		</style>
	</head>
	<body>
		<div id="header">
			<h1>Logo</h1>
			<div id="nav">
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">Products</a></li>
					<li><a href="">Services</a></li>
					<li><a href="">About</a></li>
					<li><a href="">Contact</a></li>
				</ul>
			</div>
		</div>
		<div id="content">
			<div id="feature">
				<p>Feature</p>
			</div>
			<div class="article column1">
				<p>Column One</p>
			</div>
			<div class="article column2">
				<p>Column Two</p>
			</div>
			<div class="article column3">
				<p>Column Three</p>
			</div>
		</div>
		<div id="footer">
			<p>&copy; Copyright 2011</p>
		</div>
	</body>
</html>

And this is how it looks like:

This element <div class="article column1>at this moment has background-color in all the element wich is 50px of height:

But if I remove float: left; from this div, there’s a change with the height of the background-color property, now there’s 18px of background-color:

Why is this happening? I mean, I don’t understand why removing this property of float affects directly the height to this element?

Thanks and I hope I have been clearly. :slight_smile:

Hey there joseulisesjuarezparr!

In <style> there’s this:

.column1, .column2, .column3 {
  background-color: #efefef;
  width: 300px;
  float: left;
  margin: 10px;
}

Which basically is telling the browser to render the elements column one, two and three with a width of 300px.

These elements do not have a height specified, so they’ll inherit the height of their parent.
These elements are also divs which come with a default display of block, which means that every sibling will exist to a new line. However this is not happening, why?

When float: left is applied to these elements what happens is that they are rendered on the same line, and each one can occupy the full height of their parent element, not just their content.

However when you remove float: left these elements will render as blocks in newlines and all together will have to fit inside the height of their parent, which doesn’t change.
The width is fixed, always at 300px.

Also if you notice, every row of this layout has the same height and margin except for the row containing column one, two and three, this is due to the fact that they have not been assigned a padding.

Hope this helps solve your doubts :slight_smile:

Hi, thanks for taking some of your time to write your answer :slight_smile:

I think now I’m understanding what’s happening, but you said this:

The parent of <div class="article column1"> it’s <div id="content">, but there’s no specified in css the height of 50px. How the browser knows that 50px it’s the correct height when ```float: left;" declaration is applied?

I’m trying to figure out where it’s specified the height of 50px? Thanks :slight_smile:

It’s hard for me to say, sorry