CODEWITHSUNDEEP
htmlcss
aztack
aztack

Reputation: 4594

3 column layout with middle column fluid and appear first in HTML code, others fixed width

I want to make a classic 3-column layout like this:

|  |      |  |
|L |  M   |R |
|  |      |  |

and I was asked to use following html structure: as you can see, the Main div is the first node of #container

<body>
  <div id="container">
    <div id="M">Main</div>
    <div id="L">Left</div>
    <div id="R">Right</div>
  </div>
</body>

How to do that with and without css3 new features?

UPDATE: #L and #R has a fixed width, say, 200px. #container has the same width of window(ignore body margin) #M's left border touchs right border of #L and #M's right border touchs left border of #R.

Upvotes: 2

Views: 1110

Answers (3)

Josh Powell
Josh Powell

Reputation: 6297

This is what I would do to achieve this layout.

#M {
  width: 60%;
  height: 500px;
  margin: 0 auto;
  background: brown;
  position: relative;
  top: 0;
}

#L {
  width: 20%;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  background: #c1c1c1;
}

#R {
  width: 20%;
  height: 500px;
  position: absolute;
  top: 0;
  right: 0;
  background: #c1c1c1;
}

This way is 100% responsive but if you wanted a fixed width for the outer divs you could do that as well.

JSFIDDLE

Upvotes: 3

MildlySerious
MildlySerious

Reputation: 9170

Edit: This is actually possible with flexboxes. I really wouldn't want to sacrifice the browser support for the order of the markup, though.

This solution doesn't work with the #M element at the top.. and except for some trickery using positioning I don't think this is possible.

If you move the #M element to the bottom, this would work:

#M {
    background-color: #eeffff;
    height: 200px;
    margin: 0 200px;
}
#L {
    background-color: #ffeeff;
    float: left;
    height: 200px;
    width: 180px;
}
#R {
    background-color: #ffffee;
    float: right;
    height: 200px;
    width: 180px;
}

In that case, unless the parent container is fixed width, the middle would be flexible width while left and right are static. But you could also set margin and width of the #L and #R elements as percentage, for example.

Upvotes: 0

chris
chris

Reputation: 4867

Eventually something like this one?

#M {
  display:inline-block;
  background:red;
  width:33%;
}


#L {
  float:left;
  display:inline-block;
  background:lime;
  width:33%;
}


#R {
  float:right;
  display:inline-block;
  background:yellow;
  width:33%;
}

Upvotes: 0

Related Questions