K_Drive Posted June 26, 2009 Share Posted June 26, 2009 I am trying to use three div elements on a page to align three tables.There are tables within each div - that is all. The first should align to the left.The second should be centered.The third to the right.I can use "text-align" in the div elements, and it works great in IE8.But, Firefox does not seem to recognize this and aligns everything to the left.I was going to try using floats and "clear", but I keep reading that "clear" is outdated. I am using Visual Studio and it tells me that "clear" is outdated.So, can someone please tell me how to align these div elements/tables on the page?It doesn't seem like it should be a tricky problem.Here is the basic HTML:<div style="text-align: left;"> <table> ... </table></div><div style="text-align: center;"> <table> ... </table></div><div style="text-align: right;"> <table> ... </table></div>The only other formatting I have on the page is this in the <head>:<style type="text/css">body{margin: 30px;}</style> Link to comment Share on other sites More sharing options...
K_Drive Posted June 26, 2009 Author Share Posted June 26, 2009 I have tried this (from the Mozilla CSS pages): <div style= "text-align: -moz-right; text-align: right;"> This works in Firefox, but not IE.and this: <div style= "text-align: right; text-align: -moz-right;"> This works in IE, but not FireFox. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 26, 2009 Share Posted June 26, 2009 I'm not sure if you meant having the divs on one row only, or separate rows, so i did both, anyway the code works for both. <!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=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--* {padding: 0; margin:0;}body {margin: 10px;}.container {width: 100%; border: 2px solid yellow;}table, td {border-collapse:collapse; border: 1px solid red;}.table_container {width: 960px; border: 2px solid blue; overflow:hidden; margin-left: auto; margin-right: auto;}table.style1 {width: 300px; }.tableleft { width: 318px; float:left; border:1px dashed lime;}.tablecenter { width: 318px; border:1px dashed lime;float:left;}.tableright { width: 318px; float:right; border:1px dashed lime;}.tablecenter table { margin-left: auto; margin-right: auto;}.tableright table { float:right;}table.style2 {width: 500px; }.tableleft2 { width: 100%; float:left; border:1px dashed lime;}.tablecenter2 { width: 100%; border:1px dashed lime;float:left;}.tableright2 { width: 100%; float:right; border:1px dashed lime;}.tablecenter2 table { margin: 0 auto;}.tableright2 table { float:right;}--></style></head><body><div class="container"><div class="table_container"><div class="tableleft"><table class="style1" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr></table></div><div class="tablecenter"><table class="style1" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr></table></div><div class="tableright"><table class="style1" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr></table></div></div></div><p> </p><div class="container"><div class="table_container"><div class="tableleft2"><table class="style2" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr></table></div><div class="tablecenter2"><table class="style2" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr></table></div><div class="tableright2"><table class="style2" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr></table></div></div></div></body></html> if you wish to align the text within the table, just add required text align to div table.tablecenter table { margin-left: auto; margin-right: auto; text-align:center;}.tableright table { float:right; text-align:right;} Link to comment Share on other sites More sharing options...
K_Drive Posted June 27, 2009 Author Share Posted June 27, 2009 Thank you, dsonesuk.I will give this a try.I am sorry. I should have been clearer on my original post. I wanted the tables down the page vertically. They are not next to each other side by side. And, I have no problem aligning things inside the tables. But, thanks for that, too.Does anyone know about "clear" being outdated?K Link to comment Share on other sites More sharing options...
dsonesuk Posted June 27, 2009 Share Posted June 27, 2009 The CLEAR attributeThis is used on the BR tag to undo the wrapping caused by floating elements, such as aligned images.<br clear="all">(deprecated)This can be replaced by CSS. The clear property takes the values left, right, both or none..unfloat { clear: both; }<img src="image.gif" style="float: left;">This text wraps...<br class="unfloat">This text appears underneath the image... Link to comment Share on other sites More sharing options...
jlhaslip Posted June 27, 2009 Share Posted June 27, 2009 http://csscreator.com/?q=attributes/containedfloat.phpread that link Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.