Renzo Renzo - 5 months ago 7
CSS Question

Floating images are not at the same height on relative position

I need a set of icons grouped under a div to appear to the right of my logo (which is located on the top-left corner). I need the logo and all icons to have a position of relative. I am using

float:left
for both divs, but the second div (the group of icons) appears below the logo and not to its right. I have also tried grouping them under an unordered list and input
style="float:left"
as html, but it does not work either.

Here is the CSS:

div.container {
width: 1111px;
}

#parent {
display: flex;
}

.logo {
float:left;
position: relative;
top:0px;
margin-left: 0px;
}

#icons {
position:relative;
float: left;
white-space: nowrap;
width: 100%;
display: table;
max-width: 100%;
}

.all-icons {
position: relative;
float: left;
vertical-align: middle;
padding: 15px;
display: table-cell;
}

.all-icons img {
height:auto;
width: auto;
max-height: 77px;
max-width: 100%;
margin: 15px;
}


And the HTML:

<body> <div class="container">

<div id="parent">

<div class="logo"> <img src="../Header/Logo-vector.png" width="27%" height="27%"> </div>

<div id="icons" style="float:left" class="all-icons">

<img src="../Header/icons/icon1.png" width="389" height="317">

<img src="../Header/icons/icon2.png" width="451" height="317">

<img src="../Header/icons/icon3.png" width="427" height="317">

<img src="../Header/icons/icon4.png" width="837" height="317">

<img src="../Header/icons/icon5.png" width="594" height="317">

</div>

</div>
</div>

</body>

Answer

Is this what you look for?

div.container {
  /* width: 1111px; */
}
#parent {
  display: flex;
}
.logo img {
  margin: 15px;
}
.all-icons {
  white-space: nowrap;
}
.all-icons img {
  margin: 15px;
}
<div class="container">

  <div id="parent">

    <div class="logo">
      <img src="http://placehold.it/77/f00" alt="">
    </div>

    <div id="icons" class="all-icons">
      
      <img src="http://placehold.it/77" alt="">
      <img src="http://placehold.it/77" alt="">
      <img src="http://placehold.it/77" alt="">
      <img src="http://placehold.it/77" alt="">
      <img src="http://placehold.it/77" alt="">

    </div>

  </div>
</div>

If you can't use flex, try display: table

div.container {
  /* width: 1111px; */
}
#parent {
  display: table;
}
.logo {
  display: table-cell;
}
.all-icons {
  display: table-cell;
}
.logo img {
  margin: 15px;
}
.all-icons {
  white-space: nowrap;
}
.all-icons img {
  margin: 15px;
}
<div class="container">

  <div id="parent">

    <div class="logo">
      <img src="http://placehold.it/77/f00" alt="">
    </div>

    <div id="icons" class="all-icons">
      
      <img src="http://placehold.it/77" alt="">
      <img src="http://placehold.it/77" alt="">
      <img src="http://placehold.it/77" alt="">
      <img src="http://placehold.it/77" alt="">
      <img src="http://placehold.it/77" alt="">

    </div>

  </div>
</div>