CODEWITHSUNDEEP
css
lidongghon
lidongghon

Reputation: 323

Responsive CSS Approach

The figure below is an illustration of what Im trying to get. The 1st figure represents the longer width and the 2nd figure represents the shorter width. All the red blocks stays at the right and left position and the yellow block should follow the width of the container.

1:enter image description here https://i.sstatic.net/6bHTo.jpg

heres my current approach

/* the one with black border :) */
.container{
    position: relative;
}
/* red blocks have auto heights depends on its content */
.red{
    position: absolute;
    top: 0;
    width: 100px;
}
.red-left{
    left:0;
}
.red-right{
    right:0;
}
/* yellow block follow the width of the container but should leave spaces for the left and right */
.yellow{
    margin: 0 110px;
}

Im almost satisfied with this approach however, I noticed that when the red blocks are higher than the container, the container doesnt auto follow the height of its contents. I understand that its impossible to auto height the container because the children are in position absolute. :)

Upvotes: 0

Views: 123

Answers (4)

Raul Valverde
Raul Valverde

Reputation: 587

Using:

div {
    display: table;
    width: 100%;
    table-layout: fixed;
}

div > div {
    display: table-cell;
}

Review full code:

http://jsfiddle.net/BF6La/

Upvotes: 0

Lucas Lazaro
Lucas Lazaro

Reputation: 1526

Have you consider using CSS3 Flex Box? It would go like this:

HTML:

<div class="container">
   <div class="red red-left">red-left<br>red-left<br>red-left<br>red-left<br>red-left</div>
   <div class="yellow">yellow<br>yellow</div>
   <div class="red red-right">red-right</div>
</div>

And Css:

.container{
  display: -webkit-box;
  -webkit-box-orient: horizontal;

  display: -moz-box;
  -moz-box-orient: horizontal;

  display: box;
  box-orient: horizontal;        
}

.red{
    background-color:red;  
    width:100px; 
}

.yellow{     
    background-color:yellow;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

​ ​Check out this Fiddle:

http://jsfiddle.net/lucaslazaro/sjYNy/

EDIT:

To know more about Flex Box I recommend this quick tutorial: http://www.html5rocks.com/pt/tutorials/flexbox/quick/

Upvotes: 1

lidongghon
lidongghon

Reputation: 323

My Own Demo to make it easier.

What we can see here is the content overlapsed the container.

Upvotes: 0

yckart
yckart

Reputation: 33408

Maybe that helps:

HTML

<div class="container">
    <div class="red red-left">red-left<br>red-left<br>red-left</div>
    <div class="yellow">yellow<br>yellow</div>
    <div class="red red-right">red-right</div>
</div>

​

​ CSS

/* the one with black border :) */
.container{
    position: relative;
}
/* red blocks have auto heights depends on its content */
.red{
    position: absolute;
    top: 0;
    width: 100px;
    background:red;
    height:auto
}
.red-left{
    left:0;
}
.red-right{
    right:0;
}
/* yellow block follow the width of the container but should leave spaces for the left and right */
.yellow{
    margin: 0 110px;
    background:yellow
}

​

​

​​DEMO

Upvotes: 0

Related Questions