Here is the code I have written:
My HTML Code:
<div id="container">
<div id="left-content">Left Content</div>
<div id="right-content">Right Content</div>
</div>
My CSS Code:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
margin-bottom: -50px;
padding-bottom: 50px;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: red;
}
#container > #left-content {
width: 100%;
height: 100%;
margin-right: -210px;
padding-right: 210px;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
background: yellow;
/*overflow-y: scroll;*/
}
#container > #right-content {
width: 200px;
height: 100%;
display: inline-block;
/*float: right;*/
background: green;
/*overflow-y: scroll;*/
}
When you check this fiddle, you will notice that there are three comments(/* ... */) in the CSS code. One pertains to positioning #right-content, while the others are about scroll bars. In the result screen, you can see the long yellow side on the right of #right-content.
I attempted to remove this (the yellow side) by using float: right;(Uncommented float: right;), but it did not work as expected. Specifically, the #right-content box became invisible.
What steps should I take to fix this issue?
Upon reverting to the original code(Uncommenting float: right;), and then uncommenting the overflow-y: scroll; to enable scroll bars, the scroll bars overlapped in the same space. My intention is to position the scrollbar of #left-content correctly to the right of #left-content. The puzzle remains unsolved.
How can I resolve this dilemma?
To summarize...
Q1. How can I position #right-content flawlessly?
Q2. How can I perfectly locate the scroll bars of both #left-content and #right-content?
Thank you.