homepage Welcome to WebmasterWorld Guest from 54.166.122.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
No faux columns here.
another way to get floated divs equal height
appi2

5+ Year Member



 
Msg#: 3688773 posted 7:46 pm on Jul 2, 2008 (gmt 0)

OK, this is not going to be some tutorial/in depth thang. I'm posting so others can have a play and find any problems.

One of the most common CSS questions, how can I get floated collums to all have equal height to the div with the longest/highest content. Or the many other ways that gets said.

Usual answer is use faux collums, but what about an old trick from the past.

In its very basic form apply a margin-bottom:-ve and an equal padding-bottom:+ve to the floated div. And overflow:hidden; to an outer wrapper div.

There are a couple of problems with this method, you can't use an anchor within the wrapper div and you can't set a bottom border.

Anyhoo have a play with this, try diiferent content, take out some of the divs, resize browser ( I like that one),put a width on the #wrapper on and try centering etc etc.

Tested in FF2+, IE6+, Opera9.1+, Konqueror3.5+ and Safari3.1 (NOT TESTED ON A MAC)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS float and contnet</title>
<style type="text/css">
* {
margin:0;
padding:0
}

body {
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
}

li { list-style:none; }

#wrapper { overflow:hidden; }

#colm1, #colm2, #colm3, #colm4, #colm5 {
float:left;
width:14em;
margin-bottom:-500px;
padding-bottom:500px;
text-align:left;
}

#colm1 { background:#cc6633; }

#colm2 { background:#ff6633; }

#colm3 { background:#ff9933; }

#colm4 { background:#ffcc99; }

#colm5 { background:#cc9933; }

label { }

#firstname, #lastname, #street {
display:block;
width:14em;
}

#postcode {
display:block;
width:8em;
}

img { float:left; }
</style>
</head>
<body>
<div id="wrapper">
<div id="colm1">
<h2>heading </h2>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
<div id="colm2">
<h2>Heading</h2>
<p><img src="1px-yellow.gif" alt=" " width="80px" height="80px">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aliquam sed lorem at sapien mollis
adipiscing. Praesent a felis ac elit vehicula
faucibus. Vivamus sagittis, mi nec pharetra facilisis,
arcu metus porta nisi, in lobortis sapien felis quis
metus. Ut sed massa bibendum nulla semper scelerisque.
Nulla aliquam lacus a elit. Integer placerat sodales orci</p>

</div>
<div id="colm3">
<h2>Heading</h2>
<p>Just example content, could be anything.<b>Just dont use anchors</b></p>
<form action="" method="get" name="davetheform">
<fieldset>
<legend>Your Details</legend>
<label for="firstname">First Name:</label>
<input class="input" type="text" title="Enter your first name" maxlength="" size="" name="firstname" id="firstname" value="">
<label for="lastname">Last Name:</label>
<input class="input" type="text" title="Enter your Last name" maxlength="" size="" name="lastname" id="lastname" value="">
<label for="street">Street Name:</label>
<input class="input" type="text" title="Enter your street name" maxlength="" size="" name="street" id="street" value="">
<label for="street">Post Code:</label>
<input class="input" type="text" title="Enter your postcode" maxlength="" size="" name="postcode" id="postcode" value="">
</fieldset>
</div>
<div id="colm4">
<h2>Heading</h2>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
<div id="colm5">
<h2>Heading</h2>
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
</div>
</body>
</html>



 

poppyrich

5+ Year Member



 
Msg#: 3688773 posted 2:17 pm on Jul 3, 2008 (gmt 0)

@appi2:

What are we aiming for here?

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3688773 posted 6:02 pm on Jul 3, 2008 (gmt 0)

Nice, indeed. Although -- it only works as long as the needed height expansion does not exceed the margin/padding dimension (in this case, 500px). If the column needs to adjust more than that (i.e. one column is more than 500px taller than any other), they don't expand fully.

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3688773 posted 6:08 pm on Jul 3, 2008 (gmt 0)

By the way, I am not seeing any problems with using anchors. Maybe I'm just not understanding you correctly?

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3688773 posted 9:26 pm on Jul 3, 2008 (gmt 0)

The original technique "One True Layout" needs that weird -(32768)px margin/padding workaround/hack, that's for the reason Doc states in his first post, you can't possibly guess on the actual max height of the page in reality so make it too BIG!

or for those who prefer the logical.. that number is not so random [uk3.php.net]

Doc, if you do try it with the bigger value then you should see the anchor problem, this is the problem, (well providing the rest of the x-browser theory works now, it didn't at the time it was orignally conceived)

I always thought it might well work, but even it did then it it would be a bit like using a restrictive height.. it's not really a restriction unless you hit it ;) and then unless you have the luxury of maintaining a single controlled site, just what is that optimum figure until you start hitting the bugs?

this is the reason the that appendix J exists [positioniseverything.net] and the "One True Layout" didn't "take" IMHO, - simply, it's just not true for all, if not most in this day and age of templating

the technique is a tool, like all others and one with catches, like most others, but still, along the lines of what poppyrich is saying, what is the point in having actual height as opposed to virtual/faux height? The content stops where it stops, the decoration can be suggested, which is the purpose of CSS, yes/no?

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3688773 posted 10:49 pm on Jul 3, 2008 (gmt 0)

if you do try it with the bigger value then you should see the anchor problem, this is the problem

Still not seeing a problem.

And, whether you use 500, 5000, or 32768 pixels, you still run into the same problem eventually (just less likely to do so).

appi2

5+ Year Member



 
Msg#: 3688773 posted 11:40 pm on Jul 3, 2008 (gmt 0)

Whats the point.

erm.. if you take of the margin-bottom:-500px;
padding-bottom:500px; it does that thing, and if you leave it on it does that thing ;)

