CSS align three divs horizontally

user_219408 0
Viewed 61319

I'm having an issue aligning three divs inside a parent div, the effect I need is the following

|IMAGE| +TEXT+ |IMAGE|

Each div contains an Image (2) and the text (1) respectively. Aligning them is easy, the problem is that I want the CENTER div to auto width to the size of the browsers' window and keep the other IMAGE divs always on the right and left side respectively.

Something like this for example, if the user maximizes the window:

|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|

As you can see, the idea is that the center div grows, and auto width but keeping the structure.

How could I get that behaviour? Thanks in advance.

css
3 Answers

This works rather well as well.

.container{width: 100%; padding: 5px;}
.fig-left {float: left;}
.text     {float: left;}
.fig-right{float: right;}

/* add margins maybe */
.text, .fig-right, p{margin: .75em;}

and HTML https://codepen.io/tradesouthwest/pen/MWELwGN to test

<div class="container">
  <div class="fig-left">
    <img src="https://picsum.photos/id/1055/200/300"/>
  </div>
  <div class="text">
    <p>ABCDEFGHIJKLMNOP don't forget the alt in images QRSTUVWXYZ</p>    
  </div>
  <div class="fig-right">
    <img src="https://picsum.photos/id/1055/200/300"/>
  </div>
</div>
user_26548770
Related