[mwdesign]

Hi guys,

i have an issue with using height:auto on a series of devs which will have different amount of content. What i need is for my divs to retain the margins in between them and just shift down when necessary (currently they move below the following div), I have tried using position relative on all the divs but that didnt work.

Ive attatched a jpeg explaining the problem

thanks

[CODE]

<!-- Container for divs -->
.slider_wrapper
{
width:355px; height:auto; float:left; padding:10px 0 0 0px; margin-bottom:0px; margin-left:18px; margin-top:15px; background:#f5f5f5; border:1px solid #ddd;
}
[CODE]

<div class="slider_wrapper">
			<div class="title">
				<a href="#">Majority in UK motorist poll put off 'complicated' claims process</a>
			</div>
			          <div id="holder">  
      <div id="info"> <!-- This is the bar containing the post information (date / author / comments)-->
    		<ul>
        		<li class="date">28th August 2012
            <li class="sub-info">by Amal Ahmed</li>
                <!--<li class="comments">(2) comments</li>-->
       		</ul>
      </div>  
      </div>     
      
      <div id="clear"></div>     			
			<div id="post1">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</div>
			<div id="clear"></div>
	 <div class="more"><a href="#"> ...More</a></div>

			
	</div>

<!-- End of Post  -->

[JiminSA]

Take a look at the css styling for div id = post1 and you may have solved your problem...

[mwdesign]

#post1 {overflow: hidden;
	line-height: 20px;
	margin-top:0px; 
	height:100px;
	width:320px; 
	float:left; 
	font-family:Arial, Helvetica, sans-serif;
	color:#666; 
	font-size:14px;
	border-top:thin dotted #666; 
	padding-top:15px; 
	margin:5px 20px 10px 20px;}

all the post ids have a fixed height....but the titles may go onto multiple lines (hence the container changing height.

What would i change to fix it?

Thanks

[JiminSA]

I would take out the restricting height:100px; statement... and let it run

[mwdesign]

No unfortunately that didnt work.

Is it likely that its something to do with the floats? or position state of the divs?

[JiminSA]

Oops!
I didn't ask you to take out "overflow: hidden;" - which is the reason for truncation when associated with a restricting height clause...

[JiminSA]

Did you try it without overflow: hidden; ??