CODEWITHSUNDEEP
csslayoutsticky-footer
Robert Kusznier
Robert Kusznier

Reputation: 6911

CSS Position element on bottom of container without removing it from flow

I have a container with 3 children elements.

<div class="container">
  <img />
  <div class="element1"></div>
  <div class="element2 bottom"></div>
</div>

They must be positioned as shown on the diagram below:

enter image description here

Does somebody know how to achieve such layout using pure CSS? Ideally I wouldn't like to add any markup, but I can do that if that's the only possible way.

The biggest problem I'm facing here is how to stick that second element (non-image) to the bottom of the container without removing it from the flow. Because if I use position: absolute and remove it from the flow, the elment above it can collide with it (both elements have unknown height).

Here's a pen to work on: http://codepen.io/anon/pen/yNwGvQ

Upvotes: 3

Views: 1809

Answers (2)

Alexis B.
Alexis B.

Reputation: 1115

I would suggest you to use two columns in your html and then use the property display: flex; for your right column as suggested in the article A Complete Guide to Flexbox.

http://codepen.io/AlexisBertin/pen/QboYyY

All the HTML:

<div class="container">
  <div class="column column-left">
    <div class="image">This is an image</div>
  </div>
  <div class="column column-right">
    <div class="element1">This container has dynamic content so it's height is unknown and may change.<br/><br/> Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</div>
    <div class="element2">This container also has dynamic content so it's height is unknown and may change</div>
  </div>
</div>

Part of this CSS:

.column {
  float: left;
  height: 100%;
}
.column.column-left { width: 100px; }
.column.column-right { 
  width: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Hope you get the idea. Good Luck'.

EDIT:

The easiest way to achieve this without declaring height to the container seems to only create a third parent div to the first block of the second column and define it as flex: 1; while the second block of this same second column would be define as flex: 0;.

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

More details explained in the comments.

Upvotes: 3

Kyrbi
Kyrbi

Reputation: 2260

The easiest solution I figured out is this one:

First you create this CSS:

.container {
  width: 400px;
  padding: 10px;
  border: 1px solid red;
  background-color: white;
}
.container > img {
  float: left;
}
.container > div {
  position: relative;
  overflow: auto;
  padding-left: 5px;
  min-height: 120px; 
}
.container > div > .bottom{
  position: absolute;
  bottom: 0;
  display: block;
}

And then use these divs, depending on your content. The first one you use when you know your text is short:

<div class="container">
  <img src="http://placehold.it/120x120">
  <div>
    <div>
      <p>This container has dynamic content so it's height is unknown and may change.</p>
    </div>
    <div class="bottom">
      <p>This container also has dynamic content so it's height is unknown and may change</div>
  </div>
</div>

The second one you use when you know your text is long

<div class="container">
  <img src="http://placehold.it/120x120">
  <div>
    <div>
      <p>This container has dynamic content so it's height is unknown and may change.</p>
      <p>Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</p>
    </div>
    <div>
      <p>This container also has dynamic content so it's height is unknown and may change</p>
    </div>
  </div>
</div>

The difference is that you remove bottom class from the last div in your div that has long text.

Also in your CSS you can see .container > div{... min-height: 120px; ...}, you should set it to height of your image. In case you want the bottom text more down then you have to increase min-height to be bigger than your image height.

Here is it in action: http://codepen.io/anon/pen/YXgBXx

Upvotes: 1

Related Questions