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.

`display: inline` ignores width or height values. it just takes dimensions based on the inside text content. — Mr_Green, Nov 12 '15 at 13:52
try bootstrap, it will relieve you of CSS issues to an extend. — Lucky Chingi, Nov 12 '15 at 13:54
Look into `display: table;` for parents and `display: table-cell;` for children. — Kyle, Nov 12 '15 at 13:55
try float: left and float: right as you were trying and clear the float from the parent container. Search for "clearfix float" in google. — Mr_Green, Nov 12 '15 at 13:56

cgee · Answer 1 · 2015-11-12T14:04:49.857

5

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;
}

edited Nov 12 '15 at 14:04

answered Nov 12 '15 at 13:56

cgee

1,910
2
22
38

Can I suggest adding a comment why you have used `box-sizing:border-box` could be confusing to a newbie if they try your solution of floats and it doesn't work as they have added a border with no `box-sizing` adjustments. – DavidT Nov 12 '15 at 13:59
Why you have to use box-sizing:border-box can you read here: https://css-tricks.com/box-sizing/ – cgee Nov 12 '15 at 14:00
in fact, now you have removed the border I believe you can remove the box sizing all together. – DavidT Nov 12 '15 at 14:03
Oh yes.. it was only for testing for me.. But instead of this.. box-sizing:border-box is everytime a good idea to develop a website :) – cgee Nov 12 '15 at 14:04
Adding an extra `
` for the sake of clear floats is bad practice. Add the clearing to the `header_menu`, its there already and perfect in this case. – Asons Nov 12 '15 at 14:22

Asons · Answer 2 · 2018-11-21T10:23:12.630

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>

score 1 · Answer 3 · edited May 23 '17 at 10:27

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;
}

score 1 · Answer 4 · answered Nov 12 '15 at 14:01

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.

score 0 · Answer 5 · answered Nov 12 '15 at 14:14

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

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

5 Answers5