CSS positioning, auto-resize, top & bottom alignment

Question

I have one main DIV container (orange) and a few floating DIV containers inside (gray and red). These inner DIVs have some content and main DIV has to fit to the height of one which have higher height. Problem I'm facing is related to very first DIV (gray one). Depending of content inside that DIV I have to keep it at max height, so if it’s shorter than any other DIV it needs resize to max height, if it’s larger main DIV fits to its size.

enter image description here

That DIV also contains two DIVs which I’m trying to position, one at the top, and another one at the bottom of DIV. Whatever I tried so far, failed.

I’m sure that CSS properties position and bottom (or top) are relevant to solve this but any combination I have tried so far didn’t help.

<!-- MAIN CONTAINER: Orange -->
<div style="overflow:hidden; width:550px; background-color:#ffcc00">

  <!-- INNER CONTAINER #1: Gray -->
  <div style="overflow:hidden; float:left; width:180px; margin:5px 5px; background-color:#eeeeee">

    <!-- TOP BLOCK -->
    <div style="">This block goes top!</div>

    <!-- BOTTOM BLOCK -->
    <div style="">This block goes bottom!</div>

  </div>

  <!-- INNER CONTAINER #2: Red -->
  <div style="overflow:hidden; float:left; width:250px; margin:5px 5px; background-color:#ff0000">Not that important block<br />with some content<br />...</div>

</div>

To keep my code clear I post just simple structure and need CSS solution to get it works. I can also post complete code but respect your time and there’s probably nobody crazy enough to read tones of irrelevant lines.

Course, margin and background-color properties are here just to provide visual aid.

So basically my question is: How to keep Inner DIV #1 at max HEIGHT compared to all other inner DIVs and how to make top and bottom DIVs work inside parent element. Course, I don't need top and bottom blocks mix one atop another if they are huge, than they have to increase size of parent DIV (and main container).

Surely, I can do it easily with JavaScript workaround, dealing with offsetHeight property of elements but that can't be solution (CSS only). Also, I don't request for whole cross-browser solution, anything that works with IE8+ and newer Chrome, Firefox and Opera browsers is perfectly acceptable for me.

I was searching SO and other relevant resources for days but couldn't find anything usable. Not even sure it's possible now. So if there's anything I can do to make it works, let me know, any comment, suggestion, tip or trick is warmly welcome.

Examples of my goal:

enter image description here

At the end, I want to simulate this effect (somehow) with DIVs and CSS only.

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200" valign="top">Top</td>
    <td width="350" rowspan="2" valign="top">Side</td>
  </tr>
  <tr>
    <td valign="bottom">Bottom</td>
  </tr>
</table>

can you make a post on js fiddle and link it within your question — Gerwin, Jan 13 '15 at 14:35
@Gerwin, all relevant code is already there in the question. — Wh1T3h4Ck5, Jan 13 '15 at 14:42
@Kenyanke Nope, using tables can't be a solution for many different reasons. I know it's possible with tables and know how to do it. Thanks for suggestion, anyway. — Wh1T3h4Ck5, Jan 13 '15 at 14:44
I believe you need to use javascript for this. Have you considered using isotope? Check it out, it might come handy. http://isotope.metafizzy.co/ — artuc, Jan 13 '15 at 14:46
@Wh1T3h4Ck5 I didn't ask for more relevant code, I asked you to put your code in jsFiddle so that I can easily make changes — Gerwin, Jan 13 '15 at 14:48
@Gerwin, Sorry didn't understand. http://jsfiddle.net/6hwLaeqy/ — Wh1T3h4Ck5, Jan 13 '15 at 14:48
@artuc, To be honest, never heard of isotope. I'll certainly check it out. Now, I seek for CSS-only solution, but if nothing helps, there's always great having an extra option. — Wh1T3h4Ck5, Jan 13 '15 at 14:50
Is this what you are looking for? using flexbox http://codepen.io/anon/pen/ogZbgE — Justin Breiland, Jan 13 '15 at 15:19
@JustinBreiland Definitely not. First you fixed height of main container which is not acceptable and I can't say is it 100px or 5000px. 2nd, "red div" has more height than needed. 3rd "bottom div" isn't at the bottom. — Wh1T3h4Ck5, Jan 13 '15 at 15:23

Paulie · Answer 1 · 2015-01-13T15:29:35.137

1

A page element with relative positioning gives you the control to absolute position children elements inside of it.

<html>
<body>
<!-- MAIN CONTAINER: Orange -->
<div style="position:relative; overflow:hidden; width:550px; background-color:#ffcc00">

<!-- INNER CONTAINER #1: Gray -->
<div style="overflow:hidden; float:left; width:180px; margin:5px 5px; background-    color:#eeeeee">

<!-- TOP BLOCK -->
<div style="position: auto; top: 0; left: 0; margin:5px 5px; background-color:#eeeeee">This block goes top! BLAH BLAH BLAH</div>

<!-- BOTTOM BLOCK -->
<div style="position: auto; bottom: 0; left: 0; margin:5px 5px; background-color:#eeeeee">This block goes bottom! BLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAH</div>



</div>

<!-- INNER CONTAINER #2: Red -->
<div style="position:relative; overflow:hidden; float:left; width:250px; margin:10px 5px; background-color:#ff0000">Not that important block<br />with some content<br />...</div>

