Chris Chris - 6 months ago 23
HTML Question

Nav not floating properly

I'm trying to position the main content to the left and the nav to the right. Currently the nav is sitting at the bottom. Anyone tell me where I went wrong?

The Code (http://codepen.io/kiddigit/pen/PNXRVE)

* {
font-family: garamond;
line-height: 1.9em;
color: #212121;
}
.wrapper {
width: 75%;
margin: 0 auto;
border: 1px solid blue;
padding: 10px;
overflow: hidden;
}
.wrapper2{
overflow: scroll;
}
.main_content {
float: left;
}
.main_text {
float: left;
}
.nav {
float: right;
padding-top: 10px;
width: 25%;
}
header {
border-bottom: 5px solid;
margin-bottom: 10px;
overflow: hidden;
}
header ul {
list-style-type: none;
margin-top: 20px;
display: inline;
}
header li {
float: right;
margin-right: 20px;
width: 110px;
}
header li:first-child {
margin-right: 0;
}
header li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
header li a:hover {
background-color: #111;
color: white;
}
header h1 {
float: left;
text-align: left;
margin: 0 170px .5em 0;
line-height: 0;
font-size: 2em;
}
h1 a {
text-decoration: none;
color: black;
}

/*drop-down menu styles begin*/
.dropbtn {
color: black;
padding: 13px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
padding: 0 27.5px ;
text-decoration: none;
display: block;
background-color: #3f3f3f;
}
.dropdown-content a:hover {
color: #a9a9a9;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: black;
color: white;
}
/*drop-down menu styles end*/

/*Right nav content starts here*/
.nav li {
list-style-type:none;
font-size: 1em;
}
.nav ul {
padding-left: 10%;
font-size: 1em;
}
.nav ul a:link {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav ul a:visited {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav ul a:hover {
text-decoration: none;
background-color: black;
color: white;
padding:3px;
font-size: 1em;
}
/*Right nav ends here*/

Answer

Add width: 75%; to .main_content. It's a div so it will, by default take up 100% of its parent container.

Comments