PDA

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