ansaurus

Question

Make Two Floated CSS Elements the Same Height

Answer 1

+1 A:

One way to do the following without using JavaScript is via a technique called Faux-Columns.

It basically involves applying a background-image to the parent elements of the floated elements which makes you believe that the two elements are the same height.

More information available at:

A List Apart: Articles: Faux Columns

Andrew Moore 2009-07-23 14:24:01

I saw this but the boxes are quite modular in design (i.e they are styled boxes) so I not to sure how ideal this solution is.

Damien 2009-07-23 14:27:59

Answer 2

+1 A:

Sounds like the holy Grail issue - check out this article: holy grail

Mike Robinson 2009-07-23 14:27:28

Answer 3

+2 A:

There are several ways with varying degrees of complexity and success. One technique that works for me (~~I do not remember where I saw it first~~ link, problems) is the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
    <title>test</title>
    <style type="text/css">
        #page {
            clear:both;
            overflow:hidden;
            width:100%;
        }
        #page div {
            margin:0 0 -6000px 0; /* nothing special about 6000px */
            padding:0 0 6000px 0; /* any large enough value will do */
        }
        div.article {
            background:blue;
            float:left;
            width:70%;
        }
        div.sidebar {
            background:red;
            float:right;
            width:30%;
        }
    </style>
</head>
<body>

<div id="page">
    <div class="article">
        <p>Some content</p>
    </div>
    <div class="sidebar">
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
    </div>
</div>
</body>
</html>

Sinan Ünür 2009-07-23 14:30:21

Almost there, expect it cuts of the bottom of the box. I'll update as I progress

Damien 2009-07-23 14:34:40

@Damien yes, `border-bottom` on the contained `div`s will be cut off. I normally design around that but then my designs are not that complicated.

Sinan Ünür 2009-07-23 14:39:07

Also note, this layout breaks with anchors (e.g. FAQ pages)

Mike Robinson 2009-07-23 19:01:24

@Mike Robinson: Oh my! I just tried it out. Hmmmmmmmmm!

Sinan Ünür 2009-07-23 19:13:17

Answer 4

+1 A:

Percentages rarely work as heights in CSS. To make the child height the same as their parent, you can use a bit of Javascript. Here's what it would look like in jQuery:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
     $(function() {  
      var containerheight = $("outerBox").height;
      $(".outerBox").children().css("height",containerheight)
    </script>

If you wanted to just make the boxes within a container the same size, the Filament Group has a great plugin for equalizing box heights with jQuery and it's very well documented:

Equal Heights With jQuery

Andrew 2009-07-23 14:33:34

Answer 5

A:

Vote this down to infinity if you like but I think I might as well wack this part of the design in a table...

Damien 2009-07-23 14:43:05

Answer 6

+1 A:

Why don't you use a table?

This is getting ridiculous. User wants to see a table. HTML language provides a table element to achieve exactly the goal user wants. Yet, we use a whole library (I an looking at JQuery answer) to achieve the goal w/o a table even though it means a script running on client!

buti-oxa 2009-07-23 14:49:06

jQuery is a pretty lightweight library all things considered and with connection speeds getting faster and faster, it's pretty much a non-issue for most users.Tables are the easiest answer, but not always the best one. For displaying data in fashion similar to a spreadsheet, then tables are by far the way to go, but for a laying out what I'm sure Damien hopes to be a clean, semantic website, it's not the ideal solution.

Andrew 2009-07-23 15:15:00

The problem is not in the size but in the act of scripting. You solve a static layout problem by dynamic way of the scipt. On slow computer, you can see your layout change as script executes. If a user has switched Javascript off, it gets wrong layout. One should try separate HTML(content) from CSS (layout) from Javascript (action) and not solve problems of one with another.

buti-oxa 2009-07-23 15:32:07

As with anything else, it comes down to client or personal preference. I believe very much in separation of content and layout, but what it really comes down to is your audience. For personal projects, I'll assume a few things about my target audience (Flash support, Javascript on, high speed connections, modern browsers) and I'll develop accordingly. Analytics data usually confirms my assumptions on all these points. In the end, if no easy (or semantically valid) answer is available within HTML/CSS, than I see no point in using a bit of JS to make up for these shortcomings.

Andrew 2009-07-28 19:32:00

I made this the answer because it is what I did. Tables are horrible for layout but all the over solutions also had problems. I concluded that there is no sensible way to do this with CSS without hacks, a lot of which do not work in same cases (such as boxes with borders all around).

Damien 2009-08-04 16:03:17

Answer 7

A:

I think that tables should be used for what they were created for - and that is storing data, not showing layout.

If You want good, cross-browser & hack-free CSS solution - check this article.

zeroDivisible 2009-08-07 08:22:11

While I agree with your tables comment, that solution is essentially committing the same sin of un-semantic markup. Using a table for something that isn't really a table (doesn't necessarily have to be strictly data) is committing the same sin because the content is not supposed to be a table. Multiple un-semantic divs which are made purely to make background color faux columns is just as bad on that front, IMO. If you have those wrappers already, for semantic reasons (page > content > section > article etc), then I guess it would work.

kmiyashiro 2009-08-07 14:38:15

ansaurus

tags:

views:

answers:

Make Two Floated CSS Elements the Same Height

related questions