CODEWITHSUNDEEP
css
Calculasians
Calculasians

Reputation: 9

CSS Aligning Text to the Right Fiasco

Say I had this small section of code

<header>
    <div class='top-row'>
        <div class='home-button'>
            <h1><a href="/">Garbanzo Beans</a></h1>
        </div>
    </div>
    <div class='top-row'>
        <nav class='right'>
            <ul>
                <li><a href="/about">About</a></li>
                <li><a href="/resume">Resume</a></li>
                <li><a href="/blog">Blog</a></li>
            </ul>
        </nav>
    </div>  
</header>

And this CSS

.top-row {
    display: inline-block;
}


nav ul, footer ul {
    display: block;
    font-family:'Museo Slab', 'Roboto', sans-serif;
    padding: 0px;
    list-style: none;
    font-weight: bold;
    width:100%;
    text-align: right;
}
nav ul li, footer ul li {
    display: inline-block;
    margin-right: 20px;
    text-align: right;
}
a {
    text-decoration: none;
    color: #2F4F4F;
}
a:hover {
    color: #FF6347
}

I would like to have the About, Resume, and Blog be aligned to the right and Garbanzo Beans stay to the left but text-align: right; is not working. I'm just beginning a website so this is just prototype, but can anyone provide some solutions? Thanks!

Upvotes: 0

Views: 47

Answers (3)

Sneha Shinde
Sneha Shinde

Reputation: 58

.top-row {
display: inline-block;
}


nav ul, footer ul {
    display: block;
    font-family:'Museo Slab', 'Roboto', sans-serif;
    padding: 0px;
    list-style: none;
    font-weight: bold;
    width:100%;
    text-align: right;
}
nav ul li, footer ul li {
    display: inline-block;
    margin-right: 20px;
    text-align: right;
}
a {
    text-decoration: none;
    color: #2F4F4F;
}
a:hover {
    color: #FF6347
}
.align-right{
  float:right;
  padding-top: 15px;
}
<header>
            <div class='top-row'>
                <div class='home-button'>
                    <h1><a href="/">Garbanzo Beans</a></h1>
                </div>
            </div>
             <div class='top-row align-right'>
                <nav class='right'>
                    <ul>
                            <li><a href="/about">About</a></li>
                            <li><a href="/resume">Resume</a></li>
                            <li><a href="/blog">Blog</a></li>
                    </ul>
                </nav>
              </div>    
        </header>

Upvotes: 0

Steven Mihelakis
Steven Mihelakis

Reputation: 40

.top-row {display:block;}  /*change from inline-block*/

nav ul, footer ul {
    display: block;
    font-family:'Museo Slab', 'Roboto', sans-serif;
    padding: 0px;
    list-style: none;
    font-weight: bold;
    text-align: right;
}
nav ul li, footer ul li {
    display: inline-block;
    margin-right: 20px; 
}
a {
    text-decoration: none;
    color: #2F4F4F;
}
a:hover {
    color: #FF6347
}

.home-button{
      float:left;
      width:50%;
}    
.right{
     float:right;
     width:50%;
}

Flexbox is definitely the way to go, but you can use the ol' floats as above aswell.

Upvotes: 0

Daniel Khoroshko
Daniel Khoroshko

Reputation: 2721

flexbox to rescue https://jsfiddle.net/avvqzt35/

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Upvotes: 1

Related Questions