Content overflowing off page with bootstrap - html

Question

I am using bootstrap and I am making my website when I created a fixed navigation bar on the left side of my page with the width of 250px and then I have a div to the right of it being my page content, I have set the width of that to 100% and inside that I have a col-lg-12 and the content is leaking off the page, I was wondering if anyone knew a solution to this so that the content box is only the width of the remaining width of the page instead of being always 100% of the page width, If you need the code I can upload it to pastebin or something like that. But I am putting just some lil tid bits of the code here. And if any more info is needed just comment.
.navigationWrapper {
position: absolute;
float: left;
width: 250px;
height: 100%;
background-color: black;
}
.contentWrapper {
left: 255px;
position: absolute;
float: left;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navigationWrapper">
<div class="navIcon">
<span>ICON</span>
</div>
</div>
<div class="contentWrapper">
<div class="col-sm-12 test">
<h1>Test</h1>
</div>
</div>

Answer 1

you can use Flexbox to do this:
JsFiddle. There are some height properties, which should be fixed.
.wrapper {
display: flex;
}
.navigationwrapper {
flex: 0 0 250px;
}
.contentWrapper {
flex: 1 0 auto;
}
with flex: 1 0 auto you can grantee that the element will grow and take the rest of the space left.
and this is your updated Fiddle https://jsfiddle.net/Marouen/n9v4Ly7e/

Answer 2

You can use calc() in your CSS because the width of your container is not 100% but 100% - menu width
It makes something like : width: calc(100% - 255px); because you are starting your container from 255px left.
updated js fiddle
PS : i also added background-color:black; to your .navNav{} so the background works even if the viewport is smaller than the size of the menu.

Answer 3

The issue you are having is that the width: 100%; you have applied to the .contentWrapper referances the width of it's parent (in this case the body) and not remaining space. You can use width: calc(100% - 255px); (see updated example below) to fix the issue. Flex-box is also reasonable solution, but this is what was causing the issue.
.navigationWrapper {
position: absolute;
float: left;
width: 250px;
height: 100%;
background-color: black;
}
.contentWrapper {
left: 255px;
position: absolute;
float: left;
width: calc(100% - 255px);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navigationWrapper">
<div class="navIcon">
<span>ICON</span>
</div>
</div>
<div class="contentWrapper">
<div class="col-sm-12 test">
<h1>Test</h1>
</div>
</div>