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/
CSS Left Column fluid & Right Column fixed width
As your second div is absolutely positioned, right:0
needs to be added to make it stick to the right, instead of float:right
. I edited your fiddle, take a look:
http://jsfiddle.net/oLuzay16/
We can also use css width:calc(100% - 200px);
to make the width of the first div 100% of the container minus 200px to account for the absolutely positioned div. Calc
will work in most newer browsers, check here for a complete list: http://caniuse.com/#feat=calc
Two column layout with left fluid and right fill the rest width
http://jsfiddle.net/A8zLY/2333/
Fiddle from link I posted.
right does not need fixed width. See link above
width:auto
Is this what you're looking for?
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/
2 column div layout: right column fixed width, left fluid, height relative to eachother
So, I got an answer to my question from @thirtydot (see comment above):
Do you need to support IE7? If not, you can use display: table-cell
CSS layout with left column fixed and right column fluid?
.promoBlock { width:90%; margin:auto; }
.promoImg { width:300px; float:left; background-color:red; }
.promoContent { margin-left:300px; background-color:green; }
Code: http://jsfiddle.net/P4RBj/
P.S: Didn't get promoblock needs to fix at 120px. If so, your inner div is wider (300px).
Two Column Div Layout: Left = Fluid, Right = Fixed and Scrollable
Try this - jsFiddle
body {
margin: 0 0 0 0;
background-color: #797979;
/*overflow: hidden;*/
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
position:absolute;
right:200px;
left:0px;
padding:20px;
}
#right-sidebar {
background-color: #cacaca;
position:fixed;
overflow-y:scroll;
right:0px;
width:200px;
height:100%;
}
2 columns, one side fluid , one side fixed
Turn your classes into ids or they will both inherit a width of 100%; then set the width.
.column-ab {background-color: black; width: 100%;}#col-aside, #col-content {float: left;}#col-content {background-color: cyan; width: calc(100% - 300px);}#col-aside {background-color: yellow; width: 300px;}.column-ab:after {display: table; content: ""; clear: both;} /* clear */
<div class="column-ab"> <div id="col-content">content section</div> <div id="col-aside">side section</div></div>
Related Topics
How to Combine Class and Id in CSS Selector
How and Where to Use ::Ng-Deep
Which CSS Properties Create a Stacking Context
Changing Angular Material Mat-Dialog-Content Styles
How to Set the Width of Select Box Options
How to Change the Symbol When Click in CSS
Change Color and Appearance of Drop Down Arrow
Should I Avoid Using !Important in Css
Css Auto Hide Elements After 5 Seconds
Make a Div Fill an Entire Table Cell
Css Hover Drop Down Menu Disappears When Trying to Select Menu Option
How to Style Icon Color, Size, and Shadow of Font Awesome Icons
Internet Explorer'S CSS Rules Limits
Amazon S3 Cors (Cross-Origin Resource Sharing) and Firefox Cross-Domain Font Loading
React - Component Full Screen (With Height 100%)