Home/ Questions/Q 562921
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T12:36:19+00:00

I’m trying to create a two column layout with a footer. Till now the

  • 0

I’m trying to create a two column layout with a footer. Till now the result is headache 😉 Actually I’m not very experienced with css. I prefer to implement the business logic.

In the actual layout I have a problem that the right column will be placed under the left column after the left column is finished. I’m dealing with this topic now for days and it seems like I need the help from some really experienced css experts. For them this task is probably a work of minutes.

I uploaded a simplied version of the page and you see, the grey column on the left does not grow bigger when the filters in the right column are opened. As a result the table of the right column is placed below the left column. I tried to fix it with relative or absolute positioning of the left or right column. But then the foote does not move down when the size of the right column grows and consequently they overlap.

Hope to find some help here.
Thank in advance.

Here you can find the page:
link

The columns are defined in the structure.css . The things to look at are 

_#container .c_left
_#container .c_right
#container .c_footer

Edit: The problem occurs in each browser. Thus no IE6 problem. Definitely a design bug.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    [deleted my bullet points – it’s best demonstrated in html!]

    Here’s an html snippet that you can adapt to fit as required:

    <body> 
<div style="min-width:400px;">
 <div style="float:left; background:red;height:200px; width:200px;">left column</div> 
 <div style="overflow:hidden; height:300px; background:blue; color:white;">right column</div> 
 <div style="clear:both">&nbsp;</div> 
 <div style="background:black;color:white">footer</div> 
</div>
</body>

    I’ve given the divs different heights just to demonstrate the effect of the clear div forcing the footer to be pushed down.

    • 0