positioning

[Mejse78]

Just when i think I've got it - it slips through my fingers.... :(

I'm strugeling with positioning of div's beside each other, and now I have to ask...
The float property is messing stuff up for me. Every article I read says, that I should use float left and right.. but I think it's the clear-property that makes it wrong..?


I want my "news" divs to be positioned next to the picture:
http://i1086.photobucket.com/albums/j447/Mejse78/hjelp.gif

The HTML lokks like this:

<div id="udstillingbillede" >
<div><img class=image_frame src="images/udstilling/udtside.gif" /></div>
</div>

<div id="udstilling" >
<div class="udtbilled"><IMG class="image_frame" src="images/udstilling/udst1.gif"></div>

<div class="udstext"><h2>Stavtrup Sognegård, april 2012</h2>
<br>
<p>Fredag den 30. marts var der fernisering i Stavtrup Sognegård.
<br>Der kom rigtig mange besøgende og der blev solgt en del billeder.</p></div>
</div>

<div id="udstilling" class="udstborder">
<div class="udtbilled"><IMG class="image_frame" src="images/udstilling/udst1.gif"></div>

<div class="udstext"><p>aæjkgfægjfdæj</p></div>
</div>

The css:


#udstillingbillede { width: 200px; float: right; padding-right: 20px; clear: left;}
#udstilling { width: 580px; float: left; clear: both; margin-bottom: 20px;}
.udstborder { border-top: 1px #696933 dashed; }
.udtbilled { float: left;}
.udstext { overflow:hidden; padding-left: 20px; padding-top: 10px;}

I'm allso not sure, that this is the best way to "stack" the "news" upon each other... should I use some kind of <ul> instead?

[Mejse78]

I've got it working now... but I have NO IDEA why..??


<div id="udstillingbillede" >
<div><img class=image_frame src="images/udstilling/udtside.gif" /></div>
</div>



<div id="udst1" class="udstborder">
<div class="udtbilled"><IMG class="image_frame" src="images/udstilling/udst1.gif"></div>

<div class="udstext"><p>aæjkgfægjfdæj</p></div>

</div>

<div id="udst1" class="udstborder">
<div class="udtbilled"><IMG class="image_frame" src="images/udstilling/udst1.gif"></div>

<div class="udstext"><p>aæjkgfægjfdæj</p></div>

</div>

css:



#udstillingbillede { width: 200px; float: right; padding-right: 20px; }
#udst1 { width: 580px; }
.udstborder { border-bottom: 1px #696933 dashed; }
.udtbilled { float: left; clear: left; margin-top: 15px; margin-bottom: 15px;}
.udstext { height: 110px; padding-top: 30px; padding-left: 140px;}

Why must there be a clear: left; here???