Search code examples
htmltextfloating

Div wont float to the left in the same line

I am making a footer with three elements, an h3 and two divs, all elements are floated to the right with a margin percentage.

Problem is the third element(div2) goes bellow the first div instead of floating to the left.

Here is my code, I am aware inline styling is not good idea.

<div class="container" style="width:100%; height:70px; position:relative; float:left; padding:2%;">
  <h3 style="float:left; position:relative; margin-right:15%; top:50%; transform:translateY(-50%); ">Contact our experts</h3>
  <div class="telcontainer" style="margin-right:15%; width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
    <h3 style="position:relative; float:left; margin-left:1%;">694003903</h3>
  </div>
  <div class="mailcontainer" style=" width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
    <h3 style="position:relative; float:left; margin-left:1%;">Mail Us</h3>
  </div>
</div>

Solution

  • If you want to align items in a row or column, try using display: flex. It will save a lot of hassle https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    <div class="container" style="width:100%; padding:2%; display: flex; align-items: center; flex-direction: column">
  <h3 style="float:left;">Contact our experts</h3>
  <div class="telcontainer" style="width:auto; position:relative; display: flex">
       <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
       <h3>694003903</h3>
     </div>
     <div class="mailcontainer" style=" width:auto; position:relative; display: flex">
       <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative;">
       <h3>Mail Us</h3>
    </div>
  </div>