Align Text Column Without Tables Using Css Is it possible to get a 3 column alignment without using tables with C

[sonesay 7]

I know I can use tables to get this effect but I am not sure if CSS can do it. I have not found any examples so far, the only alignments with CSS I have come across are whole div elements and nothing for inside formatting like tables offer.

Heres my current stage of my layout so far. select a character to see output.

http://forums.xisto.com/no_longer_exists/
http://forums.xisto.com/no_longer_exists/


The attached file is of my original plan but at this stage I cannot do a php+ajax pagination for characters because of lack of knowledge so I went with the simple drop down list.

There are some extra functions I decided to add on soon too (those two buttons but they dont do anything yet). So there are some few changes I did not think of first round but the overall layout should not change too much.

my main concern at the moment is of aligning elements inside the main DIV's 'stats' and eventually 'merits' vertically. Is tables the only solution or can CSS achieve this?

[Saint_Michael 3]

I think I know what you going for, and yes its possible, I have seen templates and designs with 4 columns.

Here are some templates that show the bare bones of 3 columns.

This one includes everything i.e headerm nav bar, 3 columns, and footer.

This one just includes the columns themselves to implement them within the design itself.

If your looking for ajax scripts this site will help you greatly especially in content loading and stuff, and most of the sites come with a how to install it and stuff. Of course some reguire you to install software since most of them are plug in and what, but you should be able to find what your looking for and stuff.

[sonesay 7]

Thanks for the links. The overall layout is not what I'm trying to fix atm. I was afraid i would be unclear with my english. What I am after is a possible CSS solution to align the text: HP, MP, STR, DEX, VIT, AGI, INT, MND, CHR (all vertcally)100-, 250, 88, 67, 52, 75, 50, 55, 66 (all vertically) Bonus stats (all vertically)link in my attached picture.so if I was to do that in a table I would have a 3 column table. I'm starting to think that I will need to have 3 divs for the 3 columns inside the main div? I'm not that expericenced with CSS to be honest so I want to get this right and use it through out the rest of the page contents.I hope that makes it abit clear of what I am after.[hr=noshade] [/hr]sorry for repost. the attached image here is what I'm after. the effect of the right side. the left side is the default output with no alignment. I hope this is more clear. is it better just to use tables or css to try and get this vertical alignment effect.

[jlhaslip 4]

You should be able to do that with div's, too, however, it looks to me that the data itself is "tabular", so done properly, it is very likely that a Table would be suitable for the task. Is the data from a database?

[sonesay 7]

yes its retrieved from mysql and put through some functtions then outputed.

$hp = GetHP($race_index, $main_job_class, $sub_job_class, $main_job_level, $sub_job_level);	$mp = GetMP($race_index, $main_job_class, $sub_job_class, $main_job_level, $sub_job_level);	echo "HP " .$hp;	echo "<br />";	echo "MP " .$mp;	echo "<br />";	echo "<br />";		// output attributes	$atrb[2] = "STR";	$atrb[3] = "DEX";	$atrb[4] = "VIT";	$atrb[5] = "AGI";	$atrb[6] = "INT";	$atrb[7] = "MND";	$atrb[8] = "CHR";				for ($stat_index = 2; $stat_index <=8; $stat_index++ ) {		$stat_lvl = GetStat($race_index, $main_job_class, $sub_job_class, $stat_index, $main_job_level, $sub_job_level);				echo $atrb[$stat_index] . " " . $stat_lvl . "<br />";	}	

I wont get stoned for using tables will I

[jlhaslip 4]

Not for tabular data layout, but place the Table inside a div and use the div for the page structure is the correct manner to handle this application.(otherwise we stone you)

[truefusion 3]

Some have taken advantage of unordered lists for situations like these. They make use of the table-cell value for the display property for list item elements. They, then, adjust the width to make it look evenly distributed.

[sonesay 7]

Can you show an example of how to use an unordered list for something like this please

[truefusion 3]

Can you show an example of how to use an unordered list for something like this please

Sure.

 

CSS:

