How to align elements properly using CSS

Question

My site layout is very simple. I want it to look something like this:

• One row of text that spans the width of the page.
• Four separate columns of text below that.
• Two columns below that where:
  • The column on the left is thinner and spans the remaining height of the page.
  • The column on the right has one short row of text and then another row of text below it that spans the remaining height of the page.

Each red block is text. Right now I just have each block underneath the next one, all centered. I want it to be laid out like the image above.

I cannot seem to figure out how to do this properly. Using relative alignment is a mess. Percentages don't seem to work either.

Answer 1

The websites are divided in to multiple blocks (or columns). It's up to the designer/developer to divide this to independent groups (like sidebar, headers, footers, content etc.)

Learning the fundamentals is quite important. this site has pretty decent intuitive tutorial HTML

Also checkout

• Designing a HTML5 layout from scratch
• Semantic HTML5 layout

Also take cues from the websites you bump into with the help of developer tools packed with browsers.

Answer 2

I'd start by breaking it up into big blocks:

From there, just make the structure:

<header>
    ...
</header>

<nav>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</nav>

<aside>
    ...
</aside>

<div id="main">
    <article>
        ...
    </article>

    <article>
        ...
    </article>
</div>

The CSS is pretty simple. Just look up fluid two column layout css and read through one of the many articles out there.