CODEWITHSUNDEEP
htmlcss
Interactive
Interactive

Reputation: 1550

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

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.

Upvotes: 4

Views: 8934

Answers (5)

Asons
Asons

Reputation: 87191

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:

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>

Upvotes: 3

IKEN Lemjahed Ayoub
IKEN Lemjahed Ayoub

Reputation: 104

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

Upvotes: 0

cgee
cgee

Reputation: 1897

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

Upvotes: 5

Kyle
Kyle

Reputation: 67194

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.

Upvotes: 1

dgarbacz
dgarbacz

Reputation: 962

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

Upvotes: 1

Related Questions