2 divs align next to each other with 75% and 25%

Question

I need to have two divs next to each other. The left div has a width of 75% and the right 25%. The content of the left div must align left and the right div aligns right.

So this is what I did:

<div class="header_menu">
    <div class="links">
        Home Contact
    </div>
    <div class="social_media">
        Contact twitter linkedin
    </div>
</div>

The css:

.header_menu{
border-bottom:1px solid #CCC;   
}

.links{
width:75%;
display:inline;
}
.social_media{
width:25%;
display:inline;
}

I tried to add a float:left; and float:right; but then the border isn't placed at the bottom anymore.....???

M.

Answer 1

Take a look into this jsfiddle that should work for you:

https://jsfiddle.net/cmkgn4fg/4/

HTML-Code:

<div class="header_menu">
    <div class="links">
        Home Contact
    </div>
    <div class="social_media">
        Contact twitter linkedin
    </div>
    <div class="clearfix"></div>
</div>

CSS-Code:

.header_menu{
    border-bottom:1px solid #CCC;
    width:100%;
}

.links{
    width:75%;
    float:left;
    text-align:left;
}
.social_media{
    width:25%;
    float:left;
    text-align:right;
}
.clearfix{
    clear:both;
}

Answer 2

You were almost there. inline-block is the one to use.

As inline elements has a white space, which will make them slightly bigger than 75% / 25% and therefore break them into 2 lines as they would exceed 100%, margin-right: -4px; is one way to fix that and make them both stay on 1 line.

Note, the -4px is based on the set font and might need to be adjusted, so here are a more options:

• How do I remove the space between inline-block elements?

Stack snippet

.header_menu{
  border-bottom:1px solid #CCC;   
}

.links{
  display: inline-block;
  margin-right: -4px;
  width:75%;
  text-align: left;
}
.social_media{
  display: inline-block;
  margin-right: -4px;
  width:25%;
  text-align: right;
}

<div class="header_menu">
    <div class="links">
        Home Contact
    </div>
    <div class="social_media">
        Contact twitter linkedin
    </div>
</div>