CODEWITHSUNDEEP
htmlcss
Adi Pîslaru
Adi Pîslaru

Reputation: 149

CSS 3 divs with dynamic width

I'll try my best to explain in short words.

I have three divs, let's call them A, B and C.
I want them to be on the same line.
I want to place an image in div B but with some limitations, so I want that div B has max-width and max-height limits.
Then, side divs, A and C should fill each other half of the remaining space.
I've tried with display: table but strange things happen with the space occupied by the image.

Anyone has any idea what to do?

Code so far:

.table
{
    display: table;

    width: 729px;
    height: 343px;
}

.left
{
    display: table-cell;
    background-color: red;
}

.center
{
    display: table-cell;
    max-width: 429px;
    max-height: 343px;
    background-color: green;
}

.right
{
    display: table-cell;
    background-color: deepskyblue;
}
<div class="table">
    <div class="left"> a </div>

    <div class="center"> <img src="https://c1.staticflickr.com/9/8452/7936998300_6ab78565ff_m.jpg"> </div>

    <div class="right"> c </div>
</div>

Fiddle: https://jsfiddle.net/vasndLt3/

As you see, the "green zone" is bigger than the image.

Expectation: Image

Notice the height updates as the content.

Upvotes: 0

Views: 439

Answers (1)

felixmosh
felixmosh

Reputation: 35513

Easily can be achieved with flexbox.

.table {
  display: flex;
  flex-direction: row;
  width: 729px;
  height: 343px;
}

.left {
  flex: 1;
  background-color: red;
}

.center {
  max-width: 429px;
  max-height: 343px;
  background-color: green;
}


.right {
  flex: 1;
  background-color: deepskyblue;
}
<div class="table">
  <div class="left"> a </div>

  <div class="center"> <img src="https://c1.staticflickr.com/9/8452/7936998300_6ab78565ff_m.jpg"> </div>

  <div class="right"> c </div>
</div>

Upvotes: 1

Related Questions