Take the 2-minute tour ×

I want to create a css layout:

  • 2 columns
  • Each column with a height of 100% of the window
  • Left column should be width 40% and have two rows, the height of the bottom row should be 20px and top should take up the remaining space
  • Right column should be width 60% and have two rows, the height of the top row should be 70% and bottom 30%.

I also want to be able to toggle hide/show on the second column and display another column in its place. I know how to hide and show with javascript but I dont know how to place the other column in the second column's place without using absolute positioning.

Here is an example of the two different layouts, the blue area represents the window size and the green is the divs, I didnt mark the columns but you should be able to see that there are two columns. Also I am going with margin: 0 and padding: 0, I left the space inbetween the divs to clarify the layout:

layout1rt http://imageshack.us/photo/my-images/535/layout1rt.png/

layout2z http://imageshack.us/photo/my-images/683/layout2z.png/

* UPDATE * Sorry for all the anger my question generated. I have googled and experimented with divs but havent come up with a good solution yet. The one I have doesnt really fit 100%, there are some pixel differences, I will post the code below. I made the design with framesets first and then tables and then I thought that I have to learn how divs really work sometime. Well after some days searching and reading about css float left right and so on I gave up and created this account. It seems it would be very fast for someone who understands it to make my wanted layout and thats why I didnt post my code. I could just learn by reading and playing with the answer code, but you are right, I made a mistake.

My code works 100% in Mozilla but fails in IE. * UPDATE *

* UPDATE 2 I got it all working but there seems to be a pixel error in IE so I had to add overflow: hidden to not get the scrollbars. Dont know whats the cause? UPDATE 2 *

<script type="text/javascript">
function toggleSheet(){
    if(document.getElementById("col3").style.display == "block"){
        document.getElementById("col3").style.display = "none";
    } else {
        document.getElementById("col3").style.display = "block";
<style type="text/css">
* {
    margin: 0;
    padding: 0;
#wrapper {
    width: 100%;

#col1 {
    width: 40%;

#col2 {
    width: 60%;

#col3 {
    width: 60%;

#col1top {
    margin-bottom: -20px;

#col2top {

#col1bottom {
    height: 20px;

#col2bottom {
<div id="wrapper">
    <div id="col1">
        <div id="col1top" onClick="toggleSheet();">

        <div id="col1bottom">

    <div id="col2">
        <div id="col2top">

        <div id="col2bottom">

    <div id="col3">


Thanks for your time.


share|improve this question
Do you have a question here or are you just wanting everyone to do your layout for you? –  Kyle Rogers May 22 '11 at 3:11
its should be not that tough to implement what you have shown , but post the code whatever you finished so far ,so that we can easily fix the problem. –  kobe May 22 '11 at 4:26
you have to put some code.so we can guide you.but we can't do complete thing for you.. –  Anish May 22 '11 at 6:38
There are so many articles about how to do this by just Googling for it. –  Rob May 22 '11 at 10:16

1 Answer 1

up vote 1 down vote accepted

This is really kind of a ridiculous thing to answer but I was bored.


Not a best solution by any means but it achieves what you're asking for.

share|improve this answer
Thanks for the answer but this layout has space below it, I want the layout to cover the whole window area without scrolling. I have updated my post with my code. The only thing that is missing is "col1top" which height is not covering the rest of the area. –  illion May 22 '11 at 16:23
Did you take it out of jsfiddle? I can only assume you're looking at the padding applied to the iframe. A simple inspection with firebug or webkit inspector would have shown you that the whole area is covered. –  imjared May 23 '11 at 10:43

Your Answer