It's quite useful for when your using database stuff and you can't be sure how high/long the text/img etc is going to be..

I know everybody keeps thinking 3col layout, but that's just one thing it could be used for. If you apply it to a horizontal <li> menu then if one of the <li> becomes two line (may be because the user increases text size or potrait/lanscape img) then all the li will match the height. Instead of the ugly one <li> sticking out.

The way it collapses when the browser window is resized (no sticking) is also handy.

Oh also on the choice of the height thing and 32768px (IE max padding). The person that originally came up with it still has the demo up and it fails in opera 9.5. See example below.

I used 500px so the clever people (those who actually say what if) would learn ;) In normal use saying 10,000px should give you enough room and maybe protect against yet to come browsers, maybe.

This will fail in Opera 9.5, also min/max height things to play with.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Opera 9.5 fail</title>
<style type="text/css">
#wrapper {overflow:hidden;}
/*This will fail in opera 9.5 change 32768px to 32767px or lower (CTRL-f) and it works again
so its maybe best to pick a value thats high enough eg 10,000px
*/
#collA, #collB
{
padding-bottom: 32768px;
margin-bottom: -32768px;
float: left;
width: 200px;
margin-left: 20px;

/*Possible just incase it breaks insurance ?
max-height:500px;*/
}

.subcoll
{
padding-bottom: 32768px;
margin-bottom: -32768px;
background-color: lightblue;
/*If you were using the margin padiing thang you probably wouldn't need this
but just to show it works uncomment it (remember to make the 32768px lower first)
min-height:400px; */

}
</style>
</head>

<body>
<div id="wrapper">
<div id="collA">
<div class="subcoll">sdsdsdsd</div>
</div>
<div id="collB">
<div class="subcoll">sdsdsdsd<br>jdskj<br>dsjkhkjdh</div>
</div>

</div>
<br clear="left">
<div>Soooo low</div>
</body>
</html>


anyhoo tis Just another way to paint with a hammer.

appi2

5+ Year Member



 
Msg#: 3688773 posted 2:07 am on Jul 4, 2008 (gmt 0)

DrDoc close Opera and try another browser ;)

The anchor thang doesn't affect Opera, but does in the rest.

To explain the anchor problem, when you click on the anchor, you can no longer scroll back up the page.

Create a quick demo page with lots of text and an anchor half way down the page.
eg
<a href="#foo">anchor</a>
<p>lotsof text</p
<p id="foo">Cant scoll up!</p>

To see what's happening change the #wrapper{overflow:hidden} to overflow:scroll

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3688773 posted 5:57 pm on Jul 4, 2008 (gmt 0)

I know everybody keeps thinking 3col layout, but that's just one thing it could be used for.

that's it appi, it's likely on a smaller, internal scale that's where this will work ;)

IMHO, it's not stable for a whole three column layout, but for inner elements (where there is likely not to be an fragment identifier issue) then go for it

Doc, re: the anchor/fragment issue, I had, now have again, a very simple example where IE, FF and Safari ALL chopped off the header, (it was a mock 3 col layout), not Opera this time although it had problems previously with this particular technique, I'm sure that Opera have bent over to support this but a hack is hack is hack IMHO, we can't assume stability just because one browser get it "right" now can we ;), anyway see code sample at bottom, click link at bottom of column 3, takes you back to top but chops off the header

appi, I remember when that layout came out and actually managed to help workaround some of the issues, it may very well be now that the a lot of the issues in appendix J are no longer or at least are not so apparent and it could be considered more stable, however like I said I think the Grail is a perception and I see no need for "actual" equal height it can be faked more easily, what benefits does it give, can you place image effects at the bottom of the columns?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>4 columns absolutely not</title>
<style type="text/css">
* {margin:0;padding:0}
body{text-align:center;}

#container{
width:75%;
margin: 0 auto;
text-align:left;
border:1px solid #000;
}

#wrap {
width:100%;
position: relative;
overflow:hidden;
}

#column1,#column2,#column3 {
width: 33.3%;
float:left;
padding-bottom:32768px;
margin-bottom:-32768px;
}

#column1 {background: #eee;}
#column2 {background: #cfc;}
#column3 {background: #fcf;}

#header,#footer{background:#ffc;}

#header{border-bottom:1px solid #000;}
#footer{border-top:1px solid #000;}
</style>
</head>
<body>
<div id="container">
<div id="wrap">
<h1 id="header">Header</h1>
<div id="column1">
<p>col1 Some text : some text : some text Some text : some text : some text Some text : some text : some text Some text : some text : some text Some text : some text : some text Some text : some text : some text Some text : some text : some text Some text : some text : some text Some tetext : some text end </p>
</div>
<div id="column2">
<p>col2 Some t some text Some text : some text : some text Some text : some text :</p>
<p id="theanchor">some text Some text : some text : some text Some tetext : some text end </p>
</div>
<div id="column3">
<p>col3 Some text : some text : some text Some text : some text : some text So </p>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam makes one wonder who would ever read this stuff? Bis nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae.</p>
<p><a href="#theanchor">back to the top of column3</a></p>
</div>
<!--//wrap--></div>
<div id="footer"><p>Footer</p></div>
</div>
</body>
</html>

I'm sure there might be times when this could work fine, so thanks appi for posting the refreshed idea

appi2

5+ Year Member



 
Msg#: 3688773 posted 9:22 am on Jul 6, 2008 (gmt 0)

can you place image effects at the bottom of the columns?

Not sure what you mean by 'image effects', but I do know you can't use the vertical parts of center and bottom for background images, top is fine, as well as specifying background-postion: #px #px.
Also a cheesy workaround for the no bottom border prob and even the background image is to repeat empty containers after the div wrapper with border-top.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved