- Forums
- HTML
- How To Make Colums With CSS Style To Separate Each Rows
this page will show you how you can separate columns of data using simple CSS code and HTML to align your information neatly like tables [716], Last Updated: Sat May 18, 2024
wallpaperama
Sun Mar 23, 2008
0 Comments
1198 Visits
i always wanted to know if there was a way to put colums with css.
well today i learned how to do this by myself:
i have two colums each containing 5 items and i want it to display in this order:
left1 right1
left2 right2
left3 right3
left4 right4
left5 right5
so i can make this:
right1left1left2right2right3right4left3left4right5left5
look like this:
left1 right1
left2 right2
left3 right3
left4 right4
left5 right5
you can use this code as an example:
copy and paste this into notepad and save it was webune-css.html and then open it with your browser:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Columns By Webune.com</title>
<style type="text/css">
<!--
.right {
float: right;
clear: right;
}
.left {
float: left;
clear: left;
}
-->
</style>
</head>
<body>
<a href="http://www.webune.com"><img src="http://www.webune.com/images/headers/default_logo.jpg"></a><br>Script provided by Webune.com<br>GET PHP HOSTING AT WEBUNE.COM !!<hr>
<div class="right">right1</div>
<div class="left">left1</div>
<div class="left">left2</div>
<div class="right">right2</div>
<div class="right">right3</div>
<div class="right">right4</div>
<div class="left">left3</div>
<div class="left">left4</div>
<div class="right">right5</div>
<div class="left">left5</div>
</body>
</html>