...

View Full Version : Basic CSS (divs side-by-side) Question



quadrant6
12-23-2002, 08:41 AM
How do I (with this code below) get the div elements to sit side by side, forming a 3-column layout. I know there are plenty of tuts around and examples of how to do a 3 column layout but i am learning the basics and would appreciate it if someone could point out the simplest way to do this seemingly basic task?


:)


Code below



<html>
<head>
<title>CSS Test</title>
<style>
.1{
border: 1px solid #FF6666;
background-color: #FFCCCC;
height: 30px;
width: 190px;
}
.2{
border: 1px solid #FF6666;
background-color: #FFCCCC;
height: 30px;
width: 100%;
}
.3{
border: 1px solid #FF6666;
background-color: #FFCCCC;
height: 30px;
width: 190px;
}
</style>
</head>
<body>

<div class="1">
1
</div>

<div class="2">
2
</div>

<div class="3">
3
</div>

</body>
</html>

redhead
12-23-2002, 10:51 AM
<div>'s are block elements... meaning they aint gonna just line up unless you tell them to...

i know you asked for a solution to your problem rather than a link but taking a look around www.glish.com/css should help you understand about using <div>'s in place of <table>'s.
:thumbsup:

webmarkart
12-23-2002, 03:16 PM
here are two good links that give several examples and code for this...

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

http://glish.com/css (examples in top right corner)

quadrant6
12-23-2002, 06:45 PM
o.k :) I'll take a look



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum