CODEWITHSUNDEEP
htmlcss
Steven
Steven

Reputation: 67

How to automate the width of three divs to fit in container?

I have a single div that has a width of 100%. When the browser is resized the div resizes to remain 100% of the browser width. Inside that div is three more divs with widths of 200px. When the browser it stretched to be 600px wide then all the divs are side by side nicely, just as I want it. But if you stretch the browser to be 599px or less one or two divs get knocked down a row and appear below the other divs which is not ideal.

So what I want is for the divs to always remain side by side and equally change in width. So if I change the browser width to, for example, 150px then the three divs that are all side by side have widths of 50px each.

Is this possible using only CSS and HTML code? I don't think I need to provide my code seeing as it is just three divs inside one other div.

Upvotes: 1

Views: 1156

Answers (3)

VXp
VXp

Reputation: 12068

You can do it with the Flexbox:

body {margin: 0}

.parent {
  display: flex; /* displays flex-items (children) inline */
}

.child {
  flex: 0 1 200px; /* initial width of 200px */
  text-align: center;
}

.red {background: red}
.green {background: green}
.blue {background: blue}
<div class="parent">
  <div class="child red">Red</div>
  <div class="child green">Green</div>
  <div class="child blue">Blue</div>
</div>

Upvotes: 1

Amit Kumar Singh
Amit Kumar Singh

Reputation: 4475

.parent {
  display: block;
}
 .child{
   width: 32.5%;
   border:1px solid red;
   float:left;
}
<div class="parent">
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="child">Three</div>
</div>

Upvotes: 1

Johannes
Johannes

Reputation: 67778

You can apply these settings to your three DIVs.

.my_div {
  width: 33%;
  max-width: 200px;
}

This will make sure the three DIVs always fit into the container (33% width), but will never get wider than 200px each, also if the container is much wider than 600px.

Upvotes: 0

Related Questions