...

View Full Version : Text columns



titaniumbean
08-24-2005, 10:14 AM
Hey again...


I want to align some text in my body in 3 columns, it's 3 lists as in :-

subject 1:-
1.1
1.2
1.3
1.4

Subject 2:-
2.1
2.2
2.3
2.4



I want (there is 3 subjects) to have them across the page not down, how do I get them to align like that using css? Do I need to create 2 more divs that float to the right of the previous one? Or do I just do align="right" ? Tell me good css techniques to do it!


cheers


titaniumbean.

ronaldb66
08-24-2005, 10:26 AM
Without knowing what sort of markup you used it's guessing, but assuming that you have these lists in some sort of container element each of its own, you could float all three containers left, which should line them up next to eachother in the same order left-to-right as they are top-to-bottom in the source. You do need to make sure that there's sufficient width to fit them all, or else one or more will pop down underneath the other(s) anyway.

titaniumbean
08-24-2005, 10:30 AM
Without knowing what sort of markup you used it's guessing, but assuming that you have these lists in some sort of container element each of its own, you could float all three containers left, which should line them up next to eachother in the same order left-to-right as they are top-to-bottom in the source. You do need to make sure that there's sufficient width to fit them all, or else one or more will pop down underneath the other(s) anyway.


ok cool so if they're from the same div, all floated left will line them up. thanks :-)

So I could create a div called main ul {float:left} and that will line them all up. Thanks.


titaniumbean.

titaniumbean
08-24-2005, 10:52 AM
.....

Tristan Gray
08-24-2005, 12:55 PM
As in do this to them all.

HTML:

<div id="list1">
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</div>
<div id="list2">
<ol>
<li>two-one</li>
<li>two-two</li>
<li>two-three</li>
</ol>
</div>
<div id="list3">
<ol>
<li>three-one</li>
<li>three-two</li>
<li>three-three</li>
</ol>
</div>

CSS:

#list1 {
padding: 0px;
margin: 0px;
float: left;
}

#list3 {
padding: 0px;
margin: 0px;
float: left;
}

#list3 {
padding: 0px;
margin: 0px;
float: left;
}

That should give you three columns on top of each other.

mark87
08-24-2005, 01:16 PM
This is how I would do it -



<!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=iso-8859-1">

<title>Untitled Document</title>

<style type="text/css">

ol {
padding: 30px;
float: left;
}

</style>

</head>

<body>
<ol id="list1">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol id="list2">
<li>two-one</li>
<li>two-two</li>
<li>two-three</li>
</ol>
<ol id="list3">
<li>three-one</li>
<li>three-two</li>
<li>three-three</li>
</ol>
</body>

</html>

By the way how do you get it to do 1.1, 1.2, 1.3, etc? I've forgotten...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum