CODEWITHSUNDEEP
csslayout
Cody Smith
Cody Smith

Reputation: 2732

Inline & fixed CSS layout

I have the following layout...

enter image description here

The green elements repeats downward (they're tiles for a web-app).

The red column is a div with a fixed width, and the pink element also has a fixed size. The blue element is used elsewhere, and normally just takes the place of the green to sit in the red box - but under a special use case we need an options panel to come up on the side (the pink thing). So basically the blue element is a plain old div, no float, nothing like that.

Whenever I add the pink element, it appears below the blue. So I switched both blue and pink to inline-block, issue there is that the blue no longer grows to fill the extra space. So I'm at a loss.

How could I go about doing this, assuming that the red div cannot be changed? Thanks!

P.S. I don't need a complete code answer, just point me in the right direction and I'll fill in the dots.

Upvotes: 0

Views: 54

Answers (1)

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/mQN9Z/2/

CSS

  .container {
    width: 100%;
    display: Table;
    background-color: black;
    height: 400px;
    padding: 10px;
}
.left {
    display: Table-cell;
    background-color: #0054A6;
    width: 70%;
}
.right {
    display: Table-cell;
    background-color: #EC008C;
    width: 30%;
}

HTML

<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>

Upvotes: 1

Related Questions