2

I am positioning main-bar and side-bar with 70-30 ratio as under: JSFIDDLE

.main-bar, .side-bar{
 position: relative;
 margin:0; padding: 0;
 outline: 0;
 display: inline-block;
 border:none;
    background:#CCC
}
.main-bar{width: 70%}
.side-bar{width: 30%}

/* This Works

.side-bar{width: 29%}

*/
<div class="main-bar">
    I am the King!
</div>

<div class="side-bar">
   I am not less!
</div>

Interestingly, it works with 70-29 ratio. Did I miss something?

tika
  • 7,135
  • 3
  • 51
  • 82
  • possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) – Abhitalks Nov 13 '14 at 12:57

4 Answers4

5

You have to remove white space between divs as it also take place and doesn't let inline-blocks align properly.

.main-bar, .side-bar {
    position: relative;
    margin: 0;
    padding: 0;
    outline: 0;
    display: inline-block;
    border: none;
    background: #CCC;
}
.main-bar {
    width: 70%;
}
.side-bar {
    width: 30%;
}
<div class="main-bar">
    I am the King!
</div><!--

--><div class="side-bar">
   I am not less!
</div>

Reference: Fighting the Space Between Inline Block Elements

emmanuel
  • 9,607
  • 10
  • 25
  • 38
  • 4
    WOW! Never notices that. I thought White Spaces were neglected in HTML. @emmanuel Is there a CSS Way of saying, neglect them because commenting this way may sometimes be problem while fetching from database or something. And the code doesnot look smart as well –  Nov 12 '14 at 09:06
  • You could try **font-size: 0** or **negative margin** method, please check reference url. – emmanuel Nov 12 '14 at 09:10
  • @selu this question adresses ways to remove the white-space : http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – web-tiki Nov 12 '14 at 09:16
2

This is because the white space in-between your inline-block elements you need make them 0 using the font-size property just as follows

body{
    font-size: 0;
}
.main-bar, .side-bar{
    position: relative;
    margin:0; padding: 0;
    outline: 0;
    display: inline-block;
    font-size: 14px;
    border:none;
    background:#CCC
}
.main-bar{width: 70%}
.side-bar{width: 30%}

Working Fiddle

Benjamin
  • 2,612
  • 2
  • 20
  • 32
  • Any cross cons or problems of this approach. @Benjamin It looks good but not sure if that is safe. What is the technical meaning of `font-size:0`? – tika Nov 12 '14 at 09:08
  • it is not nescessary that you need to give the body `font-size: 0;` you can just use it for you inline-block elements wrapper div. – Benjamin Nov 12 '14 at 10:16
  • A space that has zero `font-size` is generally zero width. – Benjamin Nov 12 '14 at 10:17
  • 1
    You can also check this [source](http://davidwalsh.name/remove-whitespace-inline-block) – Benjamin Nov 12 '14 at 10:19
1

I recommend to go with float for these scenarios.

.main-bar, .side-bar{
    margin:0; padding: 0;
    outline: 0;
    border:none;
    background:#CCC
    float: left;
}
.main-bar{width: 70%}
.side-bar{width: 30%}
KiV
  • 2,225
  • 16
  • 18
1
 .main-bar, .side-bar{
            position: relative;
            margin:0; padding: 0;
            outline: 0;
            display: inline-block;
            border:0;
            background:#CCC;
            float:left;
        }

Inline elements:

  1. respect left & right margins and padding, but not top & bottom

  2. cannot have a width and height set

  3. allow other elements to sit to their left and right.

Block elements:

  1. respect all of those
  2. force a line break after the block element.
user3687550
  • 57
  • 8