CODEWITHSUNDEEP
javascripthtmlcss
Dan
Dan

Reputation: 862

How to arrange and style child columns of dynamic height and width such that the parent element has the right dimensions, without using tables?

Sorry, I know that title isn't very parseable (or even complete). This should do better than words:

layout example

Note that x and y are dynamic heights based on the contents of those children, and there is no guarantee that one will be larger than the other.

I don't want to use tables and I don't want to rely on CSS3 (for solutions like calc.) I think this means that one of the two columns must be taken out of the "static" layout, because of the dynamic width requirement. And because of that, I think that means there is no way, outside of Javascript, to size the parent container to the max of its children columns' heights.

I hope someone proves me wrong, because I'd love to do this in CSS. Thank you, wonderful SO community!

Upvotes: 0

Views: 40

Answers (1)

Oriol
Oriol

Reputation: 288550

Demo

<div id="wrapper">
    <div id="sidebar"></div>
    <div id="main"></div>
</div>

#wrapper, #main{
    overflow: hidden;
}
#sidebar{
    float: left;
    width: 100px;
}

Upvotes: 1

Related Questions