CODEWITHSUNDEEP
htmlcss
Jesper
Jesper

Reputation: 747

CSS: nav element jumping to a new line

I'm trying to build a website, where part of my code, contains a quote segment, and the idea is that I want some social links on the right side of it.

Unfortunately, my social links jumps to a line below my quote segment, instead of being on the same line, and I'm not sure why.

Heres my HTML:

<div class="quote--bar">
<div class="quote">
"To create an environment in which knowledge <br />
about information and its sphere can be obtained"
</div>
<nav class="socialImageContainer">
    <ul>
        <li><a href="#" class="logos twitterLogo"></a></li>
        <li><a href="#" class="logos instagramLogo"></a></li>
        <li><a href="#" class="logos facebookLogo"></a></li>
        <li><a href="#" class="logos tumblrLogo"></a></li>
        <li><a href="#" class="logos linkedInLogo"></a></li>
    </ul>
</nav>

And my LESS:

.quote--bar {
 padding-top: 20px;
 background: @BGColor2;
 display: inline-block;
 .quote {
  font-size: 24px;
  font-family: 'Merriweather', serif;
  color: @TXTColor2;
 }
}
.socialImageContainer {
 .logos {
  margin: 20px 0;
  float: right;
  width: 51px;
  height: 51px;
}
ul {
  list-style: none;
}
li {
  display: inline-block;
}

If you have any idea what I might be doing wrong, it would be very much appreciated!

Upvotes: 0

Views: 3139

Answers (1)

Mr Lister
Mr Lister

Reputation: 46579

nav and div have display:block by default, so the nav will display below the preceding div.

You probably meant to float the nav instead of the links inside it. In addition, the preceding div will also need to be either display:inline-block or float:left.

.quote--bar {
 padding-top: 20px;
 background: @BGColor2;
 display: inline-block;
 .quote {
  float: left; /* <-- this one */
  font-size: 24px;
  font-family: 'Merriweather', serif;
  color: @TXTColor2;
 }
}
.socialImageContainer {
  float: right; /* <-- and this one */
  .logos {
   margin: 20px 0;
   width: 51px;
   height: 51px;
 }
 ul {
   list-style: none;
 }
 li {
   display: inline-block;
 }
}

Upvotes: 1

Related Questions