CODEWITHSUNDEEP
javascripthtmlcss
CMCDragonkai
CMCDragonkai

Reputation: 6372

Using CSS to allow boxes to stretch horizontally to the space given

I've been pondering how to execute this in CSS. Refer to the 2 images below. Imagine a 2 column layout, where left column may or may not be longer in height than the right column and vice versa. Now in the pictures these are the green and red colours. I have a comment box and a number of boxes (plural) which could be divs that need to stretch horizontally to the space given. So when the right column is longer, the boxes start small under the left. But when the left column is longer, the boxes (still) start on the left, but obviously take up the full size.

I would like to know how to achieve this for the grey boxes in CSS. I know javascript can do it, but a css example would help.

Both FelipeAI and Daneild's code is correct. I chose FelipeAI's because his code has one less rule and yet achieves the same thing.

Type 1 Situation Type 2 Situation

Upvotes: 3

Views: 762

Answers (4)

Danield
Danield

Reputation: 125513

How about this:

FIDDLE

Markup

<div class="wpr">
    <div class="left"></div>
    <div class="right high"></div>
    <div class="comment"></div>
    <div class="comment"></div>
    <div class="left high"></div>
    <div class="right"></div>
    <div class="comment"></div>
    <div class="comment"></div>
</div>

CSS

.wpr
{
   width: 250px; 
}
.left,
.right {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    display: inline-block;
}
.left {
    background: green;
    float:left;
}
.right {
    float: right;
    margin-left: 50px;
    background: brown;
}
.high {
    height: 150px;
}
.comment {
    clear: left;
    overflow: hidden;
    background: gray;
    height: 60px;
    margin-bottom: 10px;
}

(css modifications adapted from @FelipAls changes to my original fiddle)

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105923

You may try to play with float, padding,margin and overflow to deal with flotting elements.

http://codepen.io/anon/pen/xCvzq

    .box {
  width:445px;
  margin:auto;
  padding:15px 0 0;
  border:solid;
  overflow:hidden;
}
.box > div {
  margin:0 15px 15px ;
  border:1px solid;
}
.green, .red {width:200px;}
div.green {
  height:191px;
  background:green;
  float:left;
  clear:both;
  margin-right:0;
}
.box div.first {
  height:115px;
}
div.red {
  float:right; 
  height:191px;
  background:red;
  margin-left:11px;
}
div.comment {
  overflow:hidden;
  background:gray;
  min-width:100px;
  clear:left;
}

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

Here's a fiddle : http://jsfiddle.net/dsScA/2/ where

  • all comments begin on left,
  • are constrained in width if there's a (long) right box along them
  • whether left or right can be longer than the other one

I adapted @Danield code but with clear: left on comments and there may be as many short comments alongside the taller right box as needed (last rule removed).

Upvotes: 0

shubniggurath
shubniggurath

Reputation: 966

Get the height of both boxes and compare them. For the shorter one, append the additional content as often as desired (can even do some math if you want multiple items (e.g. how many of item x will fit under column a so that it is about the same size as column b). Does that make sense?

This should get you started:

var greenheight = $('#greenone').outerHeight(), redheight = $('#redone').outerHeight(), difference = Math.abs(greenheight - redheight), fillerheight = $('#somehiddenfiller').outerHeight(), howmanyfillers = Math.floor(difference/fillerheight);

Then iterate and dump into or after the shorter one using .append()

Upvotes: 0

Related Questions