13

I need some help with positioning divs. The HTML structure is as follows:

<div class="container">
    <div class="item">
        <div class="left">
            lorem lorem
        </div>
        <div class="right">
            <p>right</p>
            <p class="bottom">bottom</p>
        </div>
    </div>
</div>

And I have the following CSS:

.container {
    float: left;
    padding: 15px;
    width: 600px;
}
.item {
    float: left;
    padding: 15px;
    width: 570px;
}
.left {
    float: left;
    padding: 40px 20px;
    margin-right: 10px;
}
.right {
    position: relative;
    float: left;
}
.bottom {
    position: absolute;
    bottom: 0;
}

The width and height of the left div is dynamic.

What I want to achieve is:

  1. Make the height of the right div equal to height of the left div.
  2. Make the width of the right div fill the rest of the div with class item.
  3. The paragraph with class bottom should be at the bottom of the right div.

Here is a simple image that represents my goal: enter image description here

And a link to a JSFiddle demo.

3
  • Are you looking for a purely CSS solution or would you accept JavaScript?
    – j08691
    Apr 6, 2013 at 16:07
  • If it is not possible in pure CSS I would accept Javascript solution, but CSS would be better Apr 6, 2013 at 16:11
  • This is possible in pure CSS with IE8+
    – FelipeAls
    Apr 6, 2013 at 16:17

4 Answers 4

10

Getting the correct position and width of .bottom appears to be the biggest hurdle for a cross-browser, CSS solution.

Options

1. Floats

As @joeellis demonstrated, the flexible widths can be achieved by floating only the left column, and applying overflow:hidden to the right column.

The position of .bottom cannot be achieved in any browser. There's no CSS solution for floated columns with equal, variable height. An absolutely positioned .bottom element must be inside the right column div, so that 100% width would give it the correct size. But since the right column won't necessarily be as tall as the left column, positioning .bottom with bottom:0 won't necessarily place it at the bottom of the container.

2. HTML tables and CSS tables

The flexible widths can be achieved by giving the left cell a width of 1px and not specifying a width for the right cell. Both cells will grow to fit the content. Any extra space will be added to the right cell alone.

If .bottom is inside the right table cell, the position can't be achieved in Firefox. Relative position has no effect in a table cell in Firefox; absolute position and 100% width would not be relative to the right table cell.

If .bottom is treated as a separate table cell in the right column, the correct heights of the right and bottom table cells cannot be achieved in any browser other than Firefox. Table cells aren't flexible in height the same way they are in width (except in Firefox).

3. CSS3 flexbox and CSS3 grids

Flexbox and grids are the promising layout tools of the near future. But flexbox isn't supported by IE9 or earlier, and grids aren't supported by any browser other than IE10. Haven't tested if either can achieve this layout, but browser support may prevent them from being an option at present.

Summary

  • Floats don't offer a solution for any browser.
  • HTML tables and CSS tables don't offer a cross-browser solution.
  • Flexbox doesn't offer a potential solution for IE9 or earlier (and may or may not offer a solution to other browsers).
  • Grids only offer a potential solution to IE10 (and may or may not offer a solution there).

Conclusion

There doesn't appear to be an adequate CSS solution at present, one that would work in enough relevant browsers, with the possible exception of flexbox (if support for IE9 and earlier isn't required).

jQuery

Here's a couple modified demos that use jQuery to force the columns to have the same height. The CSS and jQuery for both demos is the same. The HTML only differs by how much content is in the left and right column. Both demos tested fine in all browsers. The same basic approach could be used for plain JavaScript.

To keep things simple, I moved the internal padding for the left and right div to a child element (.content).

3
  • @user1292810: I added a simple jQuery solution, with a couple demos. Apr 7, 2013 at 17:47
  • Thanks for your comprehensive answer. I must support IE7 and newer. Against, there is already jQuery included to that website, so I stay with jQuery solution. Apr 7, 2013 at 20:37
  • Flexbox does work as expected except on IE9-. It still needs 3 different syntax due to the evolution of the spec but it works. Working bricks (with all prefix and syntax in a few well-named classes) can be found on knacss.com/builder (click on 'Classic' and then search for flex)
    – FelipeAls
    Apr 8, 2013 at 9:12
9

Sibling elements of same height and staying on the same row can be achieved by displaying them as table-cell and parent as display: table.
Working fiddle: http://jsfiddle.net/SgubR/2/ (which also display the overflow: hidden along a floating element technique for creating a column. The latter needs a clearfix)

Table-cell in CSS uses any HTML element you want (section, div, span, li, whatever), its semantics is unrelated to table, tr and td elements used for table layout (except that the visual result is the same, that's what we want).

  • display: table is set on a parent
  • display: table-row may be used on an element in-between but if it works without it, fine
  • display: table-cell is set on each child
  • a width is set on none, some or all these "cells". Browser will adapt both to content and widths set in order to calculate their widths (and total width of parent, obviously)
  • table-layout: fixed will tell browsers to switch to the other table layout algorithm where they don't care about the quantity of content, only to widths set by CSS
  • vertical-align: top will be needed in most cases (but you may set other values, great for complex layouts)
  • margins aren't applied on "cells", only padding. Margins only apply on table itself. Though you still can separate "cells" with border-collapse: separate and/or border-spacing: 4px 6px

Compatibility: IE8+
Fallback for IE6/7 if needed is exactly the same as for inline-block

Longer explanations in previous answers: here and there with also the good old method of faux-columns (your design must be thought with this technique in mind)

1
  • Good way to make all children adjust well to parents size, the rest only talk about one.
    – Karthik T
    Jan 16, 2014 at 10:45
2

Just add an oveflow to the right column and don't float it.

.right {
  position: relative;
  overflow: hidden;
}

This will make right to fill the rest of the width.

1
  • 2
    Though that'll create a column along a floating element, that won't make height of the right div equal to height of the left div as requested by OP
    – FelipeAls
    Apr 6, 2013 at 17:00
1

Something like this might work:

http://jsfiddle.net/PCvy9/2/

The main key of what you're looking for lines in the:

 .right {
   overflow: hidden;
   background-color: #C82927;
 }

This is due to something called the "block formatting context." Great reasoning and tutorial as to why here: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

However, their heights are not completely linked; in this example, your left side block's height would still need to be manually set (as it's a floated container)

5
  • That doesn't fill the height, though (there was a typo in the original JSFiddle; the bottom class wasn't applied: jsfiddle.net/PCvy9/3 Apr 6, 2013 at 16:35
  • No, unless you set a heights on the those two elements, or a height on the wrapping container and add min-height: 100% to the two child containers, they won't fill out. That's because the lorem ipsum container is floated.
    – joeellis
    Apr 6, 2013 at 16:42
  • +1 Clever solution for the flexible-width part of the problem, even if it doesn't address equal heights. Didn't have any luck with this in IE8 or earlier using IETester, but not sure if that's due to IETester. Apr 6, 2013 at 17:00
  • 1
    @MattCoughlin IMO IETester is a piece of ... because it's unreliable. Is this bug real or due to the tool used for testing? Is my bugfix OK on IE or just on IETester? I've seen countless hours lost due to this tool. Better use VMs from modern.ie , these at least are reliable (lesser IEs are sufficiently unreliable by themselves not to add an extra layer...)
    – FelipeAls
    Apr 6, 2013 at 21:15
  • I went back and tested on Litmus (instead of IETester) and it's fine in IE7 and later. Apr 8, 2013 at 13:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.