I want to create a layout like this: The left column (yellow): width 150px constant - height dynamic The middle column (azure): width dynamic - height dynamic The right column (green): width 150px constant - height dynamic The footer (red): width dynamic - height constant I'm looking for a CSS-only solution. jsFiddle here .

htmlcss

yossi

Reputation: 296

How to make a dynamic layout only by CSS

I want to create a layout like this:

The left column (yellow): width 150px constant - height dynamic
The middle column (azure): width dynamic - height dynamic
The right column (green): width 150px constant - height dynamic
The footer (red): width dynamic - height constant

I'm looking for a CSS-only solution.

jsFiddle here.

Upvotes: 4

Answers (5)

micnic

Reputation: 11245

http://fiddle.jshell.net/2bSaP/show/

HTML :

<div id="container">
    <div id="yellow"></div>
    <div id="blue"></div>
    <div id="green"></div>
    <div id="red"></div>
</div>

CSS :

body {
    margin: 0;
}

#yellow {
    background: yellow;
    position: absolute;
    width: 150px;
    top: 0;
    left: 0;
    bottom: 155px;
}

#blue {
    background: rgb(98, 196, 255);
    position: absolute;
    top: 0;
    right: 155px;
    left: 155px;
    bottom: 155px;
}

#green {
    background: green;
    position: absolute;
    width: 150px;
    top: 0;
    right: 0;
    bottom: 155px;
}

#red {
    background: brown;
    position: absolute;
    height: 150px;
    left: 0;
    right: 0;
    bottom: 0;
}

Upvotes: 5

Aniket

Reputation: 9758

It's a little difficult to understand what your question is, but from what I gather, I was able to get to this solution: Fiddle

HTML

<div class='container'>
    <div class='col col-left'></div>
    <div class='col col-mid'></div>
    <div class='col col-right'></div>
    <div class='col col-bottom'></div>
</div>

CSS

.container {
    width: 960px;
    margin: 0 auto;
}

.col {
    margin: 0;
    padding: 0;
    float: left;
}

.col-left {
    width: 25%;
    height: 200px;
    background: #f90a7b;
}

.col-mid {
    width: 50%;
    height: 200px;
    background: #e3f606;
}

.col-right {
    width: 25%;
    height: 200px;     
    background: #46c704;
}

.col-bottom {
    width: 100%;
    height: 200px;
    background: #0654e0;
}

Upvotes: 0

Victoria Ruiz

Reputation: 5013

I'm really not sure what you're trying to accomplish. Is it supposed to look the way MusikAnimal's jsfiddle looks?

If so, I'd go for a different structure (complete with the right heights and widths...):

<div id="for3columns" style="height: 500px;">
  <div id="yellow_column" style="float: left; width: 20%; height: 100%"></div>
  <div id="blue_column" style="float: left; width: 60%; height: 100%"></div>
  <div id="green_column" style="float: left; width: 20%; height: 100%"></div>
</div>
<div id="lower_red" style="clear:both; width: 100%; height: 100px;"></div>

Upvotes: 0

MusikAnimal

Reputation: 2416

Not sure if this is what you wanted, but I got rid of all those height rules for #Blue and just added height: 100%, then gave #Red a higher z-index (55, for instance).

Now the center square appears to always be blue.

http://jsfiddle.net/qXKZh/38/

Hope this helps

Upvotes: 0