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
?
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
?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With