divs not outputting in image properly

[mystycs]

I set this as the html that i want generated into an image.


<style type="text/css">

* {

margin: 0;

padding: 0;

}

h1 a {

color: black;

text-decoration: none;

}

#background1 {

background-color:#09F;

height: 720px;

margin: 0px auto 0;

overflow: hidden;

position: relative;

width: 480px;

}

#background2 {

background-color:#09F;

height: 720px;

margin: 0px auto 0;

overflow: hidden;

position: relative;

width: 480px;

}

h4 {

font-size: 18px;

text-align: center;

text-shadow: 0 -1px 0 #FFF;

padding-top: 4px;

}

.username {

text-align: center;

text-shadow: 0 -1px 0 #000;

font-size: 26px;

color:#FFF;

padding-top: 5px;

}

#conversation {

padding-top: 15px;

}

h3#date {

color: #808080;

font: bold 26px Helvetica, Arial, sans-serif;

text-align: center;

}

p.message {

font: 22px/25px Helvetica, Arial, sans-serif;

}

.gBoxTall {

background-color:#0C0;

clear: both;

float: right;

margin-top: 15px;

max-width: 270px;

padding-left: 22px;

}

.gBoxTall .right {

background-color:#0C0;

}

.gBoxTall .right p {

margin-left: -5px;

padding: 8px 30px 0 0;

color:#000;

text-shadow: 0px 0px 0px;

}

.gBoxTall .bottom {

background-color:#0C0;

height: 20px;

margin: -10px 0 0 -22px;

}

.gBoxTall .bottom .right {

background-color:#0C0;

float: right;

height: 20px;

width: 43px;

}

.wBoxTall {

background-color:#999;

clear: both;

float: left;

margin-top: 15px;

max-width: 260px;

padding-left: 33px;

}

.wBoxTall .right {

background-color:#999;

}

.wBoxTall .right p {

margin-left: -5px;

padding: 8px 24px 0 0;

color:#000;

text-shadow: 0px 0px 0px;

}

.wBoxTall .bottom {

background-color:#999;

height: 20px;

margin: -10px 0 0 -33px;

}

.wBoxTall .bottom .right {

background-color:#999;

float: right;

height: 20px;

width: 27px;

}

#contentarea {

font-family: Helvetica, Arial, sans-serif;

height: 660px;

overflow: hidden;

}

</style>





<div id="background1"><div id="contentarea">

<h4 id="time">Tuesday</h4><br/>

<h4 class="username">Tom</h4><div id="conversation"><div
class="gBoxTall">

<div class="right">

<p class="message">Your mom and I are going to divorce next
month.

</p>

</div>

<div class="bottom">

<div class="right"></div>

</div>

</div><div class="wBoxTall">

<div class="right">

<p class="message">Why ? Call me please.

</p>

</div>

<div class="bottom">

<div class="right"></div>

</div>

</div></div>

</div>






But for some reason it does not display the jpg properly as my html.
Why is this happening and how can i go about fixing it?

Here is how my jpg looks. http://i.imgur.com/u70JY.jpg

As you can see the green is on the left when it should be on the
right.and the text doesnt look properly placed as in the html i put. I
am at a loss....

[BrianS]

You're relying on floats for your layout? This will be problematic unless you are using the latest code from the repository and have enabled float support (it's currently experimental).

Also please note that since this is a general support question you should use the support group. This group is intended to discuss development of the project.

[mystycs]

How do i go about finding this repository and enabling float support? Also ah im sorry for posting here then 

[BrianS]

Sorry, somehow I missed that you had followed up. Hopefully you've figured out where to find the code, but if not you can grab it from the SVN repository: http://code.google.com/p/dompdf/source/

If you're not comfortable with SVN you can download a nightly: http://eclecticgeek.com/dompdf/

The setting for enabling float support is in the configuration file, look for DOMPDF_ENABLE_CSS_FLOAT.