How do I get a fixed positioned footer, fixed width right column, left column for the rest using CSS lay-out?


Tags: html,css,layout

Problem :

My problem seems very basic but I can't get it to work.

I'm trying to create a lay-out with no header, a footer always at the bottom and two columns. The right column has a fixed width (770px) and the left column should use the rest of the space. In the left column OpenLayers will be used which will fetch Google Maps images to fill the space.

The page needs to be visible on smaller screens as well and should work in FF, Chrome and IE7+. I'm starting with a wrapper that has a min-width of 1200px. This is for the smaller screens. Scrollbars will appear then. Next I've created 3 divs inside the wrapper: leftframe, rightframe, bottomframe. The bottomframe used this CSS:

bottom: 0; 
height: auto; 
left: 0; 
overflow: hidden; 
position: fixed; 
right: 0; 
top: auto; 
width: auto; 
min-width: 700px; 
z-index: 5000;

This works good. The footer is always nicely at the bottom.

Now the problem comes. When I resize my viewport or show the page on a small screen the leftframe must resize to fill the remaining space. I've tried a lot: floats, positions. What seems to be working is to absolute position the right frame and give the left frame a margin-right the same as the width of the right frame (770px):

#leftframe { 
  width:auto; 
  height: 100%; 
  margin-right: 770px;
}
#rightframe {
  position: absolute;
  right: 0;
  top: 0;
  width: 770px;
}

This seems to work as well. At least for the width.

The right frame is dynamically filled with data I get using AJAX. In some occasions the returned data is larger than the min-height I've given to the wrapper. This is fine for the right frame, its height is adjusted but the height of the wrapper isn't and thus the height of the left frame isn't adjusted as well. This result in a right frame that is higher than my left frame and a blank space is between my left frame and footer.

How to solve this? Preferable without using jQuery or similar but with CSS only.

[Edit] Using the example provided by Zuul I've created these few lines of jQuery and it seems to work now. These lines are called when I'm finished processing the AJAX data.

var currentHeightRight = parseInt($("#rightframe").css("height").replace("px", ""), 10);
var currentHeightWrapper = parseInt($("#wrap").css("height").replace("px", ""), 10);
if (currentHeightRight > currentHeightWrapper)
{ 
  $("#wrap").css("height", currentHeightRight);
  $("#map").css("height", currentHeightRight);
}


Solution :

If I've understood your problem correctly, I've made a Fiddle to show a way to deal with your problem:

http://jsfiddle.net/zuul/TdTCU/

Additionally, there's a button there, to simulate the global resize :)

Notes:

The better solution for this kind of problems is the absolute position of elements inside a wrapper. Basically setting up a structure for all rest.


    CSS Howto..

    how to display a list inline using HTML and CSS

    How to build those rectangular with picture and text css bootsrap? [closed]

    how can style be added to the first 2 list elements using CSS

    CSS how to make an element fade in and then fade out?

    how to configure .htc files to work on nginx

    How to change url of image which is generated dynamically just by using CSS and media queries?

    How prevent inheriting “position: relative” CSS

    How to give cross browser transparency to element's background only?

    How to dynamically alter the CSS of a pseudo element with JQuery?

    How do I get my tabs to line up properly using CSS?

    How to use bootstrap css tables to display data from MySQL tables?

    How to center right-aligned numbers in table column using CSS?

    How to expand text to full DIV width

    How to convert complex xpath to css

    How to vertically align Facebook and Twitter share buttons

    How to convert UPPERCASE text to Title Case using CSS

    How can I nullify css property?

    how to open specific div by class name onclick

    How do I show annotations on my Google Chart that extracts data from a Google Spreadsheet?

    How to create a simple social sharing dropdown menu in CSS/HTML

    How to have a common header and footer in a HTML CSS web app?

    How to shorten blockquote to wrap around floated div?

    how to add dots (…) with the same width?

    How to connect CSS files to my JSP pages stored in Web-Content (Dynamic Web Project)

    Table borders not showing correctly

    how to vertically align this div?

    How to force Visual Studio to honor the BOM at the start of a UTF-8 encoded CSS file?

    How do I line up my textboxes without using a table? html/css

    How to avoid the overlapping of the button?

    Browser sizing Ctrl +/- :: How to manipulate settings?