SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Equalizing Divs

  1. #1
    SitePoint Member MaiZey's Avatar
    Join Date
    Dec 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Equalizing Divs

    Hi there,

    I am trying to equalize the left and right divs on this page:
    http://www.joshsphotos.com/equalizingdivs/ (that's the one with the blue background - saying 'this is the big div' and 'equalize please!')

    I want these divs to be the same height as each other (and i don't mind if that is 100% of the whole area - by area I mean this: http://www.joshsphotos.com/equalizingdivs/thearea.jpg

    On that note though, I don't want to make the entire frame 100% of the page - if that makes any sense? basically, I just want those boxes to be 100% height of the frame.

    I don't want to use the Javascript method which i've seen floating around, i'd prefer to use CSS as its much cleaner (and you can notice the JS method scrolling down as it equalizes etc).

    Can anyone assist me here?!

    Thanks in advance

  2. #2
    SitePoint Zealot MrDiaz's Avatar
    Join Date
    Dec 2005
    Location
    Ontario, Canada
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm why don't you just use fixed height?

    Ex.
    Code:
    div.box {height: 200px}
    div.box2 {height: 200px}
    My Website:
    www.planetdiaz.com

  3. #3
    SitePoint Member MaiZey's Avatar
    Join Date
    Dec 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    The height of the divs will be constantly changing over each page depending on the content, so using a fixed height isn't suitable in this case.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MrDiaz
    hmm why don't you just use fixed height?

    Ex.
    Code:
     div.box {height: 200px}
     div.box2 {height: 200px}
    Because when you resize the text, they'll bust out the bottom of the box.

    One True Layout deals with equal height columns.

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You need a solid layout with not to many errors, good float clearing, etc (your basic layout is in trouble in FF1.07)

    For the bottom borders you need a copy of the content container layout, at the bottom of the content wrapper

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Equalizing Divs?</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    	<style type="text/css">
    	
    	head+/**/body .fc:after{
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    	
    	/*  \*/
    	* html .fc{height:1%;}
    	*+html .fc{zoom:1;}
    	/*  */
    	
    	head+body .wrapper{overflow:hidden;}
    	.ex{padding-bottom:1000em;margin-bottom:-1000em;}
    	.x{background:#ff6600;}
    	html .q{height:10px;overflow:hidden;}
    	.y{background:#ffff00;clear:both;}
    	.contentarea .inside {padding: 0px 9px;}
    	
    	
    	</style>
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/ieonly.css" />
    <![endif]--> 
    
    </head>
    <body>
    
    <div class="wrapper">
    	<div class="header">
    	</div>
    	<div class="contentarea">
    		<div class="top">&nbsp;</div>
    		<div class="inside fc">
    			<!------- ## CONTENT AREA FOR WHOLE PAGE BEGINS ------->
    			<div class="leftbox ex">
    				<div class="curvetop"><div></div></div>
    				<div class="curvecontent">
    					<!-- CONTENT AREA FOR CURVED BOX 1 -->
    				   <p>this is the big div</p>
    				   <p>this is the big div</p>
    				   <p>this is the big div</p>
    				   <p>this is the big div</p>
    				   <p>this is the big div</p>
    				   <p>this is the big div</p>
    					<!-- END CONTENT AREA FOR CURVED BOX 1 -->
    				</div>
    				<div class="curve bot"><div></div></div>
    			</div>
    			
    			<div class="middlebox">
    				middle box
    			</div>
    			
    			<div class="rightbox ex">
    				<div class="curvetop"><div></div></div>
    				<div class="curvecontent">
    				<p>
    				this is the
    			
    				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    					<!-- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    				 -->
    				 big div
    				</p>
    				</div>
    				<div class="curve bot"><div></div></div>
    			</div>
    			
    			<div class="y q fc">
    			
    			<div class="leftbox x q">&nbsp;</div>
    			
    			<div class="middlebox q">&nbsp;</div>
    			
    			<div class="rightbox x q">&nbsp;</div>
    			
    			</div>
    			
    			
    			<div class="lbt">&nbsp;</div><div class="rbt">&nbsp;</div><div class="lbb">&nbsp;</div><div class="rbb">&nbsp;</div>
    
    
    		</div>
    		<div class="bottom">&nbsp;</div>
    	</div>
    </div>
    
    </body>
    </html>

    Mouse over Body, click on Body
    Mouse over Wrapper, click on Wrapper
    (Sorry, FF NS Moz OP only)
    demo 100% width , fixed width, 1 column, 2 column 3 column, left right


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •