Make a div expandable without specifying any height to it

Question

This is my Html,

<div id="wrapper" class='common'>
    <div id="left" class='common'>Menu I Menu II Menu III Menu IV</div>
    <div id="right" class='common'>hello world..hello world..hello world..
      hello world..hello world..hello world..hello world..hello world..hello world..
      hello world..hello world..hello world..hello world..hello world..hello world..
      hello world..hello world..hello world..hello world..hello world..hello world..
      hello world..hello world..hello world..hello world..hello world..hello world..
      hello world..hello world..
    </div>
</div>

and this is my CSS,

#wrapper {
    overflow:hidden;
    padding:3px;
}
#right {
    float:right;
    width:70%;
}
#left {
    float:left;
    width:29%;
}
.common {
    border:solid 1px #000;
}

And here you can see the demo of it.

I am just trying to make the div with id left to be expandable based on the content of the div which is having the id right. i just tried to make that on my own but i failed. can anybody help me out by expelling some clues..?

@AmitJoki `div with id left to be expandable based on the content of the div which is having the id right.` — Rajaprabhu Aravindasamy, Apr 07 '14 at 05:27
Try this. Remove floats and add `display:table-cell` to `#right` and `#left` — James, Apr 07 '14 at 05:27
@James It just collapsed everything.. http://jsfiddle.net/NSee7/1/ — Rajaprabhu Aravindasamy, Apr 07 '14 at 05:28
@RajaprabhuAravindasamy, I'm asking whether you want "expand by dragging" as we have in fiddle. — Amit Joki, Apr 07 '14 at 05:29
@RajaprabhuAravindasamy you missed ";" after the css declaration. `display:table-cell;` — James, Apr 07 '14 at 05:30
@AmitJoki check his fiddle in the comment. He didn't add the ";" after the `display:table-cell` style. He said it was collapsing. — James, Apr 07 '14 at 05:33
@RajaprabhuAravindasamy check Ben D's answer because the structure should be as he said `table > table-row > table-cell`. Sorry i missed that out. — James, Apr 07 '14 at 05:37

score 3 · Accepted Answer · answered Apr 07 '14 at 05:34

The most appropriate pure-css mechanism for doing this is through using display:table* to declare #left and #right as sibling columns. This will cause them to display as the same height when they are cast as display:table-cell. The only caveat is that you'll need one more wrapper div because a you need a structure that looks like display:table > display:table-row > display: table-cell.

I've added a jsfiddle here: http://jsfiddle.net/QDh59/

CMPS · Answer 2 · 2014-04-07T05:35:49.327

0

If you want to use html css only, check this link:

http://css-tricks.com/fluid-width-equal-height-columns/

If you have no prob using javascript/jquery it would be much easier and more straightforward:

http://www.impressivewebs.com/equal-height-columns-with-javascript-full-version/

edited Apr 07 '14 at 05:35

answered Apr 07 '14 at 05:25

CMPS

7,733
4
28
53

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

I would suggest just using the height: attribute, with absolute positioning.

DEMO

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 07 '14 at 05:32

WASasquatch

1,044
3
11
19

score 0 · Answer 4 · edited May 23 '17 at 12:11

0

Check this answer

I don't think it's easy to make 2 divs expand alone without wrapper like the answers you see in the links.

There are techniques like Faux Columns that can help you get what you asked for too and there are many other techniques.

Using CSS:

Faux Columns and CSS Table

Using Jquery:

Equalize Heights of Divs

edited May 23 '17 at 12:11

Community

1
1

answered Apr 07 '14 at 05:39

Abzoozy

874
12
26

Make a div expandable without specifying any height to it

4 Answers4