ZoolWay ZoolWay - 3 months ago 8
CSS Question

CSS picture (dynamic size) at top right with other elements filling the space

I imagine this should be a rather basic CSS question but I seem to be not able to solve it.

I would like to have an area (like an image) at the top right inside of my container. The other elements should float around it and use the max possible width. Further I do not care about older browsers so CSS3 welcome.

I tried two approaches, flexbox and float.



/* common styles */

.outerContainer {
width: 300px; /* try 200 and 300 */
background: white;
border: 1px solid darkblue;
padding: 4px;
}

div.pictureContainer {
width: 30%; min-width: 32px; /*max-width: 120px;*/ min-height: 48px;
border: 1px solid black;
margin-left: 2px;
margin-bottom: 2px;
margin-bottom: 4px;
}

div.dataline {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
}

/* flex approach */

#outerForFlex {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}

#outerForFlex > div.pictureContainer {
flex: 1 0 auto;
}

#outerForFlex > div.dataline {
flex: 1 0 auto;
}

/* float approach */

#outerForFloat > div.pictureContainer {
float: right;
}

#outerForFloat > div.dataline {
width: 100%;
}

<div id="outerForFlex" class="outerContainer">
<div class="pictureContainer">
pic
</div>
<div class="dataline">Data Line #1 Data Line</div>
<div class="dataline">Data Line #2 Data Line</div>
<div class="dataline">Data Line #3 Data Line</div>
<div class="dataline">Data Line #4 Data Line</div>
<div class="dataline">Data Line #5 Data Line</div>
</div>

<br />

<div id="outerForFloat" class="outerContainer">
<div class="pictureContainer">
pic
</div>
<div class="dataline">Data Line #1 Data Line</div>
<div class="dataline">Data Line #2 Data Line</div>
<div class="dataline">Data Line #3 Data Line</div>
<div class="dataline">Data Line #4 Data Line</div>
<div class="dataline">Data Line #5 Data Line</div>
</div>





With the flexbox approach I am stuck to have all elements on the row with the picture not to use 100% but 100% minus the picture width. Check it with 200px and 300px. With 200px the picture does not fit but I can get a complete line which is fine too. With 300px the first dataline and the picture share a flex row but the picture will (naturally for the flexbox) never span to the next flex line.

The float approach should be the natural one and the text inside the dataline divs wraps but not the divs itself as you can see from the dataline borders.

Note that this is more complicated as the image div has no fixed width (I could use
calc()
then) but is something between 32px and 120px depending on the parent container size (which is only fixed in the sample but dynmaic in real life).

Any idea how to make this work?

If this is really really only possible with JS, using jQuery is okay but we will need to have it adopt to container resizes.

Answer

Look, everything is much easier. You need only float on pic and overflow:hidden on dataline. Here is an example