CODEWITHSUNDEEP
htmlcss
callsuper
callsuper

Reputation: 99

Aligning divs in a header

.header {
 background-color: yellow;
 font-family: 'Arial';
 display: inline-block;
}

.leftheader{
 float: left;
}

#Logo{
 font-size: 40px;
 font-weight: 700;
 display: inline-block;
}

#LogoLTD{
 font-size: 20px;
 display: inline-block;
}

.rightheader{
 display: flex;
 float: right;
}

.rightheader a{
 color: black;
 font-size: 20px;
 font-weight: 700;
 text-decoration: none;
}
<section class="header">

 <div class="leftheader">
   <div id="Logo">COMPANY NAME</div>
   <div id="LogoLTD">LIMITED</div>
  </div>

 <div class="rightheader">
     <a href="/home.html">HOME</a>
     <a href="/who.html">WHO</a>
     <a href="/contact.html">CONTACT</a>
 </div>

</section>

I have been trying to make a header for my site but I can't get the aligning right.

I want to have my links on the right of the page inside the yellow box.

The yellow colour should be inside the header class.

Then the leftheader div and the rightheader div should be inside the header class. And they should be positioned on the left and right but I cannot get this to work whatever I do :(

My HTML is:

<section class="header">

 <div class="leftheader">
   <div id="Logo">COMPANY NAME</div>
   <div id="LogoLTD">LIMITED</div>
  </div>

 <div class="rightheader">
     <a href="/home.html">HOME</a>
     <a href="/who.html">WHO</a>
     <a href="/contact.html">CONTACT</a>
 </div>

</section>

My CSS is:

.header {
 background-color: yellow;
 font-family: 'Arial';
 display: inline-block;
}

.leftheader{
 float: left;
}

#Logo{
 font-size: 40px;
 font-weight: 700;
 display: inline-block;
}

#LogoLTD{
 font-size: 20px;
 display: inline-block;
}

.rightheader{
 display: flex;
 float: right;
}

.rightheader a{
 color: black;
 font-size: 20px;
 font-weight: 700;
 text-decoration: none;
}

Upvotes: 0

Views: 2251

Answers (3)

Tabrez Khan
Tabrez Khan

Reputation: 9

This should do the work.

.header {
 display: flex;
 flex-wrap: wrap;
 background: yellow;
 padding: 8px;
}

.leftheader {
  display: inline-block;
  color: red;
  width: 60%;
}

.rightheader {
  display: inline-block;
  width: 40%;
  text-align: right;
}

Upvotes: 0

izulito
izulito

Reputation: 477

You can do that using flex. Check out the code below.

.header {
 background-color: yellow;
 font-family: 'Arial';
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
}

.leftheader{
 display: flex;
 align-items: flex-end;
}

#Logo{
 font-size: 40px;
 font-weight: 700;
 display: inline-block;
}

#LogoLTD{
 font-size: 20px;
 display: inline-block;
 padding-bottom: 5px;
}

.rightheader{
 display: flex;
}

.rightheader a{
 color: black;
 font-size: 20px;
 font-weight: 700;
 text-decoration: none;
}
<section class="header">

 <div class="leftheader">
   <div id="Logo">COMPANY NAME</div>
   <div id="LogoLTD">LIMITED</div>
  </div>

 <div class="rightheader">
     <a href="/home.html">HOME</a>
     <a href="/who.html">WHO</a>
     <a href="/contact.html">CONTACT</a>
 </div>

</section>

Upvotes: 1

felipeab
felipeab

Reputation: 110

Just add width: 100% to your header, things will look more like you want them:

.header {
    background-color: yellow;
    font-family: 'Arial';
    display: inline-block;
    width: 100%;
}

Upvotes: 0

Related Questions