Search code examples
csstwitter-bootstrapinline

CSS: 2 divs, side by side, right div gets cut off on resize

I'm trying to create a basic CSS page with two side by side divs, one for a left nav, one for content. I was following the answer on this page:

CSS 2 Div Layout float

and I can achieve the side by side look I want but when I resize the browser, the right div content is getting cut off.

Browser (Chrome) full width of my screen: enter image description here

Browser resized:

enter image description here

My code (we are using bootstrap): 

<div class="container-fluid bs-docs-container">

    <div class="row">

        <div style="width: 300px; float:left; height:100%; background:gray; margin:0; color:white;">This is the side bar</div>

        <div class="container" style="margin-left:320px; width: 90%;">
            <div style="display: inline-block; height:100%; background:black; color:white; width: 90%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Justo nec ultrices dui sapien eget. Aliquam sem fringilla ut morbi. Ut sem nulla pharetra diam sit amet. Massa eget egestas purus viverra accumsan in nisl. Nulla facilisi nullam vehicula ipsum a. Ridiculus mus mauris vitae ultricies leo integer malesuada. Risus sed vulputate odio ut enim blandit volutpat maecenas. Fusce id velit ut tortor pretium viverra.

Faucibus purus in massa tempor nec feugiat nisl. Amet commodo nulla facilisi nullam vehicula ipsum. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Pellentesque habitant morbi tristique senectus. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. Pulvinar etiam non quam lacus suspendisse faucibus. Est sit amet facilisis magna etiam. Adipiscing bibendum est ultricies integer quis auctor. Enim eu turpis egestas pretium aenean pharetra magna. Risus sed vulputate odio ut.

Sit amet commodo nulla facilisi nullam vehicula. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Venenatis urna cursus eget nunc. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Amet dictum sit amet justo donec enim diam vulputate ut. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Amet purus gravida quis blandit. Integer enim neque volutpat ac tincidunt vitae semper quis. Iaculis at erat pellentesque adipiscing commodo elit. Habitant morbi tristique senectus et netus et malesuada fames ac. Consequat nisl vel pretium lectus. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus.

Tellus mauris a diam maecenas sed enim. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Faucibus in ornare quam viverra orci sagittis eu. Volutpat diam ut venenatis tellus in. Turpis in eu mi bibendum neque egestas congue. Eget mi proin sed libero enim sed. Euismod quis viverra nibh cras. At in tellus integer feugiat scelerisque varius morbi enim. Sed viverra ipsum nunc aliquet bibendum enim. Viverra orci sagittis eu volutpat odio facilisis mauris. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Eget mauris pharetra et ultrices neque. Amet nulla facilisi morbi tempus. Libero volutpat sed cras ornare arcu dui. Diam ut venenatis tellus in.

Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Nibh mauris cursus mattis molestie. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Condimentum id venenatis a condimentum vitae sapien. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Magna sit amet purus gravida quis blandit turpis cursus. Bibendum ut tristique et egestas quis ipsum. Viverra nibh cras pulvinar mattis. Sed augue lacus viverra vitae congue eu consequat ac. Aliquam purus sit amet luctus. Habitant morbi tristique senectus et netus et malesuada fames. Tortor posuere ac ut consequat semper viverra nam libero justo.</div>

        </div>

    </div>

</div>
Solution

  • I noticed you have a margin-left: 320px on your second div, that might be pushing the content outside the windows frame since it's actually more that the width of your sidebar. If you want the content not to be against the browser's border try adding a padding instead

    Try using this structure, maybe it'll help you, with this the sidebar has a static width and the content uses the remaining space.

    .wrapper {
   display: flex;
   height: 100vh;
   align-items: stretch;
}

.sidebar {
   background-color: #EEEEEE;
   min-width: 300px;
}

.content {
   color: white;
   background-color: black;
   padding: 20px;
   margin-left: 20px;
}
    <div class="wrapper">
   <div class="sidebar">
      
   </div>
   <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis quisquam minima molestiae ea cupiditate soluta dolorum. Veritatis odit architecto corrupti! Ducimus impedit enim animi veniam ratione dolor adipisci magni deserunt!
   </div>
</div>