ul.header, ul.col {list-style: none;margin: 0;padding: 0;}ul.header:first-line {text-align: center;font-weight: bold;}ul.col {border-top: 1px solid black;}ul.col li {display: table-cell;width: 150px; //change the width to whatever you want.}

For the example, we'll use a 3-row, 3-column unordered list-table.

 

Unordered list HTML:

<ul class="header"><li>Header<!-- Row 1 --><ul class="col"><li>Column 1</li><li>Column 2</li><li>Column 3</li></ul><!-- Row 2 --><ul class="col"><li>Column 1</li><li>Column 2</li><li>Column 3</li></ul><!-- Row 3 --><ul class="col"><li>Column 1</li><li>Column 2</li><li>Column 3</li></ul></li></ul>

Please note that this code has not been tested, but it should work for the most part.

[sonesay 7]

Thanks a lot thats exactly what i am after. Later on I'm planning to use this same technique for a 3 column alignment similar to the example we just did. But the only difference is column widths need to be different. I hope I can assign individual widths to each li element will work. I will test this out soon.cheers

[Saint_Michael 3]

Well I was bit off on the layout but the concept your going for was the same, but as for the widths you would have to set up individual styles to them in two different ways. Using trufusions example all you have to do is set up the CSS for Col1 Col2 Col3 which would look something like this:

ul.col1 li {width:35px}ul.col2 li {width:65px}ul.col3 li {width:100px}

That way it would be universal and cute down on the work by doing them individually like this:

<li style="width: 65px;"> Content here</li>

Either method is effective but the first options cuts down on the clutter in the html, and if you need to make changes on the fly you can just do it from one file instead of doing it over several files. Of course if you feel very adventurous you can set up your tables through ajax, this website gives quite a few examples of different table set ups that can be used.

[sonesay 7]

Sorry to bump up an old thread but I've found a problem with IE7 and this solution. IE 7 does not support display:table-cell (one of manythings IE 7 really sucks at). The only way to get <li> elements displaying in the same line similar to the effect of display:table-cell solution in this post isdisplay:inline;But there is still another problem in IE7.

li.col1 {width:120px;

The width class we have been using to give our widths dont work also. So you see IE 7 offically is the worse compliant broswer out there. I have no doubt I will find more features it does not support and it will continue to make life for us designing webpages as painful as possible.If anyone has a solution to the width spacing for 'display:inline;' method please share.edit:Ok I'm still looking for a suitable sultion that works in IE 7 but the only thing I know is tables now. I'm trying to test out if I can use more divs inside to structure it but with truefusions code it hides all div by default as you can see in the source code in the screen shot. I'm still not fimilar with how to modify it to not include the inner divs.

Edited January 30, 2008 by sonesay (see edit history)

[truefusion 3]

The width class we have been using to give our widths dont work also. So you see IE 7 offically is the worse compliant broswer out there. I have no doubt I will find more features it does not support and it will continue to make life for us designing webpages as painful as possible.If anyone has a solution to the width spacing for 'display:inline;' method please share.

Width does not work with all inline-level elements.

Ok I'm still looking for a suitable solution that works in IE 7 but the only thing I know is tables now. I'm trying to test out if I can use more divs inside to structure it but with truefusions code it hides all div by default as you can see in the source code in the screen shot. I'm still not fimilar with how to modify it to not include the inner divs.

My code only hides the "inactive" ones by default, but i am unsure on what to tell you for the solution. If Internet Explorer lacks, then it lacks. You could try to persuade visitors to switching to a better browser. It's interesting that IE7, though it had a noticable improvement with CSS, lacks such an option. I am unsure of any IE CSS hacks (there may not be any) for this. I'm quite sure i can turn my tab script to use tables instead of divisions, even if it creates unnecessary clutter.

[sonesay 7]

Thinking it over last night as I went to bed I think It would be much easier to use tables to structure the output. It will get clutered with tags but the upside is no futher tweaking of the CSS tabs would need to be done to accomodate the extra inner divs.Thanks for your input truefusion.

[iGuest 3]

Trying to center text in HTML Table using CSSAlign Text Column Without Tables Using Css

First let me explain what I need:

Below is all the items I have in a given single Table Cell.

Host Name: Mgmt MAC Address: Mgmt Interface:hme0 fjgi0 fjgi1 fjgi3 Mgmt IP Address (If Static): Jumpstart Network:192.168.2.0/28 192.168.3.0/28 OS to Install:Solaris 9 Solaris 10 OpenSolaris Platform:Sun8U Sun8M x86 Swap Size: Reserve Partition: MB Global Zone: Tivoli Agent: OpsWare Agent: Oracle DB Server: DMZ:

 What I want to do is having looking like this:

Host Name: Mgmt MAC Address:   Mgmt Interface:hme0 fjgi0 fjgi1 fjgi3 Mgmt IP Address (If Static):   Jumpstart Network:192.168.2.0/28 192.168.3.0/28   OS to Install:Solaris 9 Solaris 10 OpenSolaris   Platform:Sun8U Sun8M x86 Swap Size:   Reserve Partition: MB Global Zone: Tivoli Agent:   OpsWare Agent:   Oracle DB Server:   DMZ:

That what I want it to look like. Any suggestions?

reply by Phillip