align divs into rows 2

[gwar2k1]

    <!-- BEGIN postrow -->
    <div style="width: 100%; position: relative; top: 5px;">      
    <div style="position: absolute; left: 0px; width: 200px;">
          <a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b><br>
          <center>{postrow.POSTER_AVATAR}</center><br>
          {postrow.POSTER_JOINED}<br>
          {postrow.POSTER_POSTS}<br><br>
          {postrow.POSTER_FROM}<br><br>  
      {L_POSTED}: <br>
            {postrow.POST_DATE}<br>
      {L_POST_SUBJECT}: {postrow.POST_SUBJECT}
        </div>      

        <div style="position: absolute; left: 200px; width: 100%;">
          {postrow.QUOTE_IMG} {postrow.EDIT_IMG} {postrow.DELETE_IMG} {postrow.IP_IMG}<br>
          {postrow.MESSAGE}{postrow.SIGNATURE}{postrow.EDITED_MESSAGE}<br>
      {postrow.PROFILE_IMG} {postrow.EMAIL_IMG} {postrow.[URL unfurl="true"]WWW_IMG}[/URL] {postrow.MSN_IMG} {L_BACK_TO_TOP}
        </div>
        <br>
  </div>      
    <!-- END postrow -->

Im writing a layout for a phpBB forum and am having trouble getting divs to line up above eachother. This follows on from a topic i started earlier: Best way to handle 2 divs.

When i use this, the posts overlap each other, you can tell because they have a break space from the top... if that makes sense

Ive tried changing relatives to absolutes and vice versa to no avail. Any way to stop the overlap and have a new post on a new "row"

an example of what im talking about can be seen here:

http://www.ironic-online.co.uk/images/Image2.gif

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

 

[RISTMO]

Try not using any "position" attribute for the first div and changing the other ones to relative.

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.channelministries.com/

http://www.pillarzone.com/

 

[Vragabond]

You could always try the usual way:

<!-- BEGIN postrow -->
  <div style="position: relative; top: 5px; height: auto; background: #e0ffff; border: 1px solid black;">
    <div style="position: absolute; width: 200px;">
       Sender data
    </div>      
    <div style="position: relative; top: 0px; margin-left: 210px; height: 200px; background: white;">
      Message
    </div>
  </div>
  <br />   
<!-- END postrow -->

Hope it is of help.

 

[gwar2k1]

that solves the problem of having "rows" but produces the problem that the two divs are no longer on the *same* row

avatar
message

avatar
message

it needs to be

avatar message
avatar message

ive tried using float but this messes things up

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

 

[RISTMO]

You could always cheat (since it's 3am and I'm not thinking well enough to position <divs> with css...;-)):

<!-- BEGIN postrow -->
<table style="width:100%;">
  <tr>
    <td style="width:200px" valign="top">
      <a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b><br>
      <center>{postrow.POSTER_AVATAR}</center><br>
      {postrow.POSTER_JOINED}<br>
      {postrow.POSTER_POSTS}<br><br>
      {postrow.POSTER_FROM}<br><br>  
      {L_POSTED}: <br>
        {postrow.POST_DATE}<br>
      {L_POST_SUBJECT}: {postrow.POST_SUBJECT}
      </td>
      <td valign="top">
      {postrow.QUOTE_IMG} {postrow.EDIT_IMG} {postrow.DELETE_IMG} {postrow.IP_IMG}<br>
      {postrow.MESSAGE}{postrow.SIGNATURE}{postrow.EDITED_MESSAGE}<br>
      {postrow.PROFILE_IMG} {postrow.EMAIL_IMG} {postrow.[URL unfurl="true"]WWW_IMG}[/URL] {postrow.MSN_IMG} {L_BACK_TO_TOP}
    </td>
  </tr>
</table>
<!-- END postrow -->

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.channelministries.com/

http://www.pillarzone.com/

 

[gwar2k1]

Vragabond, I cant give the message div a height attribute as messages will be of varying length. while this would work for short posts, long posts will not be displayed properly. thanks tho

eeew tables. i think i may have to use them as the ultimate last resort next week. thanks for bothering at such a time too!


~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

 

[Vragabond]

Well, my suggestion touched only IE browser at that time, since it understands the height attribute as min-height. I am not sure which browsers you're trying to accomodate, but to expand on my code further, you could find desirable results by employing a hack for IE and use the correct syntax for Mozilla, NN and Opera.

<style type="text/css">
  .message {
    position: relative;
    top: 5px;
    height: auto;
    background: #e0ffff;
    border: 1px solid black;
  }

  .message .info {
    position: absolute;
    width: 200px;
  }

  .message .main {
    position: relative;
    top: 0px;
    margin-left: 210px;
    min-height: 200px; /* attribute for Opera, NN and Mozilla */
    background: white;
  }

  /* hack for IE */
  * html .message .main {
    height: 200px;
  }
</style>

<!-- BEGIN postrow -->
  <div class="message">
    <div class="info">
       Sender data
    </div>      
    <div class="main">
      Message
    </div>
  </div>
  <br />   
<!-- END postrow -->

Gives what you want in IE6, Mozilla 1.5 and Opera 7.22

 

[gwar2k1]

Thanks, although it wasnt the whole solution, youve all contributed thus you all get stars. btw, im using ie 6.1 and target audience is more than likely to use ie4+

what i ended up with in the end:

<div style="width: 100%; top: 5px; height: auto;">      
<div style="position: absolute; left: 0px; width: 200px; z-index: 0">
<div style="position: relative; top: 0px; margin-left: 210px; height: 200px; width: 100%;">

woop! one i had the two divs lined up together, the "info" one appeared relative to the message one which was amusing so I added the z-index and jobs a good'n!

merci to all

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

 

[RISTMO]

Thanks! Glad it's working now.

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.channelministries.com/

http://www.pillarzone.com/