Align middle both elements depending on which element stretches parent

HTML & CSS
1

#superb is element of flexible height.
#inner1 should be 100% allowable height of #superb (minus padding and own margin).
#inner2 should be expanding #superb, as big as it’s height + padding + margin is.

I need it to work in at least Internet Explorer 10.
Is it doable?

2

I think Flex would do the trick Flex

3

That would be solution, if not:

Which makes #inner2 pop to the left, without relation to flex and text-align: right… well… stretches the #inner1 all the way to the right.

This is why flexbox wasn’t my instant idea. Because it’s meant to be used for flexible layouts, not to fill contents.

4

In your example you are floating inner1 and inner2. That is not needed when using Flex. And I think you can use Flex for what you are looking for. Just read carefully through the documentation

Edit: otherwise you could try the display: table/table-cell approach

1 Like
5

For people wondering:

Is the solution.

1 Like
6

Hi there GooGit,

I thought that you wanted the left column to have a fixed width. :no_mouth:

If that is still your desire, then try it like this possible solution…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
 }
#container {
    display: flex;
    justify-content: space-between;
    width: 80%;
    padding: 1em;
    margin: auto;
    box-sizing: border-box;
    background-color: #222;
    box-shadow: 0.5em 0.5em 0.5em #999;
 }
#container div:first-of-type {
    min-width: 16em;
    padding: 1em;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.9);
 }
#container div:last-of-type {
    width: 50%;
    padding: 1em;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.9);
 }
@media screen and (max-width: 47em) {
#container {
    display: block;
    border-radius: 1em;
  }
#container div:first-of-type,
#container div:last-of-type {
    min-width: 100%;
    border-radius: 0.75em;
  }
#container div:first-of-type {
    margin-bottom: 1em;
  }
 }
</style>

</head>
<body> 
<div id="container">
<div>abc</div>
<div>
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
 Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
 sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
 nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
 odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
 Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
 purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>
</div>
</body>
</html>

coothead

7

So Flex after all :wink: Happy it is working.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.