I have an image and content side by side with the image positioned absolute to the left edge of the viewport and then a column of content. When I resize the browser, the image stays in place and eventually covers the content.
Is it possible to force the image to "push" to the right so that it moves left, out of the viewport as I resize? I can't change the HTML so I am forced to use the existing code.
.container {
max-width: 1230px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.content-wrap {
padding-left: 250px;
}
.floating-image {
position: absolute;
top: 50%;
left: 0;
width: 50%;
transform: translateY(-50%);
max-width: 350px;
}
.floating-image img {
max-width: 100%;
height: auto;
}
<div class="container">
<div id="" class="row-wrapper">
<div class="content-wrap ">
<h2>ABOUT US</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan porta ultrices. Quisque tincidunt felis tellus, vel pharetra nisi condimentum vitae. Etiam mollis scelerisque leo, sed posuere tortor vulputate ut. Aliquam sed nisi id tortor euismod volutpat. Praesent laoreet dictum elit. Donec placerat blandit eleifend. Pellentesque molestie metus mi. Nullam eleifend venenatis imperdiet. Suspendisse egestas lorem eu turpis sollicitudin hendrerit. Aenean ultricies ultrices tortor, at efficitur mi dapibus eu. Donec ut pharetra sapien.</p>
</p>
</div>
<div class="alignment-wrap text-left">
<div class="img-wrap floating-image">
<img src="https://via.placeholder.com/750">
</div>
</div>
</div>
</div>
You can use media queries to hide the image when the size of the window is below specified length.
So maybe try something like this:
#media (max-width: [desired width]px) {
.floating-image img {
display: none;
}
}
Related
What would be a good way of positioning two divs (green and yellow) inside a parent div (blue outline) so that it looks like in the second drawing below? (First drawing is how divs stack by default).
I have a number of these blue divs whose green divs are variable height (different amount of text) and the yellow divs are always the same.
I want the yellow divs to always be at the bottom of the container.
Edit: Forgot to mention that all my blue parent divs should be same height
I tried positioning yellow divs as position:absolute with bottom:0 and blue divs to position:relative but this didn't work because then if one of the green divs has a lot of text it will run into and text will overlap the yellow div;
Blue parent divs are set to height:100%
What am I missing here?
Sorry if newbie question, I'm just getting into CSS and UI design.
You can make use of the flexbox properties. I just set the height for snippet purpose. You can alter the height based on your preference and check the text.
.parent {
display: flex; /* Activate Flexbox container */
flex-direction: column; /* To set the main axis in block direction */
justify-content: space-between; /* Align them distributed equally from first to last */
height: 150px;
width: 200px;
border: 5px solid #00A2E8;
}
.child1 {
background: green;
height: 25%;
}
.child2 {
background: yellow;
height: 25%;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Assuming the yellow div is a fixed height this is pretty easy
.parent {
/*Children will be positioned relative to this*/
position: relative;
/*Allow to be > 100% if content requies it*/
/*154 = height of yellow div + border*/
min-height: calc(100vh - 154px);
/*Height of yellow div*/
padding-bottom: 150px;
border: 2px solid blue;
/*The following is purely for demo purposes*/
width: 25%;
display: inline-block;
vertical-align: top;
}
/*The Green div is pretty standard*/
.green {
background-color: green;
color: white;
}
.yellow {
background-color: yellow;
/*Fixed height*/
height: 150px;
/*Set to postion absolute - relative to parent*/
position: absolute;
/*Set bottom to bottom of parent*/
bottom: 0;
/*Giv it a width*/
width: 100%
}
/*Tweak margins for first and last paragrpahs*/
.green p:first-of-type {
margin-top: 0;
}
.green p:last-of-type {
margin-bottom: 0;
}
body {
margin: 0
}
<div class="parent">
<div class="green">
<p>Some text</p>
</div>
<div class="yellow">
</div>
</div>
<div class="parent">
<div class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nibh justo, tincidunt sed elementum id, dictum quis nunc. Pellentesque et sodales mi.
</p>
</div>
<div class="yellow">
</div>
</div>
<div class="parent">
<div class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nibh justo, tincidunt sed elementum id, dictum quis nunc. Pellentesque et sodales mi. Mauris luctus leo ac eros tempor, quis gravida leo pellentesque. Etiam odio nisl, lobortis ut elit
ut, mollis eleifend ex. Etiam et risus at diam iaculis sagittis. Pellentesque porttitor odio suscipit, fringilla odio et, laoreet lectus. Nunc tincidunt ultrices condimentum. Nulla sit amet ante posuere, convallis justo vitae, facilisis orci. In
congue egestas diam vitae fermentum. Vivamus efficitur ligula sed tincidunt blandit. Etiam feugiat egestas sem ut pellentesque. Nulla ac dui bibendum, finibus mi vitae, suscipit quam.
</p>
<p>
Etiam pellentesque, diam eget condimentum rutrum, odio orci ultrices eros, in tincidunt magna tortor id augue. Nunc vitae dolor a risus egestas hendrerit a et augue. Pellentesque rhoncus lacus elit, at laoreet dolor pretium condimentum. Sed egestas placerat
ante, in convallis arcu facilisis id. Sed nec rutrum velit. Fusce eget sem turpis. Nulla facilisi. Nam suscipit ante leo, non viverra mauris ultrices id. Donec dui ligula, aliquet sed risus vitae, mollis posuere est. Aenean elementum, libero quis
fermentum dictum, sem lacus volutpat orci, quis rutrum ante odio eleifend risus. Nullam placerat et lacus in sagittis. Suspendisse potenti. Maecenas ullamcorper cursus ligula sit amet ullamcorper.
</p>
</div>
<div class="yellow">
</div>
</div>
If you use flex this will be supereasy -:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 500px;
border: 2px solid blue;
}
.green {
flex: 1;
width: 100%;
background: green;
}
.white {
flex: 1;
width: 100%;
background: white;
}
.yellow {
flex: 1;
width: 100%;
background: blue;
}
<div class="container">
<div class="green"></div>
<div class="white"></div>
<div class="yellow"></div>
</div>
In this case we have given flex: 1 for all the divs, so the ratio
of all the 3 divs is 1:1:1.
If you give the value of flex to be 1,2,1 then the ratio will be
1:2:1 i.e. 25%,50%,25% of the total height of container.
Also we need to define height for outer div so that ratio distribution can happen.
How could I limit an image's maximum height so it would be the same as its sibling's height regardless of screen size.
The result which is acceptable =>
Same height - √
A result which isn't acceptable since image column height exceeds its sibling's => (DIV - .main-content).
Not valid one - X
P.S. Background-image property is not suitable in this case.
.container {
display: flex;
height: 100%;
}
.container>div {
flex: 1;
}
.main-content {
background: pink;
padding: 20px;
}
.sidebar img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="container">
<div class="main-content">
Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo
ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
</div>
<div class="sidebar">
<img src="https://placeimg.com/640/490/nature">
</div>
</div>
Ok, it seem's that I might have found a solution. One way is to position the image as absolute and "stretch it" while object-fit still maintains it's cover property. If someone has some better solution, feel free to share.
.container {
display: flex;
height: 100%;
=
}
.container > div {
flex: 1;
}
.main-content {
background: pink;
padding: 20px;
}
.sidebar img {
object-fit: cover;
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow: auto;
height: 100%;
width: 100%;
}
.sidebar {
position: relative;
}
<div class="container">
<div class="main-content">
Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi.
Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
</div>
<div class="sidebar">
<div><img src="https://placeimg.com/640/1000/nature"></div>
</div>
</div>
This question already has answers here:
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
(15 answers)
Closed 7 years ago.
I'm trying to build a web template in which the main content resides in a div called #content. #content is 90% the width of its parent container, #wrapper, and has a max-width of 1200px. But I also want to have the occasional section that spans the entire width of the browser window. (I can't just apply the 90% width rule to each regular section, because sometimes there will be a sidebar that exists outside of #content, and the sidebar and #content need to have the 90% width applied to them as a whole.)
How do I do this? I played around with negative margins, but I couldn't figure it out.
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: #DDD;
}
#content {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background-color: #FFF;
padding: 1em;
}
.full-width {
background-color: #333;
color: #EEE;
padding: 1em;
margin: 0 -10%; /* obviously this doesn't work */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section> <!-- regular -->
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
When you are wrapping content within an element constrained by margin limits, then you must compensate for this space "taken" from children of it.
If your parent div is 90% width of the body, it means all 100% children will take full width of that 90% not 100%, so how to fix this?
Those children must be 110% width and take negative margin.
Something like:
.content {
width: 90%;
margin: 0 auto;
}
.offmargins {
width: 110%;
margin-left: -6%;
background: #ccc;
padding: 1%;
}
Here is an example:
jQuery(document).ready(function(){
jQuery(window).on('resize', adapt);
adapt();
});
function adapt() {
jQuery('.full-width').css({
width: jQuery(window).width(),
marginLeft: '-6.2%'
});
}
#content {
width: 90%;
margin: 0 auto;
max-width: 1200px;
}
section {
width: 90%;
margin: 0 auto;
}
.full-width {
background: #ccc;
padding: .5em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section> <!-- regular -->
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
</div> <!-- content -->
</div> <!-- wrapper -->
Another approach without JS:
#content {
width: 90%;
margin: 0 auto;
max-width: 1200px;
}
section {
width: 90%;
margin: 0 auto;
}
.full-width {
background: #ccc;
padding: .5em 0;
position: relative;
width: 100vw;
left: calc(-50vw + 50%);
}
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section> <!-- regular -->
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
</div> <!-- content -->
</div> <!-- wrapper -->
Is there some reason why you can't have two different sized sections? It seems to me that you just need to have two containers - one that is restricted to 90%/1200px and one that isnt:
section {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background-color: #FFF;
padding: 1em;
box-sizing:border-box;
}
section.full-width {
background-color: #333;
color: #EEE;
width: 100%;
max-width: inherit;
}
See: http://jsfiddle.net/t9wuapb9/
or the following snippet:
html, body {
background-color: #DDD;
margin:0;
}
#wrapper, #content {
width: 100%;
}
section {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background-color: #FFF;
padding: 1em;
box-sizing:border-box;
}
section.full-width {
background-color: #333;
color: #EEE;
width: 100%;
max-width: inherit;
}
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section>
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section>
</div>
</div>
I have this tricky CSS problem: I have this HTML:
<div id="wrapper">
<div class="left"></div>
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus volutpat turpis at iaculis. Proin at nisl leo. Morbi nec blandit leo? Pellentesque interdum nunc sed nisl rhoncus gravida. Nunc sollicitudin, mi sit amet porta mollis, metus erat ornare odio, eu accumsan mauris diam nec augue. Ut tincidunt dui at lorem consequat vitae consectetur sapien pharetra. Suspendisse potenti. Donec turpis enim, varius accumsan congue vitae, rhoncus ut justo. Curabitur tristique lobortis eros ut pharetra. Maecenas non condimentum justo. Integer tincidunt; velit quis auctor varius, magna lorem pharetra urna, eget pellentesque leo nibh at mi. Ut pretium bibendum dui vel venenatis. Proin vel sem vitae lacus tincidunt bibendum. Pellentesque blandit mauris sit amet mauris sollicitudin pretium. In molestie condimentum nisi placerat consequat.
</div>
<div class="right"></div>
</div>
With this CSS:
#wrapper {
position: relative;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
height: 47px;
}
#scroll {
position: relative;
height: 100%;
width: 10000px;
}
div.left, div.right {
position: absolute;
display: block;
background-color: rgba(255, 0, 0, 0.5);
width: 24px;
height: 100%;
z-index: 100;
top: 0;
}
div.left {
left: 0;
}
div.right {
right: 0;
}
And the visual result is this:
For some reason, the div.right is moving when I scroll the #scroll. I want it to always float at the boundary of #wrapper.
This is what I get right now:
Here is the jsfiddle: http://jsfiddle.net/b5fYH/
Thank you
Edit
Just because it wasn't obvious, it must work on mobile devices.
You have to know the difference between position: absolute and position: fixed.
The first one means: place the element in absolute position within relative element and keep in in that place (relatively).
The second: place the element in absolute position within window (frame) and keep it there no matter what happens.
Check this fiddle: http://jsfiddle.net/b5fYH/1/
The problem is with how overflow-x changes the wrapper div width.
The solution I found was:
Demo: http://jsfiddle.net/5jWpG/
wrapping the whole thing with a new div with the id wrapper-container
then adding the following CSS code:
#wrapper-container {
position: relative;
}
#wrapper {
position: static; /* or remove position relative from your code */
}
div.left, div.right {
bottom: 16px;
height: auto; /* or remove height: 100% from your code */
}
I'm trying to create a scroll bar inside the #main div so that I can scroll that without scrolling the page or the title but it isn't working. What am I missing?
My code is as follows:
CSS
#topbar {
height: 40px;
background-color: blue;
}
#sidebar {
position: absolute;
top: 40px;
bottom: 0px;
width: 80px;
overflow: hidden;
}
#title {
height:30px;
background-color: red;
}
#main {
height: auto;
overflow: scroll;
}
HTML
<div id="topbar">
hello
</div>
<div id="sidebar">
<div id="title">
title
</div>
<div id="main">
<!-- lots and lots of text-->
</div>
</div>
You can find an example JSFiddle here: http://jsfiddle.net/PTRCr/
Thanks
You're still on this project I see. There's also a lot of answers, but I see no one has made a working example of what I think you're asking for.
Here's a working example that (I hope) does what I think you're asking for.
I added content shifting wrappers so that the height can still be 100%. You can read more about that technique from this answer. I also removed all that absolute positioning, I see no reason why you should do that.
Each wrapper adjusts for the previous content, first the top bar with the height 40px and then the title with 30px.
This example should also follow your previous specifications, where the scrollbars will stay on the same baseline when resized.
As you can see, by the code below, it is possible to do a CSS only solution despite what others have lead you to believe. It just takes a bit of tricks from the bag of CSS holding.
Man, I'm such a dork.
Example | Code
HTML
<div id='container'>
<div id="top-bar">hello</div>
<div class="wrapper">
<div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div><div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div><div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div><div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div>
</div>
</div>
CSS
body, html{
height:100%;
width: 100%;
line-height: 100%;
margin: 0; /* Normalization */
padding: 0; /* Normalization */
}
div{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#container{
height:100%;
width: 100%;
text-align: center;
overflow: auto;
}
#top-bar{
height: 40px;
line-height: 40px;
border: 1px solid lightblue;
background: blue;
color: white;
text-align: center;
}
.side-bar {
width: 120px;
height: 100%;
text-align: center;
color: white;
border: 1px solid DarkOrchid;
display: inline-block;
vertical-align: top;
}
.title {
height:30px;
line-height: 30px;
border: 1px solid salmon;
background: red;
}
.wrapper{
margin-top: -40px;
padding-top: 40px;
height: 100%;
width: 100%;
white-space: nowrap;
}
.wrapper > div{
white-space: normal;
}
.content_wrapper{
margin-top: -30px;
padding-top: 30px;
height: 100%;
}
.content{
color: black;
height: 100%;
overflow: auto;
}
The element you want to be scrollable, should
Have height and width defined
have attribute overflow:auto
Example:
.scrollArea {
width: 275px;
height: 100px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
float: left;
overflow: auto;
}
CSS are stylesheet whose only purpose are to style document. They cannot investigate a pre-existing elements.
The only ways are whether the size of the div has to be fixed or you have to use some JavaScript to find out the exact height. The ways of which this can be done with CSS have already been presented by other users.
So, here is a way you can do using jQuery
$("#main").height($(document).innerHeight()-$("#title").outerHeight() - $("#topBar").outerHeight());
Demo
In your case change CSS:
#sidebar {
position: absolute;
top: 40px;
bottom: 40px;
width: 80px;
overflow: scroll;
}
You should define the height of the <div id="main" to show the scrollbar on it. whether you calculate it using javascript or jquery.
#topbar {
height: 40px;
background-color: blue;
}
#sidebar {
position:absolute;
top: 40px;
bottom: 40px;
width: auto;
height:200px;
overflow: hidden;
}
#title {
height:30px;
background-color: red;
}
#main {
height: 100px;
width: 100%;
overflow:auto;
}
Check this updated jsFiddle.
You need to set height for #main. It is working at http://jsfiddle.net/PTRCr/7/
#main {
height: 100px;
overflow-y: scroll;
}
It is only possible if you know the height of your #title, in either px or as a percentage of its parent container
#title set in px jsFiddle
#main {
position:absolute;
top:30px; /* set this to whatever you have set the height of #title to*/
bottom:0px;
overflow-y: scroll;
}
#title set as % jsFiddle - Tested in IE/FF/Chrome