GooGit
September 30, 2016, 6:15pm
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?
donboe
September 30, 2016, 6:35pm
2
I think Flex would do the trick Flex
GooGit
September 30, 2016, 6:44pm
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.
donboe
September 30, 2016, 6:51pm
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
Hi there GooGit,
I thought that you wanted the left column to have a fixed width.
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
donboe
September 30, 2016, 8:48pm
7
So Flex after all Happy it is working.
system
Closed
December 31, 2016, 3:48am
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.