</div>

</body>
</html>

edited Jan 13 '15 at 15:29

answered Jan 13 '15 at 14:49

Paulie

6,535
4
20
35

Please mind the blah blah stuff, it should work now. (Blah is to show that it works) – Paulie Jan 13 '15 at 15:09
If this answer is correct to what you actually wanted, please mark it correct :) – Paulie Jan 13 '15 at 15:13
Now it works 100% of what you wanted, please review the code to understand it. http://jsfiddle.net/6hwLaeqy/6/ I edited this page also. – Paulie Jan 13 '15 at 15:30
Please mark it as correct as it answers both your question and comment questions. – Paulie Jan 13 '15 at 15:35
I'm finished with this, please go do it with JavaScript. – Paulie Jan 13 '15 at 15:49
Anyway, thanks for your time and efforts (upvote). You know now how I feel last 8 days ;) – Wh1T3h4Ck5 Jan 13 '15 at 15:53
Create a class for the size for what zone you wish, then point that class to what you wish to auto expand. If you add content to one, then the other will auto-increase. – Paulie Jan 13 '15 at 16:01

suish · Answer 2 · 2015-01-13T15:50:07.533

How about this?

UPDATED using boarder for margin-area. so no more html structure changing required.

http://jsfiddle.net/amo4w5aj/15/

html

<!-- MAIN CONTAINER: Orange -->
<div class="container" style="position: relative; overflow:hidden; width:550px; background-color:#ffcc00;">

  <!-- INNER CONTAINER #1: Gray -->
  <div class="grey" style="overflow:hidden; float:left; width:180px; background-color:#eeeeee; ">

    <!-- TOP BLOCK -->
      <div style="">This block goes top</div>

    <!-- BOTTOM BLOCK -->
    <div style="position:absolute;bottom:0;background-color:pink;">This block goes bottom!</div>

  </div>

  <!-- INNER CONTAINER #2: Red -->
  <div class="red" style="overflow:hidden; float:left; width:250px; background-color:#ff0000">Not that important block<br />with some content<br />...</div>

</div>

css

.grey{
    padding-bottom :32767px;
    margin-bottom:-32767px;
}
.container{
    border: 5px solid #ffcc00;
}
.red{
    margin-left : 5px;
}

Unfortunatelly, doesn't work when red block is shorter than height required by gray block. In this example top block disappears http://jsfiddle.net/amo4w5aj/16/ — Wh1T3h4Ck5, Jan 13 '15 at 16:13

score 1 · Accepted Answer · edited May 23 '17 at 12:30

Here is your solution (example here: http://jsfiddle.net/jtnx7gw8/):

<!-- MAIN CONTAINER: Orange -->
<div style="height: 100%; width:550px;position: relative; background-color:#ffcc00; padding: 5px 0;">

  <!-- INNER CONTAINER #1: Gray -->
  <div style="display: inline-block; width:180px; margin:0 5px; vertical-align: top; height: 100%;">

    <!-- TOP BLOCK -->
    <div style="position: absolute; top: 5px; background: pink; max-width: 180px;">This block goes top!<br/>line 2<br/>line 3</div>
    <!-- INVISIBLE TOP BLOCK TO CALCULATE HEIGHT-->
    <div style="visibility: hidden; background: none;">This block goes top!<br/>line 2<br/>line 3</div>

    <!-- BOTTOM BLOCK -->
    <div style="position: absolute; bottom: 5px;background: gray; max-width: 180px;">This block goes bottom!</div>
    <!-- INVISIBLE BOTTOM BLOCK TO CALCULATE HEIGHT-->
    <div style="visibility: hidden;">This block goes bottom!</div>

  </div>

  <!-- INNER CONTAINER #2: Red -->
  <div style="height: 100%; display: inline-block; width:250px; margin:0 5px; background-color:#ff0000">Not that important block<br />with some content.<br/>...</div>

</div>

The position: absolute was key, but then was overlapping when that gray column was "longer". To fix that, I made a position: static set up of the same data (will have to bind it in this div as well) to calculate the "minimum" height. BUT This Div is set to visibility: hidden, to not interfere with your visual. It works in Chrome and Firefox just fine.

**Also, if you add lines to a 'block' to test, you must add to both the visible and invisible block. Again, this would be done automatically when you bind your data to both fields.

Some reading that helped me:

How to align content of a div to the bottom?

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

ANSWER UPDATED - it is the best possible solution I can think of, without using javascript. And as far as I can tell, it does exactly what you are hoping for. — deebs, Jan 13 '15 at 18:43
Yep, couldn't wait to test it. It finally works as expected. I have tested a lot of different contents and all of them was visually correct on most top browsers. Thanks Dave!!! Let the music play, woo-hoo :D — Wh1T3h4Ck5, Jan 13 '15 at 20:59
That's great to hear! It was a very interesting issue to work on, and something that seems to be a fairly common issue. Great question and glad it's finally working for you. — deebs, Jan 13 '15 at 21:08
Feel sorry for your time, and yes, it really seemed like something simple to me 8 days ago, today I finally gave up and post it here. Things sometimes aren't that simple, no matter how they look. — Wh1T3h4Ck5, Jan 13 '15 at 21:12

CSS positioning, auto-resize, top & bottom alignment

3 Answers3