Building a 2 column web-page with CSS,
In this tutorial I will weakly try to help you make a 2 column layout without using tables, instead using CSS.
How its (meant) to work:
There's two
<div> box's one called say "leftside" the other called "rightside" the div's are controlled with CSS one floats-left (the left one) the other one doesn't have to have any CSS to work. The div box's should sit like this:
How to do it:
First start your code off, as you would usually will <html><head>..<body> etc, then add two div's:
<html>
<head>
</head>
<body>
<div id="leftside">
</div>
<div id="rightside">
</div>
</body>
</html>
Now we add the css:
<html>
<head>
<title>Two column Layout</title>
<style type="text/css">
body { color: black; background: white; }
#leftside { float:left;
width:30%;
border-right:1px solid;
border-bottom:1px solid;
}
h1 { color: #006600; font-size: 200%; margin-left: 20%; margin-right: 10%;}
h2 { color: #006600; font-size: 100%; margin-left: 5%; margin-right: 10%;}
</style>
</head>
<body>
<div id="leftside">
</div>
<div id="rightside">
</div>
</body>
</html>
Now we can add content to the div box's:
<html>
<head>
<title>Two column Layout</title>
<style type="text/css">
body { color: black; background: white; }
#leftside { float:left;
width:30%;
border-right:1px solid;
border-bottom:1px solid;
}
h1 { color: #006600; font-size: 200%; margin-left: 20%; margin-right: 10%;}
h2 { color: #006600; font-size: 100%; margin-left: 5%; margin-right: 10%;}
</style>
</head>
<body>
<div id="leftside">
<h1> H1 on the leftside </h1>
<br>
<h2> H2 on the leftside </h2>
</div>
<div id="rightside">
<h1> H1 on the rightside </h1>
<br>
<h2> H2 on the rightside </h2>
</div>
</body>
</html>
That should make this:
"h1/h2 on the leftside" are in the right place but "h1/h2 on the rightside" are not they have been slapped right next to the leftside border this is because h1 is set "margin-left: 20%" but thats from the edge of the page.
Whats happening is the leftside div box is pushing the rightside content to where it is. You could change the "margin-left" until they move but this would also increase the distance between the left-hand side of the page and H1/H2 on the leftside,
meaning it wouldn't work. So really the best way around this is to use say H1/H2/H3 for the leftside and H4/H5/H6 for the rightside. The leftside "width" can be changed to suit the layout needed. Here is an example of the layout code:
<html>
<head>
<title>Two column Layout</title>
<style type="text/css">
body { color: black; background: white; }
#leftside { float:left;
width:180px;
border-right:1px solid;
border-bottom:1px solid;
}
h1 { color: #006600; font-size: 200%; margin-left: 5%; margin-right: 5%;}
h2 { color: #006600; font-size: 100%; margin-left: 8%; margin-right: 5%;}
h3 { color: #006600; font-size: 200%; margin-left: 25%; margin-right: 5%;}
h4 { color: #006600; font-size: 100%; margin-left: 28%; margin-right: 5%;}
</style>
</head>
<body>
<div id="leftside">
<h1> H1 on the leftside </h1>
<br>
<h2> H2 on the leftside </h2>
</div>
<div id="rightside">
<h3> H3 on the rightside </h3>
<br>
<h4> H4 on the rightside </h4>
</div>
</body>
</html>
Here I have set the width for the leftside to 180px so when the page is shrunk the text doesn't overlap. The above code should look something like this:
Have fun making layouts without tables! I suppose this method could be used to make 3,4,5 etc column layouts.
Happy Coding
I hope this tutorial isn't tooo bad,
Bin
Source1 - 7372example.htm (right-click > "save target as" to download)
Back to tutorials
Sponsored Link
|
