Home/ Questions/Q 8701731
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T02:28:18+00:00

I have a two-column layout, composed of fixed-width floated divs. Inside the first column

  • 0

I have a two-column layout, composed of fixed-width floated divs. Inside the first column is an extra wide element. So the html layout looks something like this:

<div id="container">
    <div id="column1">
        ...short content...
        <div id="extra-wide">
            ...wide content...
        </div>
    </div>
    <div id="column2">
        ...long content...
    </div>
</div>

As annotated, the first column contains a short amount of content and the second column contains a long amount of content. The CSS looks something like this:

#column1 { width: 200px; }
#column2 { width: 100px; }
#extra-wide { width: 250px; }

So the extra-wide element is actually wider than its parent, column1. And I don’t know the heights of any of the elements ahead of time — they are all variable.

The issue here is that column2 appears overlapped over the extra-wide element in column1. Here’s a jsfiddle to help visualize this: http://jsfiddle.net/e3KNg/ (This fiddle has some content inserted and colors added to make what’s happening more clear). Here’s a screenshot:

column2 overlapping extra-wide

Without altering the basic HTML structure or the widths of the three elements, is it possible (without the aid of Javascript) to force the extra-wide element in column1 to appear below column2? Here is the effect I’m trying to achieve:

column2 pushing extra-wide down

I know this can be done by rearranging html elements or by using Javascript, but I’m looking for a solution within the above constraints. I tried using clearing divs in various places, removing or adjusting floats, and trying some overflow settings, but could not achieve the effect I was looking for.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    looking at it, without set heights on the content elements or using javascript to work their heights out or set positioning on the extra-wide element, what you are looking for can’t be achieved.

    Heres a fiddle which works using an absolute positioning of the extra wide element and a top value, as well as using some clever css to make the columns the same height.

    http://jsfiddle.net/yKRu4/1/

    As i siad this works, but i honestly feel what you are looking for can’t be achieved with the restrictions you have put in place.

    • 0