Tukukkk

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.

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;

}

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>

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;

}

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.

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