Basic two column css layout - free (xhtml/css)

RYANNNNN · 01-02-2008, 04:59 PM

Hey

Here's the code..

Code:

<!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>Untitled Document</title>
<style type="text/css">
div#header {
width: 790px;
background: #234374;
height: 100px;
margin-bottom: 20px;
}
div#container {
width: 790px;
margin: auto;
}
div#sidebar {
width: 190px;
margin-right: 20px;
float: left;
background: #4D84BB;
padding: 5px;
}
div#content {
width: 560px;
float: right;
background: #22344A;
padding: 5px;
}
</style>
</head>

<body>

<div id="container">
    <div id="header">header</div>
    
    <div id="sidebar">content</div>
    
    <div id="content">stff</div>
</div>

</body>
</html>

It's untested but it should work... basically that's the basics for a layout that can be adapted. It should give you an insight into how to code xhtml/css as well..

For example, the boxes we use the attribute background. It could be changed to say, background: url("images/bg.gif") repeat-x; to create an expanding image background, easy as.

Also, to add a background, in the <style> tags, add ..

Code:

body {
background: #hexcode;
}

If you need any css help or want to edit this layout or anything related to xhtml/css .. ask here.

Gonna add some more stuff to this thread but ...

If you wanna change the font use:

font: normal 12px arial;

You can change normal to bold or italic or whatever as well as the size. Now, you can either add it in the body styling or a certain div, which means you can have different font styles for different divs.

If you wanna change font color:

color: #hexcode;

Thread moved to tutorials & guides by --ss-- (Forum Super Moderator): Great guide!

Oddsocks · 14-07-2008, 03:50 PM

This isn't even worth being called a tutorial.

~~Joshuae~~ · 14-07-2008, 07:42 PM

More of a resource, but nice one.

Black_Apalachi · 10-11-2008, 09:43 PM

Sorry to bump, but what in the code tells each of the three boxes where to be? And how would I add more and where I want?

Edit: And how do I get rid of the word "header"? The only place I see it is div#header but if I remove it there, the whole div (I think) disappears...

Cushioned · 11-11-2008, 12:31 AM

Originally Posted by Robald

Sorry to bump, but what in the code tells each of the three boxes where to be? And how would I add more and where I want?

Edit: And how do I get rid of the word "header"? The only place I see it is div#header but if I remove it there, the whole div (I think) disappears...

<div id="header">header</div>

That's where the "Header" text is located

L?KE · 13-11-2008, 04:27 PM

This isn't a tutorial :S:S

Jxhn · 13-11-2008, 04:57 PM

Originally Posted by Robald

Sorry to bump, but what in the code tells each of the three boxes where to be? And how would I add more and where I want?

float: left; and float: right; position the boxes.

It's quite hard to explain how to position them, but there's lots of guides in this section which can tell you how to and I'm sure that they would make you understand.

mattywatson07 · 17-05-2009, 10:41 AM

Originally Posted by Jxhn

float: left; and float: right; position the boxes.

It's quite hard to explain how to position them, but there's lots of guides in this section which can tell you how to and I'm sure that they would make you understand.

Can you explain that?

Jam-ez · 17-05-2009, 10:50 AM

Originally Posted by mattywatson07

Can you explain that?

Float left makes it float left, and float right makes it float right. As Jxhn said, check out tutorials or click here.

VirtualG · 16-06-2009, 09:48 AM

It's helpful but it isnt a tut

Thread: Basic two column css layout - free (xhtml/css)

Thread Tools

Basic two column css layout - free (xhtml/css)

Posting Permissions