CODEWITHSUNDEEP
htmlcss
Jtwa
Jtwa

Reputation: 143

Inline-Block Position to the left and Inline-Block position to the right - Same Line

On the same line, I want to have one inline-block element positioned to the left of the page and other inline-block element position to the right.

So far, I have this:

HTML

<div class="left-nav">
    <a href="">RcJane</a>
</div>

<div class="right-nav">
    <a href="">Home</a>
    <a href="">Available</a>
    <a href="">About</a>
    <a href="">Contact</a>
</div>

CSS

.right-nav{ background:#6699FF; }
.left-nav{  background:#0066CC; }
.right-nav,.left-nav{   display: inline-block;  }

Should I use floats? CodePen with Floats

Upvotes: 0

Views: 132

Answers (1)

Hannes Schneidermayer
Hannes Schneidermayer

Reputation: 5717

.right-nav { background:#6699FF; float: right; }
.left-nav { background:#0066CC; float: left; }

Seems good. You may have to clear the floats afterwards:

<div class="left-nav">
    <a href="">RcJane</a>
</div>

<div class="right-nav">
    <a href="">Home</a>
    <a href="">Available</a>
    <a href="">About</a>
    <a href="">Contact</a>
</div>

<br style="clear: both;" />

Upvotes: 1

Related Questions