3 Columns inside a Container - Webmaster Forum - Web Design, Programming and SEO forums

10-20-2006, 07:51 PM

famousartguy

Status: I'm new around here
Join date: Oct 2006
Location: In the light!
Expertise:
Software:

Posts: 10

iTrader: 0 / 0%

famousartguy is on a distinguished road

Send a message via Yahoo to famousartguy

3 Columns inside a Container

Ok I am pretty new to the tableless coding, but I can't seem to figure out how to make 3-4 columns inside a container all equally spaced. Basically, this is testimonials side by side and below the testimonial is the name of the person, their company, and a link to their site. All on seperate lines. The red part in the image below are the containers, the blue is the testimonial, and the green is the info from the client on seperate lines with link.

Any help is appreciated--thanks!

------------->>

10-20-2006, 08:10 PM

Dream

Status: Lewis Ainslie
Join date: Dec 2005
Location: UK, England.
Expertise:
Software:

Posts: 1,630

iTrader: 15 / 100%

Dream is on a distinguished road

Im not a coder, But ill give it a shot.

The CSS

Code:

}
#container {
	        width: XXpx;
	        height: XXpx;
}
#left {
	        width: XXpx;
	        height: XXpx;
	  float:left;
	        margin-left: XXpx;
}
#middle {
	        width: XXpx;
	        height: XXpx;
	  float:left;
	        margin-left: XXpx;
}
#right{
	        width: XXpx;
	        height: XXpx;
	        margin-left: XXpx;
}

The HTML

Code:

<div id="container"> 
     
     <div id="left"> </div>
     <div id="middle"> </div>
     <div id="right"> </div>
 
</div>

Lewis

10-20-2006, 10:16 PM

Garrett

Status: Waving
Join date: Aug 2005
Location:
Expertise:
Software:

Posts: 2,694

iTrader: 11 / 100%

Garrett is on a distinguished road

Not Bad Lewis but to fix a few things on your part:

Code:

#container {
	        width: XXpx;
	        margin: 0 auto;
}
#left {
	        width: XXpx;
	  float:left;
	        margin-left: XXpx;
}
#middle {
	        width: XXpx;
	  float:left;
	        margin-left: XXpx;
}
#right{
	        width: XXpx;
	        margin-left: XXpx;
	        float: left;
}

If some elements are display wierd after that container, add <br clear="all" /> under the div#right.

10-20-2006, 11:51 PM

Dream

Status: Lewis Ainslie
Join date: Dec 2005
Location: UK, England.
Expertise:
Software:

Posts: 1,630

iTrader: 15 / 100%

Dream is on a distinguished road

Originally Posted by Garrett

Not Bad Lewis but to fix a few things on your part:

Code:

#container {
	        width: XXpx;
	        margin: 0 auto;
}
#left {
	        width: XXpx;
	  float:left;
	        margin-left: XXpx;
}
#middle {
	        width: XXpx;
	  float:left;
	        margin-left: XXpx;
}
#right{
	        width: XXpx;
	        margin-left: XXpx;
	        float: left;
}

If some elements are display wierd after that container, add <br clear="all" /> under the div#right.

Thanks, I havent been coding too long.