CODEWITHSUNDEEP
css
lidermin
lidermin

Reputation: 2832

CSS align three divs horizontally

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.

Upvotes: 27

Views: 64046

Answers (3)

tradesouthwest
tradesouthwest

Reputation: 176

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>

Upvotes: 1

Ian
Ian

Reputation: 69

Here is another inline implementation for three images side by side:

<div style="text-align:center">

    <div style="float: left"><img src="image1.png"/></div>

    <div style="display: inline"><img src="image2.png"/></div>

    <div style="float: right"><img src="image3.png"/></div>

</div>

Upvotes: 6

Bobby Jack
Bobby Jack

Reputation: 16048

#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }

If that still doesn't behave how you want, please give more detailed requirements.

Upvotes: 46

Related Questions