Align HTML items

Question

I have one div containing 3 divs.

HTML code

.state {
  background-color: rgba(233, 234, 237, 0.9);
  height: 7vh;
  width: 80%;
  border-radius: 14px;
  margin: 10px 0 15px 80px;
  display: flex;
  align-items: stretch;
}

.state-main {
  text-align: center;
  padding-top: 10px;
  font-weight: 900;
  font-size: 14px;
}

.options {
  text-align: right;
  margin-bottom: 10px;
}

.owner-image {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

<div class="state">

  <div class="owner">
    <img class="owner-image" src="img/uk.jpg">
  </div>
  <div class="state-main">
    <p class="state-name">PENNSYLVANIA</p>
  </div>
  <div class="options">
    <p id="time"></p>
    <button>SEND TROOPS</button>
    <button>ATTACK</button>
  </div>

</div>

Please post you html. You can use `>` icon to embed live example here — Priyesh Kumar, Jun 06 '17 at 17:45
Check this post: https://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css Is this what you want to achiev? — Bruno Vilela, Jun 06 '17 at 17:46
try to add margin-right:auto; and margin-left:auto; to your 3 divs . — Alireza, Jun 06 '17 at 17:48

hungerstar · Accepted Answer · 2017-06-06T18:40:04.133

4

Use flexbox (browser support).

.state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  background-color: lightgray;
}

.state,
.btns button {
  text-transform: uppercase;
}

<div class="state">
  <img src="http://placehold.it/150x80/fc0">
  <p>
    Pennsylvania
  </p>
  <div class="btns">
    <button>Send Troops</button>
    <button>Attack</button>
  </div>
</div>

**For IE9 and older you'll need to provide a fallback. Whether or not you need to do this depends on target audience.

edited Jun 06 '17 at 18:40

answered Jun 06 '17 at 17:49

hungerstar

21,206
6
50
59

1

And? [**Flexbox Support**](http://caniuse.com/#feat=flexbox). OP didn't mention restrictions so... – hungerstar Jun 06 '17 at 17:56
And - so for an intranet application where your company can control the browsers allowed, this might be a good choice. But if you want your public facing website to show up nicely regardless of whether they have the most modern browser, using a CSS3 dependent scheme is not a good idea. – David P Jun 06 '17 at 17:59
1

LOLz, okay. If you're supporting IE9 or less, maybe. There's a lot of big websites out there sporting `flexbox`. Flexbox is a part of modern web development. If OP said, _"need to support IE8+"_ my answer would be different or not have answered at all. No restrictions applied to request by OP so a simple, modern, accessible answer was provided. – hungerstar Jun 06 '17 at 18:00
Let me give you an example. I work for a major US corporation. Until fall of last year they had us still running IE 8. Then they finally upgraded us all to IE 11. The corporate user had no opportunity to upgrade, and so lots of sites would come out looking unreadable. Always best to be a little bit backwards compliant. – David P Jun 06 '17 at 18:02
Depends on target audience. Don't need the lecture. I know what I'm doing. Do you go around posting this to every `flexbox` answer given on SO? You must have a lot of extra time on your hands. – hungerstar Jun 06 '17 at 18:04
I will end the lecture. My advice: Use css floats and CSS2 – David P Jun 06 '17 at 18:05
1

Lectures can be helpful, but in this case, it's unwarranted. Flexbox is supported by 98% of browsers worldwide: http://caniuse.com/#search=flex – Michael Benjamin Jun 06 '17 at 18:45
1

And for those wanting to bridge that 2% gap, here are some great solutions: https://stackoverflow.com/q/33359157/3597276 – Michael Benjamin Jun 06 '17 at 18:46

score 1 · Answer 2 · answered Jun 06 '17 at 17:51

.State is the div that contains all 3. .state-main is yellow div and should go at the center. .options is green div should go far right. .owner-image is the red div, and should stay at the same place.

Using flex to put the layout into place.

.state {
  display: flex;
  justify-content: space-between;
}

.state-mail {
  text-align: center;
}

<div class="state">
  <div class="owner-image">
    <img src="http://placehold.it/100x50" />
  </div>
  <div class="state-main">PENNSYLVANIA</div>
  <div class="options"><button>SEND TROOPS</button><button>ATTACK</button></div>
</div>

Align HTML items

2 Answers2