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

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>

Answer 3

Inline elements don't respond to width and height styles, which is why you are running into this issue.
Remember when floating divs, you will need a clearfix. You can read about clearfixes here
<div class="header_menu clearfix">
<div class="links">
Home Contact
</div>
<div class="social_media">
Contact twitter linkedin
</div>
</div>
Then your CSS.
.header_menu{
border-bottom:1px solid #CCC;
}
.links{
width:75%;
float:left;
}
.social_media{
width:25%;
float:right;
}

Answer 4

The rule display: inline; ignores height and width, as the element is now an inline level element (as in it should be treated as part of text/content) but with the display properties table and table-cell you can achieve the layout you require:
<div class="header_menu">
<div class="links">
Home Contact
</div>
<div class="social_media">
Contact twitter linkedin
</div>
</div>
And the CSS:
.header_menu{
border-bottom:1px solid #CCC;
display: table;
}
.links{
width:75%;
displaY: table-cell;
}
.social_media{
width:25%;
display:table-cell;
}
This forces table-like behavior onto the elements but also keeps the styling options of the HTML elements you're using.
Example on jsFiddle.

Answer 5

try this :
<div class="header_menu"
<div class="links">
Home Contact
</div>
<div class="social_media clear">
Contact twitter linkedin
</div>
</div>
and in your css file :
.header_menu{
border-bottom:1px solid #CCC;
}
.links{
width:75%;
display:inline-block;
float: left;
clear: both;
background-color: red;
}
.social_media{
width:25%;
float: right;
display:inline-block;
background-color: orange;
}
the colors bck is for you to see the layout clearly ! hope this would help