CODEWITHSUNDEEP
htmlcsscss-float
Benny Leonard
Benny Leonard

Reputation: 21

Why is the unordered list not floating to the right of the h1?

The HTML code 

<html>
<head>
    <title>Front-end Web Developer</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <header class = "main-header clearfix">
        <h1>Front-end Web Developer</h1>
        <nav class = "main-nav">
            <ul>
                <li><a href = "index.html">Home</a></li>
                <li><a href = "about.html">About</a></li>
                <li><a href = "portfolio.html">Portfolio</a></li>
                <li><a href = "contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

The [CSS] code

body {
    font-size: 32px;
    background-color: rgb(30, 89, 152);
    color: rgb(255, 255, 255);
    font-family: Bookman, Georgia, serif;
}

.main-header {
    border-style: solid;
    border: 4px 2px;
    border-color: rgb(255, 255, 255);
    display: inline-block;
    float: left;

}
h1 {
    font-size: 2em;
    margin: 0px 0px;
}

.main-nav {
    float: right;
}

.main-nav ul {
    list-style-type: none;
}

.main-nav ul li a {
    text-decoration: none;
}

.main-nav ul li {
        display: inline-block;
        margin: 0px 55px;
        font-size: .8em;
        padding: 14px 0px; 
}


a:link {
    color: rgb(255, 255, 255);
}

a:visited {
    color: rgb(255, 255, 255);
}

a:hover {
    color: rgba(211, 211, 211, 0.8);
}

.clearfix:after {
  content: " ";
  clear: both;
}

I have tried removing and changing the property values for each element's padding and margin.

I also tried changing their font-size values as well.

Nothing is working for me, can you guys see what the problem is here?

Did I use the clearfix correctly to clear the float? Could that be the reason for all of this?

I WANT BOTH elements to be displayed on the SAME line.

Thank you.

Upvotes: 0

Views: 49

Answers (4)

Friday Ameh
Friday Ameh

Reputation: 1684

Try this I only adjusted your margin in main-nav ul li class to margin: 0px 5px;

body {
  font-size: 32px;
  background-color: rgb(30, 89, 152);
  color: rgb(255, 255, 255);
  font-family: Bookman, Georgia, serif;
}

.main-header {
  border-style: solid;
  border: 4px 2px;
  border-color: rgb(255, 255, 255);
  display: inline-block;
  float: left;
  background: blue;

}
h1 {
  font-size: 2em;
  margin: 0px 0px;
}

.main-nav {
  float: right;
  text-align: right;
}

.main-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.main-nav ul li a {
  text-decoration: none;
   text-align: right;
    width: 100%;
}

.main-nav ul li {
  display: inline-block;
  margin: 0px 5px;
  font-size: .8em;
  padding: 14px 0px;

}


a:link {
  color: rgb(255, 255, 255);
}

a:visited {
  color: rgb(255, 255, 255);
}

a:hover {
  color: rgba(211, 211, 211, 0.8);
}

.clearfix:after {
  content: " ";
  clear: both;
}
  
    <header class = "main-header">
        <h1>Front-end Web Developer</h1>
        <nav class = "main-nav">
            <ul>
                <li><a href = "index.html">Home</a></li>
                <li><a href = "about.html">About</a></li>
                <li><a href = "portfolio.html">Portfolio</a></li>
                <li><a href = "contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

Upvotes: 0

tot11
tot11

Reputation: 49

Don't float the entire wrapper - header, just float the elements: h1, main-nav and give them 50-50 widths or depending on your style.

Upvotes: 3

ashfaq.p
ashfaq.p

Reputation: 5469

This is what I have changed:

.main-nav ul li {
  margin: 0 10px;
}


body {
  font-size: 32px;
  background-color: rgb(30, 89, 152);
  color: rgb(255, 255, 255);
  font-family: Bookman, Georgia, serif;
}

.main-header {
  border-style: solid;
  border: 4px 2px;
  border-color: rgb(255, 255, 255);
  display: inline-block;
  float: left;

}
h1 {
  font-size: 2em;
  margin: 0px 0px;
}

.main-nav {
  float: right;
  text-align: right;
}

.main-nav ul {
  list-style-type: none;
}

.main-nav ul li a {
  text-decoration: none;
}

.main-nav ul li {
  display: inline-block;
  margin: 0px 10px;
  font-size: .8em;
  padding: 14px 0px; 
}


a:link {
  color: rgb(255, 255, 255);
}

a:visited {
  color: rgb(255, 255, 255);
}

a:hover {
  color: rgba(211, 211, 211, 0.8);
}

.clearfix:after {
  content: " ";
  clear: both;
}
<header class="main-header clearfix">
  <h1>Front-end Web Developer</h1>
  <nav class="main-nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

Upvotes: 0

tot11
tot11

Reputation: 49

If this is what you wanted to do, then don't float left the entire header just the title and then float right the menu. link

.main-header {
border-style: solid;
border: 4px 2px;
border-color: rgb(255, 255, 255);
display: inline-block;

}
h1 {
font-size: 2em;
margin: 0px 0px;
float:left;
}

.main-nav {
float: right;

}

Upvotes: 0

Related Questions