LIBRARY: Tutorials Reviews Interviews Editorials Features Business Authors RSS Feed

Simple CSS Centered Layout

Simple CSS Centered Layout
A Creative COW HTML Tutorial


Fernando Mol: Simple CSS Centered Layout
Fernando Mol
Fernando Mol
Monterrey, Mexico

©Copyright 2009 Fernando Mol and Creativecow.net. All Rights Reserved

Article Focus:
This tutorial from CreativeCOW leader, Fernando Mol explains the principles of how to create an horizontally centered layout using HTML and CSS.


Let's start with some basic HTML code. If you use Dreamweaver you can just create a new document and you'll get a blank page, but if you go to CODE VIEW you'll find your document already has some code. If you need more info on how to edit CSS in Dreamweaver you can read the "CSS in Adobe Dreamweaver" tutorial by Abraham Chaffin.

Here's how the starting HTML code should look. I already added it a TITLE.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS centered layout</title>
</head>

<body>
</body>

</html>

 

Now, let's add some plain text inside the <BODY> tag.

 

<body>
This is the main content in plain text
</body>

 

If you open the document in a browser, the text should show at the top left corner.



The first step to center the content will be to place it inside a container DIV. I'll assign an ID of "wrapper" to the DIV, so later I can add a specific CSS rule for it.

 

<body>
<div id="wrapper">This is the main content in plain text</div>
</body>

 

By now, the content looks the same if you preview it in a browser, but structurally it's very different. Let's see what can we do with a little CSS.

The CSS rule should be inserted inside the document HEADER. We'll add a rule for the "wrapper" DIV, giving it a color of #F00, so we can see what's happening.

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS centered layout</title>
<style type="text/css">
<!--
#wrapper {
background-color: #F00;
}
-->
</style>

</head>

 

We can preview the document now and see the red DIV from side to side of the browser window.


Now we can define a fixed width for the DIV. This is very important, otherwise the DIV will be always expanded to the width of the browser window and we'll never be able to see it centered. I'll give it 400px, kind of small for the real world, but good for the purpose of this tutorial.

 

#wrapper {
background-color: #F00;
width: 400px;
}

Finally, we add a left and right auto margins.

 

#wrapper {
background-color: #F00;
width: 400px;
margin-right: auto;
margin-left: auto;


}

That's it! You can place whatever content inside the "wrapper" DIV and it will be horizontally displayed at the center of your browser window.

###

Comments

thank you nice tut! i think
by Jay Niesler
thank you nice tut! i think i need to get into css. thats my problem i think -_-
it can be displayed
by Fernando Mol
it seems that the word "position" can't be displayed correctly.

Now I have a lot of comments on the tutorial (all by me)!

Anyway, if you give the CSS attribute of "position" with a value of "relative" to the centered div, all the inside absolutely positioned elements will be adjusted to the centered div.
again
by Fernando Mol
relative;

Fe de erratas
by Fernando Mol
To align an absolute positioned element inside a centered div you need to add to the centered div the relative; attribute.
Advanced centering?
by Fernando Mol
There's no way to center elements vertically only with CSS2 yet (we'll have to wait to the next generation of browsers).

You can, however, use a table, adding a vertical-align:middle for the table cell.

There are some complex methods on the web, not necessarily compatible with all browsers.

To align an absolute positioned element inside a centered div you need to add to the centered div the relative; attribute.
Vertically centered?
by Andre Taranto
How to make it vertically centered?
I tried:
margin-bottom: auto;
margin-top: auto;

But nothing happens...
Thanx


Related Articles / Tutorials:
Web Design
Full Page Overlay WindowFull Page Overlay Window

In this tutorial you will learn how to create a full page pop-up window that overlays an existing html page. This technique is used often for displaying a video, movie file, picture, or form when a user clicks on an element in a web page.

Tutorial
Abraham Chaffin
Web Design
Start Using MySQL with PHPStart Using MySQL with PHP

Learn about MySQL and how to implement its functionality into your web site allowing you to create dynamic content built from databases. In this tutorial you will learn some basics of using MySQL, PHPMyAdmin, Database Management Systems, and how to display MySQL content in a web page.

