I have some problem with my CSS and HTML. I can’t style the 2 footer items to be on the same line. Is there something wrong with how I have my divs and styles?
Suggestion to make better code is very welcome. I have tried float, inline-block.
/*footer*/
footer {
color:white;
background-color: #c2b180;
}
.button-social {
background-color: #4CAF50;
color: white;
padding: 10px 20px 10px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
a {
text-decoration: none;
}
.sameline.block {
float:left;
width:50%;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<footer>
<div class="sameline.block">
<div class="about-this-page">
<h3>About this page</h3>
<p>Made by Duy Ta</p>
</div>
<div class="around-the-web">
<h3>Around the Web</h3>
<a class="button-social" href="#"><i class="fa fa-linkedin"></i></a>
<a class="button-social" href="#"><i class="fa fa-github"></i></a>
<a class="button-social" href="#"><i class="fa fa-twitter"></i></a>
</div>
</div>
<div id="footer-below">qlip ©
<script>document.write(new Date().getFullYear())</script>. All Rights Reversed
</div>
</footer>
5
Answers
Use flexbox on your container
.sameline-block
. You can then add margin and/or padding and other styles to your flex children.about-this-page
and.around-the-web
.You have to specify float for right elements also
A class name can’t contain a
dot
.So change it to for example
samelineblock
Then select the divs that are a direct child of that element and give them an
inline-block
.You can adjust the width by setting it.
First of all don’t use dots to name the classes. Then in order to set two elements side by side you need to set their float to left, not the container.
So in your example rename sameline.block to samelineblock and replace
with
Try using below code in your css.
.samelineblock .about-this-page,.samelineblock .around-the-web {
display: inline-block;
padding:0 30px 0 0;
}