I'm trying to make 2 columns with multiple rows center in the page and have the left column's text/items align right and the right column's text/items align left...

any idea how?

3/4/2007 10:56:43 PM

I assume you're using CSS?

Have the left div use {float: left; text-align: right;}, have the right div use {float: right; text-align: left;}, have the middle divs all use {margin-left: auto; margin-right: auto;}

that should do it...

3/4/2007 11:21:43 PM

define: middle div

maybe my design is wrong. I'm doing this by row... doing a div for each row ... should i be doing the left column THEN the right column in divs instead?


[Edited on March 4, 2007 at 11:34 PM. Reason : ]

3/4/2007 11:23:15 PM

divs != rows
if you have data that should be tabular, use a table. no need to overuse CSS just to avoid using tables.

here are some multi-column CSS layouts you could modify
http://www.dynamicdrive.com/style/layouts/
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
http://www.cssplay.co.uk/layouts/index.html

3/5/2007 8:25:42 AM

the reason i need to use divs is i'm using javascript to hide/show them based on menu selections, and when trying this with tables, if i hide/show a selected multiple times it keeps adding <br>'s and makes it look horrible... divs don't

3/5/2007 9:19:59 AM

this has been done to death.

3/5/2007 10:19:41 AM

^
Agreed. but i figure at some point I'm going to ask a question that's already been answered multiple times, so I try to pitch in just to preserve good karma or something...

---

bous: I agree w/ agentlion, although you may need to explore some hacks to get around MSIE 6 & 7 table rendering issues. those links are goldmines too

but to your question "define: middle div" -- it'd be any div after the first 2, if the ones above it are {float: left;} and {float: right;}

[Edited on March 5, 2007 at 10:23 AM. Reason : forgot i have live HTML ]

3/5/2007 10:21:51 AM

Quote :

"this has been done to death."

i always search intensively, and found nothing on google worthwhile and nothing on here with the search terms i used. Noen, enlighten me with your searching skills please.

3/5/2007 8:46:10 PM

i've used javascript and tables with hidden rows before just fine

just have it toggle the display style on a click

if (target.style.display == "none"){
target.style.display = "";
}
else target.style.display = "none";

works just fine

but if you're set on divs look though some of the display options here http://www.w3schools.com/css/pr_class_display.asp

[Edited on March 5, 2007 at 8:55 PM. Reason : http://www.w3schools.com/css/pr_class_display.asp]

3/5/2007 8:52:14 PM

[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]
[ code ][ /code ]

3/5/2007 8:56:43 PM

this worked on ie and firefox: just do the divs like a regular table

div.div_table {
	display: table;
	text-align: center;
	margin: 0 auto;
	width: 400px;
}

div.div_row {
	display: table-row;
	width: auto;
}

div.div_cell_left {
	display: table-cell;
	text-align: right;
	width: 200px;
	float: left;
	/*margin-right: 2px;*/
	/*padding-right: 2px;*/
}

div.div_cell_right {
	display: table-cell;
	text-align: left;
	width: 200px;
	float: left;
	/*margin-left: 2px;*/
	/*padding-left: 2px;*/
}

3/6/2007 8:09:38 AM