Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 cols - I want equal height?

    I can't find a proper way to give my 2 columns equal height. As you can see, leftcol has more content than rightcol, and is therefore logically higher.

    How can I make each of them related to each other, so I can make sure, that both of them has the same height at all times?

    http://zyph.dk/eksempler/equalheights/ (A pure example of the problem)

  • #2
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, but I would really appreciate if one could find a method, where I could avoid using images

    but thanks.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Repeat after me:

    "I will use the forum search from now on. I will use the forum search from now on."

    Repeat 100 times. This question has been asked a lot. So much, in fact, I made an example for this question:

    http://richardmedek.com/temp/example6.htm

    Hope this helps,

  • #5
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hm, I did search but didn't find anything at first glance.. Thanks alot for your example but after playing some time with it I don't quite like it.. heh. I want two seperate cols and I don't think your example is.. hm, right? And I can't see how I can use your method..

    www.zyph.dk/eksempler/equalheights/index2.html - your example (modified by me)

    What do the backslash here do?
    Code:
    font: 10px/14px verdana, sans-serif;

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    My example was only meant to show that you could apply the color of the lesser column as the background image of the wrapper, rather than the color of the column.

    If you don't like the footer, the width, height, colors, etc, you can change those. I just styled the rest up for effect.

    This:
    Code:
    font: 10px/14px verdana;
    means a 10px verdana font with a line-height of 14px.

    Anyhow, you're right... you can't use my example completely, because you are floating both columns, which takes them "out of flow," which means you can't relate their height to the height of their container, because there is no container. If you put a white border on the #maincontainer div you'll see what I mean.

    My example only works if you something contained within the wrapper to begin with. If you don't, you're kind of stuck using the ALA method.
    Last edited by rmedek; 02-14-2005 at 12:23 AM. Reason: clarification

  • #7
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I see. By the way it wasn't ment to offend you or your example.

    I have played a little more and I got to this (www.zyph.dk/eksempler/equalheights). What I did was to apply display: table; to the mainContainer and 100%; height to both of my cols. Now it works in FF, but IE won't?

    I have this feeling that it is very simple?

  • #8
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is a frequent problem and while there may be a CSS trick to make it work, I haven't found it yet. The solution I use and have come up with uses Javascript to first identify which column is longer and then setting the other column to match its height. Since this is a CSS forum I won't delve into that, but if you are interested in a javascript solution let me know.

  • #9
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I do not like the idea of using JavaScript to make the most basic functions in a layout, but it seems that it's necessary?

    I got this script from a friend, but I don't know how to use it - maybe it's something similar to the one you have?

    Code:
    <script type="text/javascript">
    var elms = ['left','middle','right'];
    
    function synchronizeDivs(){
      var maxH = 0;//minimum height
      for(i=0;elms.length>i;i++){
        maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
      }
      for(i=0;elms.length>i;i++){
        document.getElementById(elms[i]).style.height=maxH + 'px';
      }
    }
    </script>

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    There's no need, in this case, to use Javascript. You just have to be a little creative when using CSS to emulate a table-based layout. Maybe this will work for you:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>Untitled</title>
    	<style type="text/css">
    	
    		*	{
    			margin: 0;
    			padding: 0;
    			}
    		
    		html, body	{
    			height: 100%;
    			}
    		
    		body	{
    			color: #666;
    			font: 10px/14px verdana, sans-serif;
    			background: #eee;
    			}
    		
    		#wrapper	{
    			height: auto;
    			width: 650px;
    			margin: 0 auto;
    			border: solid 30px #ccc;
    			background: #fff;
    			}
    		
    		#wrapper:after	{
    			content: ".";
    			display: block;
    			height: 0;
    			clear: both;
    			}
    		
    		h1	{
    			padding: 30px;
    			}
    		
    		h2	{
    			font-size: 12px;
    			padding: 10px;
    			}
    		
    		p	{
    			padding: 10px;
    			text-indent: 10px;
    			}
    		
    		#content	{
    			float: right;
    			width: 445px;
    			border-left: solid 10px #ccc;
    			}
    		
    		#subcontent	{
    			width: auto;
    			height: 100%;
    			}
    		
    	</style>
    </head>
    <body>
    	<h1>Even Columns, again</h1>
    	<div id="wrapper">
    		<div id="content">			
    			<h2>Content</h2>
    				<p>CSS makes things certain things very hard to do.  Like, making columns appear to be the same height when there are different amounts of content inside.</p>
    				<p>The thing is, it's easy to make it harder than it has to be... the trick is to think outside of the box.  Instead of applying background colors to these columns, for example, the background color is applied to the wrapper and the margin in between the two is actually a left-side border on the floated content div.</p>
    				<p>To help illustrate this, here is some latin text!  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
    		</div>
    		<div id="subcontent">
    			<h2>Sub Content</h2>
    			<p>A very short paragraph.  Yet the height is the same as the other, longer paragraph.</p>
    		</div>
    	</div>
    
    </body>
    </html>
    Link to example. (if you're using IE you'll have to place a clearing div to clear the float) Hope this helps,
    Last edited by rmedek; 02-16-2005 at 07:52 PM.


  •  

    Posting Permissions

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