A blog & community for non-professional web designers, programmers, webmasters, and other web savvies.

CSS Div Layout

August 23, 2009 - 12:00am -- Mitch

This makes a 2 column layout with a header. It is fixed in the very center of the page and is 700px wide. Pretty easy to use.

<!-- Place this in the head, or remove the style tags and place in your CSS -->

<style type="text/css">
body {
}
#container {
  width: 700px;
  margin-right: auto;
  margin-left: auto;
}
#header {
  width: 700px;
  height: 100px;
}
#left {
  position: absolute;
  top: 100px;
  width: 200px;
}
#content {
  position: absolute;
  top: 100;
  margin-left: 200px;
}
</style>


<!-- Place this in the body-->

<div id="container">
<div id="header">
Enter your header content here.
</div>
<div id="left">
Enter your sidebar content here
</div>
<div id="content">
Enter your content here
</div>
</div>
Tags: 

Comments

Mitch
Mitch's picture
Snowball (?)
Rank Points: 4 (?)
Posts: 75
Status: Offline

YAY! My code got readded :3

theannabella
theannabella's picture
Snowball (?)
Rank Points: 8 (?)
Posts: 86
Status: Offline
WWW

I've got to learn divs! All I can do are tables. D:

jenny
jenny's picture
Iceberg (?)
Rank Points: 50 (?)
Age: 17
Posts: 856
Status: Online
WWW

Divs I find are much less fiddly than tables.

--------------------

Jenny-Jen-Jen :D
Bloggity: www.windymill.net
Web-Design Portfolio: www.jenny-aster.net

theannabella
theannabella's picture
Snowball (?)
Rank Points: 8 (?)
Posts: 86
Status: Offline
WWW

Hmm, what do you mean by that, Jenny? :)

Scarlie
Scarlie's picture
Glacier (?)
Elite Yeti (?)
Rank Points: 104 (?)
Posts: 440
Status: Offline

I like using divs within tables. Or divs within divs. DIVCEPTION!

--------------------

I'm a jack of all trades in training.

jenny
jenny's picture
Iceberg (?)
Rank Points: 50 (?)
Age: 17
Posts: 856
Status: Online
WWW

I mean that tables have all this , jazz and they are just much less flexible than divs. Whenever something's a matter with a layout, I just whack a div in there. But yeah, Scarlett. I'm with you. I can be such an unorthodox coder and put divs, tables and random other elements everywhere. The layout in the end may (or may not) look alright but the coding looks like a bomb site every time. That's the main reason why I don't sell WP themes or do commission regularly.

--------------------

Jenny-Jen-Jen :D
Bloggity: www.windymill.net
Web-Design Portfolio: www.jenny-aster.net

aashni
aashni's picture
Iceberg (?)
Elite Yeti (?)
Rank Points: 73 (?)
Age: 19
Posts: 1,753
Status: Offline
WWW

haha. I use divs most of the time, and whenever I can't figure out how to do something (like the headers on one of my older enchantmenot themes) I just slap a table in there. Divs move around too much sometimes, while tables stay where they are, and stay together. :)

I find that as I've improved my coding skills, i'm learning how to code with just Divs better

--------------------

My Sites: 1 | 2 | 3 | 4 | 5 | 6

@IceCaves on Twitter

    Stay Connected

    Twitter Facebook Tumblr Google+ Glaciallis Google RSS

    *Follow us on Twitter or Facebook to also follow minor site updates that don't make it to the homepage news.