CSS Relative Problem

[wemustdesign]

I can't seem to figure out what the problem is here. All I want to do is align 2 divs next to each other. I am using relative positioning as float was causing problems.

 

The 2nd div always aligns with the bottom of the first div. You can see what I mean here:

 

http://www.the-photography-studio.co.uk/test.php

 

Here is my code

 

<div id="main_wm">


<div class="mainleft_rev">
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</div>
<!--end mainleft-->



<div class="mainright_rev">

This is test content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div><!--main_right_rev-->

</div><!--main_wm-->

 

 

CSS:

#main_wm  {width:100%; background-color:#0066FF; background-image:url(images/bg_left.jpg); background-position:left; background-repeat:repeat-y;}
.mainleft_rev{width:200px; min-height:180px; position:relative; top:0; height:auto !important; height:180px; background-color:#00CC00;}
.mainright_rev{width:400px; min-height:180px; position:relative; top:0; left:200px; height:auto !important; height:180px; clear:both; background-color:#00CC00;}

[haku]

Why aren't you floating them? That's the best way to do it, not trying to hack something else together.

 

Float both divs left, and remove the 'clear:both' from the 2nd div.

[haku]

Also, remove all those break tags, and give your div some bottom padding or something. Using those break tags like that defeats the purpose of using CSS.