Positioning the Headings - Exercise

Contact Us or call 1-877-932-8228
Positioning the Headings - Exercise

Positioning the Headings

Duration: 15 to 25 minutes.

In this exercise, you will position the heading elements within the columns, so the page looks like this: Heading Elements within Columns

  1. Open CssPageLayout/Exercises/fluid-three-column.html in your browser. It should look familiar.
  2. Open CssPageLayout/Exercises/fluid-three-column.css in your editor. Modify the code so that the page looks like the screenshot above.
  3. Although it's not required, you may find that it helps to modify the HTML file as well.
  4. Save your changes and test your solution in the browser.

Challenge

See if you can change the page so that the design is centered and takes up 85% of the width of the screen: Centered DesignYou'll only need to change the CSS.

Solution:

CssPageLayout/Solutions/fluid-three-column.html
---- C O D E   O M I T T E D ----
<div id="inner">
			<nav id="menu" class="column">
				<h2>Menu</h2>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
			</nav>
			<aside id="sidebar" class="column">
				<h2>Sidebar</h2>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
			</aside>
			<article id="content" class="column">
				<h2>Content</h2>
				<p>This column is fluid. This column is fluid. This column is fluid. This column is fluid. This column is fluid. This column is fluid. This column is fluid. This column is fluid. This column is fluid. This column is fluid. This column is fluid. This column is fluid. This column is fluid.</p>
			</article>
			<div class="clearer"></div>
		</div>
---- C O D E   O M I T T E D ----

Code Explanation

Solution:

CssPageLayout/Solutions/fluid-three-column.css
* {
	margin: 0;
	padding: 0;
	border: 0;
}
---- C O D E   O M I T T E D ----
.column h2 {
	position: relative;
	left: -10px;
	top: -10px;
	padding: 3px;
	line-height: 1em;
	border: 2px solid #ccc;
	font-variant: small-caps;
	font-size: 1em;
	letter-spacing: .5em;
}

#menu h2 {
	background-color: #fff;
	color: #1b1bdb;	
}

#sidebar h2 {
	background-color: #ded;
	color: #460d3b;	
}

#content h2 {
	background-color: #000;
	color: #fff;	
}
---- C O D E   O M I T T E D ----

Code Explanation

Challenge Solution:

CssPageLayout/Solutions/fluid-three-column-challenge.css
* {
	margin: 0;
	padding: 0;
	border: 0;
}
body {
	min-width: 600px;	
}
#wrapper {
	border: 1px solid #000;
	width: 85%;
	margin: auto;
}
---- C O D E   O M I T T E D ----

Code Explanation

When you set margin to auto it makes the left and right margins equal. You might have tried setting each margin to 7.5%. Theoretically, that should work, and it does in Firefox and Safari, but it can be buggy in some older browser versions. Use auto instead.

Another rule we've added to this solution is:

body {
	min-width: 600px;
}

This prevents the columns from wrapping when the browser window is made really small.

Next