CSS Layout 2-Column fixed-fluid
Try this Dynamic Drive layout and its relatives (that I was pointed to via a similar question of mine).
2 column div layout: right column with fixed width, left fluid
Remove the float on the left column.
At the HTML code, the right column needs to come before the left one.
If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)
Also apply an overflow: hidden
and some height (can be auto) to the outer div, so that it surrounds both inner divs.
Finally, at the left column, add a width: auto
and overflow: hidden
, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).
Example HTML:
<div class="container">
<div class="right">
right content fixed width
</div>
<div class="left">
left content flexible width
</div>
</div>
CSS:
.container {
height: auto;
overflow: hidden;
}
.right {
width: 180px;
float: right;
background: #aafed6;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
Example here: http://jsfiddle.net/jackJoe/fxWg7/
two column fixed-fluid-fixed css layout
Try setting the main content to appear fully left but give it a margin-left to make room for the sidebar.
.main-content {
position: absolute;
top: 0;
left: 0px;
margin-left: 220px;
background: #f0f0f0;
width: 100%;
}
Edit:
I've had a bit of time now to try out the code. I suggested margin-left instead of padding-left because it fits better with what you want to do. Using margin gives you the option of putting a border around your content. Also, if you actually do want padding in the content you can set it as normal. if you used a padding to indent for the sidebar you'd have to add the 220px to whatever actual padding you wanted.
This is what I came up with to get it working with margins instead of padding.
body {
margin: 0;
padding: 0;
border: 0;
}
.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 220px;
border: 1px solid green;
}
.main-content
{
position: fixed;
top: 0;
left: 0px;
right: 0px;
margin-left: 220px;
background: #f0f0f0;
border: 1px solid red;
}
I also agree with the anser referencing dynamic drive. One of the best ways to learn CSS initially is to have a go with a working stylesheet and customise it for your needs. The big advantage is it will already be cross browser compatible. Just use Google to find a bit of inspiration.
2 column layout (Left column fixed width, right fluid + clear:both)
Here's your altered CSS:
html, body {
background: #ccc;
}
.wrap {
margin: 20px;
padding: 20px;
padding-right:240px;
background: #fff;
overflow:hidden;
}
.main {
margin: 0 -220px 0 auto;
width: 100%;
float:right;
}
.sidebar {
width: 200px;
float: left;
height: 200px;
}
.main, .sidebar {
background: #eee; min-height: 100px;
}
.clear { clear:both; }
span { background: yellow }
Basically what I've done is change the way your layout is done, so that .main
div is floated on the right. To do this, we had to add 2 things:
- A padding of 240px on the
.wrap
div, and - A right margin on the
.main
div of -220px to properly align the fluid part of the page.
Because we've floated the .main
div on the right, the clear: both;
now only affects content inside the .main
div, as you want.
You can see a demonstration here: http://jsfiddle.net/6d2qF/1/
How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?
- Another Update -
Since Twitter Bootstrap version 2.0 - which saw the removal of the .container-fluid
class - it has not been possible to implement a two column fixed-fluid layout using just the bootstrap classes - however I have updated my answer to include some small CSS changes that can be made in your own CSS code that will make this possible
It is possible to implement a fixed-fluid structure using the CSS found below and slightly modified HTML code taken from the Twitter Bootstrap Scaffolding : layouts documentation page:
HTML
<div class="container-fluid fill">
<div class="row-fluid">
<div class="fixed"> <!-- we want this div to be fixed width -->
...
</div>
<div class="hero-unit filler"> <!-- we have removed spanX class -->
...
</div>
</div>
</div>
CSS
/* CSS for fixed-fluid layout */
.fixed {
width: 150px; /* the fixed width required */
float: left;
}
.fixed + div {
margin-left: 150px; /* must match the fixed width in the .fixed class */
overflow: hidden;
}
/* CSS to ensure sidebar and content are same height (optional) */
html, body {
height: 100%;
}
.fill {
min-height: 100%;
position: relative;
}
.filler:after{
background-color:inherit;
bottom: 0;
content: "";
height: auto;
min-height: 100%;
left: 0;
margin:inherit;
right: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}
I have kept the answer below - even though the edit to support 2.0 made it a fluid-fluid solution - as it explains the concepts behind making the sidebar and content the same height (a significant part of the askers question as identified in the comments)
Important
Answer below is fluid-fluid
Update
As pointed out by @JasonCapriotti in the comments, the original answer to this question (created for v1.0) did not work in Bootstrap 2.0. For this reason, I have updated the answer to support Bootstrap 2.0
To ensure that the main content fills at least 100% of the screen height, we need to set the height of the html
and body
to 100% and create a new css class called .fill
which has a minimum-height of 100%:
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
We can then add the .fill
class to any element that we need to take up 100% of the sceen height. In this case we add it to the first div:
<div class="container-fluid fill">
...
</div>
To ensure that the Sidebar and the Content columns have the same height is very difficult and unnecessary. Instead we can use the ::after
pseudo selector to add a filler
element that will give the illusion that the two columns have the same height:
.filler::after {
background-color: inherit;
bottom: 0;
content: "";
right: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}
To make sure that the .filler
element is positioned relatively to the .fill
element we need to add position: relative
to .fill
:
.fill {
min-height: 100%;
position: relative;
}
And finally add the .filler
style to the HTML:
HTML
<div class="container-fluid fill">
<div class="row-fluid">
<div class="span3">
...
</div>
<div class="span9 hero-unit filler">
...
</div>
</div>
</div>
Notes
- If you need the element on the left of the page to be the filler then you need to change
right: 0
toleft: 0
.
Two columns layout with 100% height. One fixed column and one fluid column
Demo:
http://codepen.io/awesomeaniruddh/pen/bdJBZy
Add the following piece of code:
html {
height: 100%:
}
Before the html, body {..} part.
CSS: Make two column layout with left column fluid (fill all remaining space) and right column fixed (200px)
This could be easily done with the css calc
function. However, it depends on what browsers you want to support. check out this link so see what it is compatible with.
Essentially, just do this:
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: calc(100% - 208px);
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color:red;
}
#online_window{
border: 2px solid #D4D4D4;
margin-left: 0%;
display: inline-block;
float: left;
background-color: white;
width: 200px;
height: 100%;
}
note: you need to -208
to take the border into account. Also, check out the jsfiddle
How can I have two fixed width columns with one flexible column in the center?
Instead of using width
(which is a suggestion when using flexbox), you could use flex: 0 0 230px;
which means:
0
= don't grow (shorthand forflex-grow
)0
= don't shrink (shorthand forflex-shrink
)230px
= start at230px
(shorthand forflex-basis
)
which means: always be 230px
.
See fiddle, thanks @TylerH
Oh, and you don't need the justify-content
and align-items
here.
img {
max-width: 100%;
}
#container {
display: flex;
x-justify-content: space-around;
x-align-items: stretch;
max-width: 1200px;
}
.column.left {
width: 230px;
flex: 0 0 230px;
}
.column.right {
width: 230px;
flex: 0 0 230px;
border-left: 1px solid #eee;
}
.column.center {
border-left: 1px solid #eee;
}
Two column layout, fixed right column
Not a very elegant solution, but its working. They key is to wrap the contents of the left column and add a margin-right equal to the width of the right column / sidebar. On the right column, set the width and a negative margin-left equal to its width.
.left {
float:left;
width:100%;
background-color: green;
}
.left-content {
margin-right:120px;
}
.right {
float:right;
width: 120px;
margin-left: -120px;
background-color: red;
}
Here's a working fiddle
http://jsfiddle.net/heyapo/9Z363/
Simple two column layout with fixed sidebar and fluid content
Here is what I think you want:
HTML
<div id="sidebar">
Some content
</div>
<div id="content">
Main content
</div>
CSS
#sidebar {
width:20%;
height:500px;
border:1px solid #000;
position:fixed;
}
#content {
margin-left:22%;
border:1px solid #000;
height:1500px;
}
And here is a FIDDLE
Related Topics
How to Use a Grammar with The HTML 5 Speech Input API
CSS Make Div Position Fixed Inside Div with Perspective Propertie
CSS Zigzag Border with a Textured Background
Overlapping/Overlaying Multiple Inline Images
How to Specify The Order of CSS Classes
How to Validate Pattern Matching in Textarea
Center a Div Horizontally and Vertically and Keep Centered When Resizing The Parent
How Move 'Nav' Element Under 'Navbar-Brand' in My Navbar
HTML + CSS: Numbered List with Numbers Inside of Circles
@-Moz-Document Url-Prefix() Not Working
Why Isn't My Margin Working with Position: Fixed
Selecting All Links Except Hovered One CSS Only
Filter Extensions in HTML Form Upload
What Does The Question Mark at Then End of a CSS Include Url Do