I'm attempting to arrange three divs within the <header>: div1 (logo) at the top left of the page, nav2 (menu bar) at the top center of the page, and div3 (social networks) at the top right of the page. However, I am unsure of how to achieve this layout. Here is the HTML code that I have tried:
<header>
<div id="logo"></div>
<nav>
<ul>
<li><a></a></li>
</ul>
</nav>
<div id="links">
<a></a>
</div>
</header>
And here is the corresponding CSS code:
nav{
background-color: #215177;
border: 1px solid #215177;
color: white;
display: block;
margin: 0;
overflow: hidden;
position: fixed;
width: 100%;
}
#logo{
height: 120px;
width: 50px;
float: left;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: white;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
#links{
float: right;
position: absolute;
top:0;
}