Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Web Design & Development Web Design & Development
Search Search
Search for:
Tech Support Guy > > >

Dynamic Height


(!)

mwdesign's Avatar
mwdesign mwdesign is offline
Computer Specs
Member with 183 posts.
THREAD STARTER
 
Join Date: Aug 2010
Experience: Intermediate
17-Aug-2012, 04:46 AM #1
Dynamic Height
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 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  -->
Attached Thumbnails
Dynamic Height-positioning.jpg  
JiminSA's Avatar
JiminSA   (Jim) JiminSA is offline JiminSA has a Profile Picture
Computer Specs
Member with 1,762 posts.
 
Join Date: Dec 2011
Location: Johannesburg South Africa
Experience: Intermediate
17-Aug-2012, 06:24 AM #2
Take a look at the css styling for div id = post1 and you may have solved your problem...
mwdesign's Avatar
mwdesign mwdesign is offline
Computer Specs
Member with 183 posts.
THREAD STARTER
 
Join Date: Aug 2010
Experience: Intermediate
17-Aug-2012, 06:31 AM #3
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
JiminSA's Avatar
JiminSA   (Jim) JiminSA is offline JiminSA has a Profile Picture
Computer Specs
Member with 1,762 posts.
 
Join Date: Dec 2011
Location: Johannesburg South Africa
Experience: Intermediate
17-Aug-2012, 06:36 AM #4
I would take out the restricting height:100px; statement... and let it run
mwdesign's Avatar
mwdesign mwdesign is offline
Computer Specs
Member with 183 posts.
THREAD STARTER
 
Join Date: Aug 2010
Experience: Intermediate
17-Aug-2012, 06:43 AM #5
No unfortunately that didnt work.

Is it likely that its something to do with the floats? or position state of the divs?
JiminSA's Avatar
JiminSA   (Jim) JiminSA is offline JiminSA has a Profile Picture
Computer Specs
Member with 1,762 posts.
 
Join Date: Dec 2011
Location: Johannesburg South Africa
Experience: Intermediate
17-Aug-2012, 07:05 AM #6
Oops!
I didn't ask you to take out "overflow: hidden;" - which is the reason for truncation when associated with a restricting height clause...

Last edited by JiminSA; 17-Aug-2012 at 07:27 AM..
JiminSA's Avatar
JiminSA   (Jim) JiminSA is offline JiminSA has a Profile Picture
Computer Specs
Member with 1,762 posts.
 
Join Date: Dec 2011
Location: Johannesburg South Africa
Experience: Intermediate
18-Aug-2012, 04:54 AM #7
Did you try it without overflow: hidden; ??
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
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.


(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑

Content Relevant URLs by vBSEO 3.3.2