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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [CSS] column layout without explicitly setting sizes, how!?

    Having trouble creating a layout with certain conditions like this: (with CSS)



    Using tables, it's no problem. But I'm trying to accomplish the same result with CSS instead of tables, and whatever I try (span/div with float, multiple containers, etc), nothing seems to work, or suddenly B wraps under A and C instead of keeping column, etc...

    My needs: column A should be as wide as required for its content. So I don't want so specify an explicit size in px or % there.
    For the remaining space (so B+C), I can specify the size of C in px or % (for example C is 20% or C is 150px wide), and B should get whatever is left.
    I also don't want to explicitly specify the height for the columns, they should be as tall as required for the content (so adding more content = column gets taller).

    Now, the thing is, the entire width (A+B+C) is not known/fixed in advance. It's dynamic, depending on the content and other layout settings.

    What is the most compatible, cleanest way to pull this off?

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Something like that ?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    		<title>3 columns</title>
    		<style type="text/css">
    			.a,.b,.c {
    				background:red;
    			}
    
    			.a {
    				float:left;
    				margin-right:3%;
    			}
    			.c {
    				float:right;
    				margin-left:3%;
    				width:40%;
    			}
    
    			.b {
    				overflow:auto;
    			}
    		</style>
    	</head>
    	
    	<body>
    		<div class="a">as wide as required for its content</div>
    		<div class="c">C in px or %</div>
    		<div class="b">b get whatever is left</div>
    	</body>
    	
    </html>
    You'll need to give .b the layout to make it work properly in IE6-
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Candygirl View Post
    Something like that ?
    Great, thanks a lot!!
    The overflow:auto for the middle div was just what I needed, seems to do the trick wonderfully!

    You'll need to give .b the layout to make it work properly in IE6-
    Not sure if I understand what you mean here, do I need to add any IE6-specific CSS for this to work, or..?


  •  

    Tags for this Thread

    Posting Permissions

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