Skip to content

Fixed size left column and fluid right column both with 100% height in CSS

If you need two (2) columns and want the left column to be a fixed size, but the right column to automatically take the remaining size of the window, then you can use the following solution.

Follow the steps below, which include some CSS and some HTML.

The CSS for our solution

html, body { height: 100%; width: 100%; padding: ; margin: ; } .page-wrapper { height: 100%; position: relative; } .left-column { position:fixed; /* <-- This prevents scrolling */ top:; left:; width:235px; height:100%; background:#090909; } .right-column { margin-left:235px; background:yellow; min-height:100%; /* <-- Allows the content to grow */ }
Code language: CSS (css)

The HTML for our solution

<div class="page-wrapper"> <div class="left-column"></div> <div class="right-column"> This is the content. </div> </div>
Code language: HTML, XML (xml)

See also  Case Insensitivity with .htaccess files
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x