Tutorial
Abraham Chaffin
Web Design
Embedding Quicktime MoviesEmbedding Quicktime Movies

Learn the basics and advanced methods of embedding Quicktime Movies into your web site, blog or any html page. Find out what it takes to maintain cross platform compatibility when publishing all your Quicktime Videos. A more advanced technique of using Dreamweaver CS3 to embed your movie using ActiveX javascript embedding is also discussed.

Tutorial
Abraham Chaffin
Web Design
Reality ColdFusion MX: Flash MX Integration

Reality ColdFusion MX: Flash MX Integration

Author/Web developer Michael Hurwicz examines Reality ColdFusion MX: Flash MX Integration by Ben Forta, Randy Drisgill, Dennis Baldwin, Matt Tatam, and Derek Lu. This book is published by Macromedia press. The book discusses goals, logic and development process behind four projects, for which full source code is available on-line. A great way to get a jump start on ColdFusion/Flash integration. Recommended for intermediate Flash and ColdFusion users -- not for beginners.

Review
Michael Hurwicz
Web Design
Mike Gondek reviews Total Training's LiveMotion2

Mike Gondek reviews Total Training's LiveMotion2

CreativeCOW leader, Mike Gondek examines a 3 DVD training series called Live Motion 2.0 by Steve Holmes and published by Total Training.

Review
Mike Gondek
Web Design
Controling Adobe GoLive using Hot-Key settings

Controling Adobe GoLive using Hot-Key settings

In this article, Ron Lindeboom shows newer and other GoLive users how to make GoLive act the way you want it to. Have you ever wished you could set the hot-key short-cuts the way you wanted instead of the way that the Adobe engineers set them? Well you can do it and it's very easy to do. Here's how...

Tutorial
Ron Lindeboom
Recent Articles / Tutorials:
Art of the Edit
TV Workflow Supervisor Kylee Peña: The Benefits of Pressure

TV Workflow Supervisor Kylee Peña: The Benefits of Pressure

TV workflow supervisor Kylee Peña (Jane the Virgin, Colony) visits Adobe's "Make It" talk show to chat with host Jason Levine about the evolution of motion picture workflows, from the days of film and tape to our modern digital world of crazy-high shooting ratios and constantly evolving technology. She also expounds on the upside to creative constraints and tight deadlines. And don’t miss the lightning round!!!

Feature, People / Interview
Cow News
Color Grading
Grading The LEGO Batman Movie: Animal Logic and FilmLight

Grading The LEGO Batman Movie: Animal Logic and FilmLight

Following successful collaborations on The Matrix, Legends of the Guardians, and Happy Feet, Sydney's Animal Logic worked with Warner Bros on The LEGO Movie from pitch to proof of concept to post. Animal Logic has gone even further on the latest LEGO animated feature, The LEGO Batman Movie, where they were embedded with the production for over a year. The range of their work pushed every aspect of the Baselight system for editorial, VFX, and HDR not just for post, but for the entire production process.

Feature
COW News
An Editor's Epic Journey, by Katie Toomey

An Editor's Epic Journey, by Katie Toomey

What do you do when your company folds and there's no local work? Whatever you have to. For Katie Toomey, that meant emptying her savings and heading 2000 miles west to Los Angeles, with no job in hand. The only options were make it or break it. The journey itself was difficult, but the hardest part may have been the only thing that made it all possible: asking for help. This is a truly inspiring story with tons of real-world examples of how to accomplish what feels impossible at the time.


Katie Toomey
DaVinci Resolve
Fairlight + Resolve, Part 1: The DAWn of a Resolved Era

Fairlight + Resolve, Part 1: The DAWn of a Resolved Era

Marco Solorio of OneRiver Media gives an introductory overview to the rebirth of the Fairlight digital audio workstation (DAW) that is now part of Blackmagic Design’s powerful DaVinci Resolve post-production system. Is this finally the solution to break away from the Pro Tools stronghold?

Review, Editorial, Feature
Marco Solorio
MORE
© 2017 CreativeCOW.net All Rights Reserved
[TOP]