Jump to content

Aligning A Div Element & Clear Outdated?


K_Drive
 Share

Recommended Posts

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>

Edited by K_Drive
Link to comment
Share on other sites

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

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;}

Edited by dsonesuk
Link to comment
Share on other sites

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

Edited by K_Drive
Link to comment
Share on other sites

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...

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...