Css Alignment

brandonre · #**1 Css Alignment** 07-09-2007, 11:11 AM

Hi I'm looking for a way to line up a column of three with links something like this
using css.

Link Column1 Link Column2 Link Column3
Link Column1 Link Column2 Link Column3
Link Column1 Link Column2 Link Column3

kyle422 · #**2 Re: Css Alignment** 07-09-2007, 11:34 AM

Try this: http://css-discuss.incutio.com/?page=ThreeColumnLayouts

kelsheikh · #**3 Re: Css Alignment** 07-09-2007, 12:30 PM

Heres another one: http://glish.com/css/2.asp Cheers

brandonre · #**4 Re: Css Alignment** 07-09-2007, 01:19 PM

Sorry I think I may have not explained what I was looking for correctly. I am looking for more of a way to align text links similar to the way a table is lay out not the body columns.

A row of text links a left column,middle column, and right column.

Mouse · #**5 Re: Css Alignment** 07-09-2007, 01:45 PM

You could put the links in an unordered list and display the list items inline.

danish · #**6 Re: Css Alignment** 08-02-2007, 05:42 AM

you can use also div tags ... instead of using table.

Benjamin EBWS · #**7 Re: Css Alignment** 08-05-2007, 11:56 PM

Like Mouse said, use a list (ul/li) and float:left to get them in a row. It's possible other ways (div) but ul/li is the best (won't dynamically resize)

MAC · #**8 Re: Css Alignment** 09-03-2007, 11:35 AM

try this code sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example</title>
<style type="text/css">
* {
font: normal 1em Arial, Helvetica, sans-serif;
color:#999;
}
.colun{
width:200px;
float:left;
border-top:#ccc 1px solid; /** delete this line for no border **/
}
.colun p {
border:#ccc 1px solid; /** delete this line for no border **/
border-top:none; /** delete this line for no border **/
margin: 0;
padding: 0;
}
.colun a, .colun a:visited {
color:#00c;
text-decoration:none;
padding: 0 0 0 6px;
}
</style>
</head>
<body>
<div class="colun">
<p><a href="#">link1</a></p>
<p><a href="#">link1</a></p>
</div>
<div class="colun">
<p><a href="#">link1</a></p>
<p><a href="#">link1</a></p>
</div>
<div class="colun">
<p><a href="#">link1</a></p>
<p><a href="#">link1</a></p>
</div>
</body>
</html>

Cheers!

brandonre · #**9 Re: Css Alignment** 09-03-2007, 06:40 PM

Thanks Mac, That code worked great Cheers

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Real Estate Forums

For our members

Main Sections

IDX Coverage Areas

Spiders Welcome