CODEWITHSUNDEEP
css
webbul
webbul

Reputation: 162

Wrap container around inline divs

Here is my problem. I have inline-block divs inside another div.

.timeEvents {
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.timeline {
  border: 1px solid;
}
.events1, .events2 {
  border: 1px solid;
}
.ev1, .ev3 {
  border: 1px solid red;
}
.ev2 {
  margin: 0 auto;
  border: 1px solid red;
  display: inline-block;
}
.mDiv {
  display: inline-block;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid blue;
}
<div class="timeEvents">
  <div class="events1">
    <div class="ev1">Data Field 1</div>
  </div>
  <div class="timeline">
    <div class="ev2">
      <div class="mDiv">5</div>
      <div class="mDiv">10</div>
      <div class="mDiv">15</div>
      <div class="mDiv">20</div>
      <div class="mDiv">25</div>
    </div>
  </div>
  <div class="events2">
    <div class="ev3">Data Field 2</div>
  </div>
</div>

I want the .ev2 to be wrapped around its children which are inline. Then, the two data fields, respectively .ev1 and .ev3 placed above and below, should have the same width as .ev2. Which means that all divs with a red border (in my JSFiddle) should have the same width (dynamic, I don't know it) and that width should not be 100% as it's in the jsFiddle example: https://jsfiddle.net/mzjqw2wx/17/.

EDIT - I updated my fiddle. I don't want to lose the outside 100% divs, I want to align the three red sections to have the same width, the page and the outside divs all remain 100%. The tip to use inline-block on the wrapper was great, it did what I wanted with the middle one. I wanted to align all red containers and I did it with jQuery.

Upvotes: 0

Views: 908

Answers (3)

ketan
ketan

Reputation: 19341

Use display:table to timeEvents and remove width:100% will make as per your expected.

.timeEvents {
    display: table;
    overflow: hidden;
  text-align: center;
}

Fiddle

Upvotes: 0

Johnny Kutnowski
Johnny Kutnowski

Reputation: 2390

That's pretty easy to implement using Flexbox.

Just assign display: flex; to .ev2 and flex-grow: 1; to the the .myDiv class.

You can see it in the following code:

.timeEvents {
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.timeline {
  border: 1px solid;
}
.events1, .events2 {
  border: 1px solid;
}
.ev1, .ev3 {
  border: 1px solid red;
}
.ev2 {
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
}
.mDiv {
  display: inline-block;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid blue;
  flex-grow: 1;
}
<div class="timeEvents">
  <div class="events1">
    <div class="ev1">Data Field 1</div>
  </div>
  <div class="timeline">
    <div class="ev2">
      <div class="mDiv">5</div>
      <div class="mDiv">10</div>
      <div class="mDiv">15</div>
      <div class="mDiv">20</div>
      <div class="mDiv">25</div>
    </div>
  </div>
  <div class="events2">
    <div class="ev3">Data Field 2</div>
  </div>
</div>

Check out CSS-Trick's Complete guide to Flexbox for more information.

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

You need to also set display: inline-block; for the common wrapper (and give text-align: center to its parent)

body { text-align: center; }

.timeEvents {
  display: inline-block;
  margin: 0 auto;
}

JSFiddle

Result:

enter image description here

Upvotes: 1

Related Questions