CSS Positioning 70-30 with Inline-Block

Question

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

相关标签:

Answer 1

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

Answer 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

Answer 3

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

Answer 4

 .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.