Two columns using DIV's

[phpPunk]

[quote]<div style="position: absolute; width: 50%; height: 320px; border: 1px solid black">
  <div><img src="" width="340px" height="280px" /></div>
  <div>Map</div> 
</div>
<div style="position: relative; width: 50%; height: 320px; border: 1px solid black; float: right">
  Google AdSense 
</div>[/quote]

<b>This is rendered incorrectly as it's not at the bottom???</b>

This works but all content after this is displayed as though the DIV's don't exist (underneath them?)

What change can I make to correct this issue?

[pr0x]

[quote author=phpPunk link=topic=118551.msg484517#msg484517 date=1166066387]
[quote]<div style="position: absolute; width: 50%; height: 320px; border: 1px solid black">
  <div><img src="" width="340px" height="280px" /></div>
  <div>Map</div> 
</div>
<div style="position: relative; width: 50%; height: 320px; border: 1px solid black; float: right">
  Google AdSense 
</div>[/quote]

<b>This is rendered incorrectly as it's not at the bottom???</b>

This works but all content after this is displayed as though the DIV's don't exist (underneath them?)

What change can I make to correct this issue?
[/quote]

change either width percentages to 49%, the border is 1px itself on both div's so that takes 1% of the page, causing an overlap.

[phpPunk]

hey man thanks for the reply...

However, it's not the overlap of the 2 DIV's i meant...but rather the content which comes after the two div's is rendered underneath the DIV's

I'll try what you suggested incase I'm missing something

[pr0x]

ah ok, sorry, the reason why the data is being pushed through the div box's is because the box's are set as absolute and relative. So the data just shoves itself to the top. like this:

[code]<div style="width: 50%; height: 320px; border: 1px solid black;">
  <div><img src="" width="340px" height="280px" /></div>
  <div>Map</div>
</div><div style="width: 50%; height: 320px; border: 1px solid black; position:absolute; top:15px; right:10px;">
  <div><img src="" width="340px" height="280px" /></div>
  <div>Map</div>
</div>
<div>
  Google AdSense
</div>[/code]

[Daniel0]

[code]<div style='width:50%; float:right:'>bla bla bla</div>
<div>bla bla bla</div>[/code]

This should work.

[monkey_05_06]

If you needed 3 colums you could also float one div to the left:

[code]<div style = "float: left;">left</div>
<div>middle</div>
<div style = "float: right;">right</div>[/code]