1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Dynamic Height

Discussion in 'Web Design & Development' started by mwdesign, Aug 17, 2012.

Thread Status:
Not open for further replies.
Advertisement
  1. mwdesign

    mwdesign Thread Starter

    Joined:
    Aug 20, 2010
    Messages:
    183
    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]
    
    
    [HTML]
    <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  -->[/HTML]
     

    Attached Files:

  2. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    2,058
    Take a look at the css styling for div id = post1 and you may have solved your problem...
     
  3. mwdesign

    mwdesign Thread Starter

    Joined:
    Aug 20, 2010
    Messages:
    183
    Code:
    #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 :)
     
  4. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    2,058
    I would take out the restricting height:100px; statement... and let it run
     
  5. mwdesign

    mwdesign Thread Starter

    Joined:
    Aug 20, 2010
    Messages:
    183
    No unfortunately that didnt work.

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

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    2,058
    Oops!:eek:
    I didn't ask you to take out "overflow: hidden;" - which is the reason for truncation when associated with a restricting height clause...
     
  7. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    2,058
    Did you try it without overflow: hidden; ??
     
  8. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1065417