How's to design the basics

I’ve been learning xhtml and CSS3 on my own for a year now… i’m in college. Look at this picture

I noticed something that looked exactly like that page while learning php. Because it’s very basic I recoded it own my own, show me how you would go about it. Would you use division blocks(div) or tables?
Here are options(colors,fonts,images)
-rgb(10,209,255) , light blue
-rgb(255,255,255) , white

hint* with tables i found i could make the page perfectly aligned. not just guess work


Nearly every website relies on a grid system. It looks like a centered fixed width layout with two columns.

This is easily achievable with CSS.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
html, body { margin: 0; padding: 0 }
body {
	background: #0AD0FD;
#wrapper {
	width: 800px;
	margin: 0 auto; /* center */
#aside {
	width: 190px;
	float: left;
#content {
	background: #fff;
	margin-left: 220px; /* gutter for sidebar */
	padding: 20px;
<div id="wrapper">
	<div id="aside">
		<img src="img/logo.png">
	<div id="content">
		<h1>Hello world</h1>

Hope it helps,

oh i did not thinking of adding a padding left. I will post a version of tables to show it can perfectly vertically align the white block, horizontally to the explore picture.

simple table, perfectly in the middle point between the height of the picture. can anyone show a way with CSS?

<!DOCTYPE html>
<html xmlns="" xml:lang="en-US" lang="en-US">


<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/pagecode.css">

<style type="text/css">
body, html {
	background : #0AD0FD;
	margin: 0;
	padding: 0;
table {
	width : 800px;
	padding-left: 230px;
	background : url(images/logo.gif) no-repeat left top;
	margin: 0 auto;
	height: 237px;

td {
	vertical-align: middle;

h1 {
	margin: 0;
	padding: 0;
	height : 100px;
	background: rgb(255,255,255);    /* would this be considered a hack ? */



<table cellpadding="0" cellspacing="0">
       <h1>Hello World</h1>



The VERTICAL align DOES NOT happen by default. There are many options, but they depend on what your content is.

One example, you could create a header area…
<div id=“header”>
<div id=“brand”><img src="yourimg.jpg><div><h1>hello world</h1>
#header {display:table;}
#brand, #header h1{display:table-cell; vertical-align:middle}
ad widths as needed. This method is not legacy IE friendly tho.

alternatively, you could use:
#header div, #header h1, #header div img {display: inline-block; vertical-align: middle; display:-moz-inline-box; }

which, I think, works back to FF2.0 and IE6 (or 7)

Here’s a couple of examples of the last method that Dresden mentioned.

example2 (width Firefox2 support)

thanks that seems to be a clean way to do it. The only thing i found was


seemed to mess with the height in only firefox. check it out!! if you picky you might noticed i changed the colors… ooops!

with -moz-inline-box

and without,

I’d need to see your full css and html as that doesn’t happen in my versions as you can see from the link above.

The -moz-inline-box is only need for ff2 and under support and as we are now on FF8 I don’t think three’s much need to support that far back now.

heres the code,

Download html

The -moz-inline-box rule (for Firefox 2 and below) must be before the inline-block rule otherwise it overwrites it in newer FF browsers.

e.g. It should be like this:

That of course excludes IE6 and 7 as already mentioned but you can see my examples which will also work in IE6 and 7 but require more code.