Display Inline-Block with Widths as Percent

Question

I'm trying to put 2 sections beside each other using inline-block and widths as a percentage, but it's not filling up the entire width of my window.

What I have so far:

HTML

<section class="left-content">
    "Some Code"
</section>
<section class="main-content">
    "Some More Code"
</section>

CSS

.left-content, .right-content { 
    width: 15%; 
    min-width: 150px; 
    padding: 5px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
}
.main-content { 
    width: 85%; 
    min-width: 712px; 
    padding: 10px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
}

But unless I work out the exact percentage down to a decimal point on my screen it doesn't work. Does anyone know of a way to do this using inline-block or do I have to use float?

I've found it's usually because there's a physical space in between the elements. You can either remove any space between elements in the markup, or set `font-size: 0` on the parent, and then restore the font in the elements themselves. — Chad, Sep 21 '13 at 14:19

score 33 · Accepted Answer · answered Sep 21 '13 at 14:20

33

It is due to the white-space and line break in your HTML markup which causes this issue. There are two options to resolve the "problem":
1. remove the line breaks and white-space from your code
2. set the font-size of the parent element to '0'

Additionally have you set box-sizing: border-box?

answered Sep 21 '13 at 14:20

Netsurfer

5,543
2
29
34

Thanks for this. Just a pain that I have to reset the font size. :) – dpDesignz Sep 21 '13 at 14:36
1

Yes ;-) but there is no method without any drawbacks. The alternative using 'floats' isn't any better ...! You have the choice between the lesser of two evils. – Netsurfer Sep 21 '13 at 14:45
thanks for pointing me in the right direction, but why not just delete the whitespace in the html. In his case: [code]...
...[more code]
– Joshua Goossen Nov 21 '14 at 19:34
1

@JoshuaGoossen It is option 1, isn't it? ;-) – Netsurfer Nov 22 '14 at 11:15
3

Parent element's ```font-size: 0;``` along with ```box-sizing: border-box;``` is the way to go. – samuelkobe Jan 30 '15 at 03:28

Display Inline-Block with Widths as Percent

1 Answers1

Linked

Related