Footer with one line

Asked

Viewed 549 times

2

I am using bootstrap to make a footer, but currently it is playing each element in a row like this: inserir a descrição da imagem aqui I wanted him to stay on a single line like this: inserir a descrição da imagem aqui

    <footer class="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;
}
html css

4 answers

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 the floats if necessary, chance the column col-l or col-r is larger than the column col-c

.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>


<footer class="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>

5


How you are using Bootstrap put the Footer elements inside the Grid of the ex framework. <div class="col-xs-6">. After that use float:right just where you’re using the Fontawesom that 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>
<footer class="footer">
    <div class="container ">
        <div class="col-xs-3">
            <img src="http://placeskull.com/150/50">
        </div>
        <div class="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>

  • Forget it, I got it wrong xD, I noticed now, this even using bootstrap :/

  • @Guilhermenascimento what counts is the intention =D

3

The problem there is the <p> which occupies the entire width of the footer. Turn it into display: inline-block and put the text-align: center in the footer.

Wrap social media icons in a span and put float: right. And put float: left in the image.

As to the use of <p> in the text, instead of using 2 <p>, use only 1 and break the line of texts with <br />.

Behold:

.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>
<script src="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>

<footer class="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>

2

You can put each group of things from the footer (image, text and icons) into separate Ivs and use display: inline-block on the Ivs. Easy, without having to 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>
<link href="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>

  • Where exactly display: inline-block is more organized than float, what comparative factor did you use to determine this exactly? Could you explain your placement?

  • @Guilhermenascimento this would deserve a post only on the subject, but the purpose of the float is to say how an element "floats" in relation to the other elements around it (https://developer.mozilla.org/en-US/docs/Web/CSS/float) and the display with inline-block says that the elements will be aligned in line as blocks, which seems to me much more suitable for the layout of this question, leaving more "clear" what is happening in the layout. Has a very nice post from the English OS on this subject: https://stackoverflow.com/questions/15172520/advantages-of-using-displayinline-block-vs-floatleft-in-css

  • Using display, it is also not necessary to use float on the left and right elements, letting the browser itself arrange the position of the Divs within your container, so I find it more organized, but it is not an absolute question, just even preference, float also solves this problem

  • The "own browser", this does not make sense, the rendering works based on the box-model, you are putting statements that more seem to me based on personal opinion than you feel more comfortable in working and not on the engine running and box-behaviormodel, honestly this being better or not is more a matter of dominance and understanding.

  • when I said "the browser itself" I was referring to the engine. See, I have nothing against the float, incidentally use quite but, semantically, it has been added for an element to float and the other elements in the same container line up around it, so I think, semantically speaking, if the goal is to line up several elements, the display is more appropriate, that’s all, which doesn’t mean it’s better or not, just the inline-block seems to make "clearer" the purpose of the layout.

  • I found another very interesting post that addresses several differences in behavior between display and float, things I hadn’t noticed myself, worth reading: https://www.treinaweb.com.br/blog/css-float-vs-inline-block-qual-usarem-meus-layouts/

  • Sorry, for me this is your personal opinion of the way you feel comfortable to work and better control over inline-block, but this does not indicate that one is better than another, having mastery and knowledge/practice and mainly understanding the behavior of box-model you will have control and understanding of what happens, being float or being inline-block.

  • Ricardo, this link that you mentioned, at no time the author cites sources like W3, does not speak of box-model and on top of that it seems that it is only a series of personal tests, I would not recommend this article to anyone. I’m sorry, but I have to be honest.

  • Quiet can be sincere rs. the idea was just to share a link that shows practical tests of the behavior of the float and the display, is not a study link or anything of the kind, just to complement what we were talking about

Show 4 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.