Fluid Layout

Page layout on the web requires a very different mindset from applications such as Photoshop and Illustrator. Instead of pointing, clicking, and dragging on a digital canvas, you write code that tells the computer where to put things and what those things should look like. (Sort of like the difference between cooking a meal versus writing a recipe that tells someone how to cook a meal.)

The other big difference is that web layouts are fluid. When you design something in Photoshop or Illustrator, your canvas has a fixed size (a certain height and width that you are working within). But on the web, your page might be viewed on any sized screen -- from cinema displays to laptop monitors to tablets to phones to watches (and all points in between) -- so you must design with flexibility in mind.

If you can embrace this fundamental difference of the medium, you will have a much easier (and more enjoyable) time designing web pages!

Use the <div> tag... a lot!

The <div> tag is your friend! The div tag's sole purpose is for grouping other elements together so you can style them, which makes it perfect for page layout.

<div class="header">
	<h1>Page Title</h1>
	<p class="tagline">Witty tagline goes here.</p>
	<img src="logo.png" alt="company logo">
</div>

In the above code, a div tag was placed around the page title, tagline, and logo -- so those 3 elements are now grouped together for purposes of styling.

Important: page layout only works with block-level tags! (If you need to lay out inline-level tags, put a <div> around them first.)

Sizing (Width & Height)

By default, a block-level element will be as wide as its container (the block-level element it is nested within, or the browser window itself if it is not nested), and as tall as its content.

This text is inside a div. Because the div has not been given any layout styles yet, it is the width of its container (which happens to be the main content column on this page). If you resize your browser window to be narrower, you will see that this div's width shrinks to fit the available horizontal space, but its height grows to fit the content.

Note that if an element has no content, you might not see it on the page because it will not have any height!

Adjusting Width

To make a block-level element narrower than its container, set its width property in CSS.

.narrow {
	width: 25%;
	background-color: green;
}
.medium {
	width: 50%;
	background-color: red;
}
.wide {
	width: 80%;
	background-color: blue;
}
.full {
	background-color: black;
}
<div class="narrow">
<div class="medium">
<div class="wide">
<div class="full">

Most of the time it is best to use percentages for widths (as opposed to pixels, e.g. width: 400px;) because this is what allows layouts to be fluid and maintain their overall proportions on different screen widths.

Adjusting Height

Changing the height of a block-level element is trickier than changing its width. It is possible to set the height property in CSS to a number of pixels (e.g. height: 200px;), but in general you should not do this because it prevents the element from adjusting to the size of its content -- which could result in broken layouts on different screen sizes.

.short {
	height: 50px;
	background-color: lightgreen;
}
.tall {
	height: 300px;
	background-color: lightsalmon;
}
.fluid {
	background-color: lightblue;
}
<div class="short"> This div has a height of 50px, so it will always be exactly 50 pixels tall (regardless of how much content is inside). This means that on narrow screens, the content might overflow outside of its container! To prove this point, here is some dummy content that will surely be taller than 50px lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eveniet magnam dolores, quis veritatis consectetur libero architecto necessitatibus, rem corporis delectus. Impedit esse doloremque eos blanditiis quaerat porro possimus at.
<div class="tall"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae vel voluptatem commodi. Quam dolorum quibusdam, optio officiis sed praesentium commodi quisquam maxime laudantium incidunt, assumenda modi. Qui rerum blanditiis similique.
This div has a height of 300px, so it will always be exactly 300 pixels tall (regardless of how much or how little content is inside). This means that on wide screens, there might be empty space below the content.
<div class="fluid"> This div does not have a height, so it is always as tall as it needs to be in order to fit its content, even on narrow screens (which you can test by resizing your browser window).

Sometimes however, your layout does rely on certain elements being certain heights, and in this case a good compromise is the min-height property. Setting the min-height will ensure that an element is at least as tall as the given number of pixels, but the element can grow in height to accommodate its content when needed.

.at-least-something {
	min-height: 100px;
	background-color: orange;
}
<div class="at-least-something"> This div has a min-height of 100px, so it will always be at least 100 pixels tall (regardless of how much or how little content is inside) -- but it can also grow to accommodate its content if the screen is narrow. You can test this out by resizing your browser window.

Arranging (Vertically & Horizontally)

By default, block-level elements stack vertically -- one on top of the other.

.first-box {
	background-color: blue;
}
.second-box {
	background-color: red;
	width: 25%;
}
.third-box {
	background-color: green;
	width: 75%;
}
.fourth-box {
	background-color: black;
	width: 50%;
}

<div class="first-box">

<div class="second-box">

<div class="third-box">

<div class="fourth-box">


If you want to arrange elements horizontally, you can use the float and clear properties.

.first-box {
	background-color: blue;
}
.second-box {
	background-color: red;
	width: 25%;
	float: left;
}
.third-box {
	background-color: green;
	width: 75%;
	float: left;
}
.clearfix {
	clear: both;
}
.fourth-box {
	background-color: black;
	width: 50%;
}

First box

Second box

Third box

c
l
e
a
r
f
i
x

Fourth box

Think of horizontal arrangement as a "row" of items. Each item in the "row" is a <div> tag in the HTML that has the float: left; and width: __%; styles applied to it in CSS. The combined widths of all items in the "row" should total up to 100%. Then, at the "end of the row", put an empty div in your HTML (e.g. <div class="clearfix"></div>) and apply the clear: both; style to it in CSS.

Note that by default, any padding and borders on your elements will add to their overall width and mess up the "row" percentages for horizontal arrangement. But you can add the following code to the top of your CSS file to fix this annoying behavior:

* {
	box-sizing: border-box;
}