supermerc Posted April 29, 2007 Share Posted April 29, 2007 Hey I want to make a page with a div tag on top, then right underneath 2 div tags DIRECTLY beside each other, now it works fine in firefox but in IE it goes beside it but under so it doesnt work :-( This is my code: <style type="text/css"> div#head { width: 100%;} div#right { margin: 0; padding: 0; width: 50%; float:right; vertical-align:top; } div#left { margin: 0; padding: 0; width: 50%; float:left; } </style> <body> <div id="around"> <div id="head"><table width="100%" border="1"> <tr> <td width="84%">Username</td> <td width="16%"><div align="right">Message Me <br> Add to friends </div></td> </tr> </table> </div> <div id="left"> <table width="100%" border="1"> <tr> <td>Profile picture </td> </tr> <tr> <td>Top art </td> </tr> <tr> <td>...</td> </tr> <tr> <td>Top Friends: </td> </tr> <tr> <td>...</td> </tr> </table> </div> <div id="right"> <table width="100%" border="1"> <tr> <td>Description</td> </tr> <tr> <td>here</td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </div> </div> Link to page = http://www.r4ndom.com/test.html thanks alot! Quote Link to comment Share on other sites More sharing options...
AndyB Posted April 29, 2007 Share Posted April 29, 2007 Bad implementation of CSS! Since that page displays tabular data you should use a table to display the data. That's why the table elements exist in the html specification. Using CSS placement is simply the wrong way to do it. Use CSS to make it pretty. Use html to create the table to display the information. Quote Link to comment Share on other sites More sharing options...
supermerc Posted April 29, 2007 Author Share Posted April 29, 2007 I dont understand what you mean ??? Quote Link to comment Share on other sites More sharing options...
AndyB Posted April 29, 2007 Share Posted April 29, 2007 What you are displaying is information that makes the most sense when it is represented in tabular form, i.e. in a table. The html table is ideal for displaying information that way. In fact, the html table is better than CSS positionning of divs for displaying AND interpreting the information, particularly for accessibility. What I'm suggesting is that you use a table to display the information and use CSS to make it look pretty. Quote Link to comment Share on other sites More sharing options...
supermerc Posted April 29, 2007 Author Share Posted April 29, 2007 the thing is Im not able to make it look how I want it to look with tables I tried hundreds of times and it never looks right Quote Link to comment Share on other sites More sharing options...
AndyB Posted April 29, 2007 Share Posted April 29, 2007 It's up to you. rowspan, colspan, cellspacing, cellpadding, align, valign ... the html list goes on and it's all about how to create a tabular arrangement to suit your needs. Throw in some CSS for the presentation, e.g. font, color, background color, border, etc. and you can make it look however you want. Until people discovered CSS could do layout, billions of web pages used tables and nested tables for arrangement of their content. All I'm saying is that tables is the right way to lay out tabular information, CSS is the wrong way to lay it out. And learning to use tables properly is child's play compared to using CSS properly. Quote Link to comment Share on other sites More sharing options...
supermerc Posted April 29, 2007 Author Share Posted April 29, 2007 Could you help me with it? Im trying to make something that will look like this, But I can never get it right, theres always something that goes wrong in ff or ie If you would help it would be greatly apreciated, my site is staling because of the profile page i have been trying for about a month now Quote Link to comment Share on other sites More sharing options...
supermerc Posted April 30, 2007 Author Share Posted April 30, 2007 *Bump* Or just tell me what I would need because Im not able too iv tried many times Quote Link to comment Share on other sites More sharing options...
AndyB Posted April 30, 2007 Share Posted April 30, 2007 <html> <head> <title>Untitled</title> <style type="text/css"> body,td { color:#000; background-color:#fff; font-family:arial, helvetica, sans-serif; font-size:11px; } </style> </head> <body> <table style="border:1px solid #c00;" width="90%" align="center" cellpadding="2" cellspacing="2"> <tr> <td valign="top">Username</td> <td valign="top" align="right"><a href= #">Message Me</a><br/><a href="#">Add to Friends</a></td> </tr> <tr> <td width="50%" valign="top"> <table> <tr> <td>Profile pic here</td> </tr> <tr> <td>Top 5 art</td> </tr> <tr> <td> </td> </tr> <tr> <td>Top 5 friends</td> </tr> <tr> <td> </td> </tr> </table> </td> <td width="50%" valign="top"> <table> <tr> <td>Description</td> </tr> <tr> <td>blah blah blah</td> </tr> <tr> <td>Something else</td> </tr> <tr> <td>blah blah blah and more blah blah blah</td> </tr> </table> </td> </tr> </table> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.