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:


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???