Jump to content

Recommended Posts

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!

Link to comment
https://forums.phpfreaks.com/topic/49188-positioning-trouble/
Share on other sites

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.

Link to comment
https://forums.phpfreaks.com/topic/49188-positioning-trouble/#findComment-241021
Share on other sites

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.

Link to comment
https://forums.phpfreaks.com/topic/49188-positioning-trouble/#findComment-241032
Share on other sites

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.

Link to comment
https://forums.phpfreaks.com/topic/49188-positioning-trouble/#findComment-241035
Share on other sites

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

 

exampleofprofile.JPG

 

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  :-[

Link to comment
https://forums.phpfreaks.com/topic/49188-positioning-trouble/#findComment-241036
Share on other sites

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

Link to comment
https://forums.phpfreaks.com/topic/49188-positioning-trouble/#findComment-241306
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.