CODEWITHSUNDEEP
htmlcss
lsaadev
lsaadev

Reputation: 82

Multi-Object position HTML/CSS

I've been trying to get this postioning right for a long time, her's a sketch of that it's supposed to look like:

Sketch

Here's the css that I got going:

.team1 {
    margin-left: 9;
}
.team2 {
    float: right;
    right: 10;
    position: relative;
}

.team1text{
    float: left;
    left: 150;
    top:50;
    position: relative;
}
.team2text{
    float: right;
    right: 150;
    top:30;
    position: relative;
}
.team1winlose{
    float: left;
    left: 150;
    top:50;
    position: relative;
}
.team2winlose{
    float: right;
    right: 150;
    top:50;
    position: relative;
}
.vs {
    positon: relative;
    top: 30;
    float: right;
    right: 50%;
}

But it now looks like this when I open the page:

Result

Upvotes: 0

Views: 83

Answers (1)

Asons
Asons

Reputation: 87231

With flexbox you could do like this

.wrapper {
  display: flex;
}
.wrapper .logo {
  flex: 0;
}
.wrapper > :not(.logo) {
  flex: 1;
  text-align: center;
  word-break: break-all;
}
.wrapper :not(.logo) div {
  font-size: 32px;
  font-weight: bold;
}
.wrapper :not(.logo) span {
  font-size: 16px;
}
.wrapper .separator {
  flex: 0;
  min-width: 70px;
}
<div class="wrapper">

  <div class="logo">
    <img src="http://placehold.it/150">
  </div>
  <div>
    <div>Team 12345678</div>
    <span>Wins/Losses</span>
  </div>
  <div class="separator">
    <div>VS</div>
  </div>
  <div>
    <div>Team 2</div>
    <span>Wins/Losses</span>
  </div>
  <div class="logo">
    <img src="http://placehold.it/150">
  </div>


</div>

For older browsers, display: table

.wrapper {
  display: table;
  width: 100%;
}
.wrapper .logo {
  display: table-cell;
  width: 150px;
}
.wrapper > :not(.logo) {
  display: table-cell;
  width: 20%;
  text-align: center;
  vertical-align: top;
}
.wrapper :not(.logo) div {
  font-size: 32px;
  font-weight: bold;
}
.wrapper :not(.logo) span {
  font-size: 16px;
}
<div class="wrapper">

  <div class="logo">
    <img src="http://placehold.it/150">
  </div>
  <div>
    <div>Team 1</div>
    <span>Wins/Losses</span>
  </div>
  <div>
    <div>VS</div>
  </div>
  <div>
    <div>Team 2</div>
    <span>Wins/Losses</span>
  </div>
  <div class="logo">
    <img src="http://placehold.it/150">
  </div>

</div>

Upvotes: 1

Related Questions