Footer with one line

Navigation
2

I'm using bootstrap to make a footer, but currently it's playing each element on a line like this: Iwantedhimtostayonasinglelinelikethis: 

<footerclass="footer">
    <div class="container ">
        <img src="imgs/logobranco.png">
        <p>© 2018 Do Up English.</p><p> Todos os direitos reservados a Do Up English</p>
            <a href="#"><i class="fab fa-facebook fa-2x footericone"></i></a>
            <a href="#"><i class="fab fa-instagram fa-2x footericone"></i></a>
            <a href="#"><i class="fab fa-twitter-square fa-2x footericone"></i></a>
    </div>
</footer>

Current CSS: 

    .footer{
    background-color: #1F1F1F;
    padding: 1rem;

}
.footer .container img{
    height:1.7rem;
}
.footer .container p{
    margin: 0;
    padding: 0;
    font-size: 12px;
    text-align: center;
    color: #f7f7f7;
}
    
asked by anonymous 27.02.2018 / 19:44

4 answers

5

As you are using Bootstrap place the Footer elements inside the Grid of the ex framework. <div class="col-xs-6"> . After that use float:right only where you are using Fontawesom this way 

.footer .container a{
    float: right;
}

See below the result: 

.footer{
    background-color: #1F1F1F;
    padding: 1rem;
}
.footer .container img{
    height:1.7rem;
}
.footer .container p{
    margin: 0;
    padding: 0;
    font-size: 12px;
    text-align: center;
    color: #f7f7f7;
}
.footer .container a{
    float: right;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script><footerclass="footer">
    <div class="container ">
        <div class="col-xs-3">
            <img src="http://placeskull.com/150/50"></div><divclass="col-xs-6">
            <p>© 2018 Do Up English.</p><p> Todos os direitos reservados a Do Up English</p>
        </div>
        <div class="col-xs-3">
            <a href="#"><i class="fab fa-facebook fa-2x footericone"></i></a>
            <a href="#"><i class="fab fa-instagram fa-2x footericone"></i></a>
            <a href="#"><i class="fab fa-twitter-square fa-2x footericone"></i></a>
        </div>
    </div>
</footer>
    
27.02.2018 / 20:03
6

Just use float: and separate each one into an element, for example:

  

Note: The pseudo element :after in .footer .container:after is just a technique to break floats if necessary, perhaps the column col-l or col-r is larger than the col-c column % 

.footer{
    background-color: #1F1F1F;
    padding: 1rem;

}
.footer .container img{
    height:1.7rem;
}
.footer .container p{
    margin: 0;
    padding: 0;
    font-size: 12px;
    text-align: center;
    color: #f7f7f7;
}

.footer .container .col-l {
     float: left; /*flutua para a esquerda*/
}
.footer .container .col-r {
     float: right; /*flutua para a direita*/
}
.footer .container:after {
    clear: both;
    height: 0;
    display: block;
    content: "";
}
<!-- somente para funcionar os icone fontawesome, pode ignorar esta parte -->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script><footerclass="footer">
    <div class="container">
        <div class="col-l">
             <img src="imgs/logobranco.png">
        </div>

        <div class="col-r">
            <a href="#"><i class="fab fa-facebook fa-2x footericone"></i></a>
            <a href="#"><i class="fab fa-instagram fa-2x footericone"></i></a>
            <a href="#"><i class="fab fa-twitter-square fa-2x footericone"></i></a>
        </div>

        <div class="col-c">
           <p>© 2018 Do Up English.</p>
           <p>Todos os direitos reservados a Do Up English</p>
        </div>
    </div>
</footer>
    
27.02.2018 / 19:55
3

The problem there is% w / o% occupying the entire width of% w / o%. Convert it to <p> and set footer to display: inline-block .

Wrap social networking icons in text-align: center and put footer . And put span in the image.

As for the use of float: right in text, instead of using 2 float: left , use only 1 and break the line of texts with <p> .

See: 

.footer{
    background-color: #1F1F1F;
    padding: 1rem;
    text-align: center;
}
.footer .container img{
    height:1.7rem;
    float: left;
}
.footer .container p{
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #f7f7f7;
    display: inline-block;
}

.footer .container span{
    float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script><footerclass="footer">
   <div class="container ">
      <img src="imgs/logobranco.png">
      <p>
         © 2018 Do Up English.
         <br />
         Todos os direitos reservados a Do Up English
      </p>
      <span>
         <a href="#"><i class="fab fa-facebook fa-2x footericone"></i></a>
         <a href="#"><i class="fab fa-instagram fa-2x footericone"></i></a>
         <a href="#"><i class="fab fa-twitter-square fa-2x footericone"></i></a>
      </span>
   </div>
</footer>
    
27.02.2018 / 21:45
2

You can put each group of things in the footer (image, text, and icons) into separate divs and use display: inline-block in the divs. Easy, no need for float and more organized: 

.footer{
    background-color: #1F1F1F;
    padding: 1rem;

}
.footer .container img{
    height:1.7rem;
}
.footer .container p{
    margin: 0;
    padding: 0;
    font-size: 12px;
    text-align: center;
    color: #f7f7f7;
}
.container div {
  display: inline-block
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<footer class="footer">
   <div class="container">
      <div>
         <img src="imgs/logobranco.png">
      </div>
      <div>
         <p>© 2018 Do Up English.</p>
         <p> Todos os direitos reservados a Do Up English</p>
      </div>
      <div>
         <a href="#"><i class="fa fa-facebook fa-2x footericone"></i></a>
         <a href="#"><i class="fa fa-instagram fa-2x footericone"></i></a>
         <a href="#"><i class="fa fa-twitter-square fa-2x footericone"></i></a>
      </div>
   </div>
</footer>
    
27.02.2018 / 19:59
Login system with PHP [closed] Masking credit card numbering