I want a CSS style for my html reports that should be nice to read: therefore body has a maximum width and is centered. I also want figures/img to be centered relatively to the page, when the image is wider than the container and when not it should also be centered.
I have tried some translateX stuff, and also tried the display: contents; option. I have failed using position: absolute;, because then the consecutive figures are vertically overlapping...
Example snippet below. How can I achieve the centering?
body {
background-color: #ebebeb;
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
figure,
div.figure {
position: relative;
text-align: center;
border: 1px solid #44c;
padding: 2px;
left: 50%;
transform: translateX(-50%);
}
img {
background-color: #999;
padding: 2px;
}
<body>
<p>
Some text inside a paragraph that should not be too wide and centered in the page. bla bla bla blabla bla bla aaaaaaaaaaaaaaaaaa aaa aaaaa aaaaaaaaaaaaaaa aaa.
</p>
<figure>
<img width=500px src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Seine_wide.jpg/640px-Seine_wide.jpg"></img>
</figure>
<p>
Some text below.
</p>
</body>
Like this?
note: you need to change max-width on .cont to make the center container grow bigger or smaller
body{
margin:0;
padding:0;
text-align:center;
vertical-align: top;
}
.cont{
text-align:center;
display: inline-block;
max-width:600px;
vertical-align: top;
}
figure{
display: inline-block;
margin:0;
vertical-align: top;
}
img{
max-width:100%;
vertical-align: top;
}
p{
box-sizing: border-box;
text-align:left;
padding:10px 5px;
vertical-align: top;
}
<div class="cont">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Seine_wide.jpg/640px-Seine_wide.jpg" alt="">
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed vehicula erat. Proin odio nisi, fermentum ut nisi eu, laoreet rutrum leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet malesuada arcu. Cras ullamcorper enim justo, sed mattis velit ullamcorper a. Morbi ac egestas lectus. Ut sit amet maximus mauris, eget vehicula ligula. Phasellus sit amet odio gravida, tempus ipsum at, blandit odio. Morbi quis libero non metus ornare varius nec sed tellus. Aenean lacinia, dui vehicula ultrices scelerisque, ex odio viverra nunc, eget posuere tortor est faucibus dui. Aliquam vestibulum libero a auctor ultricies. Morbi sed eros odio. Phasellus molestie sit amet nisl at fermentum. Praesent est erat, tincidunt ut diam nec, molestie varius est. Duis purus libero, placerat sit amet nulla et, pharetra lobortis neque. Quisque quis risus ultricies, semper tellus sit amet, feugiat orci.
</p>
</div>
Alright, I found a concise CSS syntax for limiting the width of everything in <body> except <figure>, using the power of asterisks:
style all descendants of body but not body itself: body * {max-width: 200px;}
override max-width in figure only: figure {max-width: none !important;}
Make img inherit the max-width from the containing figure: img {max-width: inherit;}.
body {
background-color: #ebebeb;
}
body * {
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
figure {
text-align: center;
border: 1px solid #44c;
padding: 2px;
max-width: none !important;
}
img {
background-color: #999;
padding: 2px;
max-width: inherit;
}
<body>
<p>
Some text inside a paragraph that should not be too wide and centered in the page. bla bla bla blabla bla bla aaaaaaaaaaaaaaaaaa aaa aaaaa aaaaaaaaaaaaaaa aaa.
</p>
<figure>
<img width=500px src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Seine_wide.jpg/640px-Seine_wide.jpg"></img>
</figure>
<p>
Some text below.
</p>
</body>
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.
I have a web page which displays 2 columns. On a PC the two columns display exactly as I want them, but something goes wrong when viewed on a mobile screen.
On mobile screen I want the second column to drop below the first column and I want both columns to be centered on the screen, but what happens is that the first column is on the left of the screen and the second column (which is a Facebook feed) is too wide for the screen, even though I set the width at 80%.
Here is my html:
<div class="section group">
<div class="col span_1_of_2">
<img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
<hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
</div>
<div class="col span_2_of_2">
<label>Our Facebook Feed</label>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
</div>
</div><!-- section group -->
and here is my css:
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: auto;
width: 60%;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF TWO */
.span_1_of_2 {
width: 63.1%;
padding-right: 15px;
border-right-style: solid;
border-color: #444444;
border-width: 1px;
}
.span_2_of_2 {
width: 32.2%;
}
/* IF screen is LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: auto;
width: 90%;
}
/* COLUMN SETUP */
.col {
display: block;
margin: auto;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:block;
margin: auto;
}
.group:after {
clear:both;
}
/* GRID OF THREE */
.span_1_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
width: 70%;
}
.span_2_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
width: 50%;
}
}
I have tried changing lots of parameters in the css but cannot make it work and now I am lost for options.
Can anyone help me to get these columns aligned?
Many Thanks
Tog
by using flex & flex direction you can change how the columns are placed.
you can read more here
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.section{display:flex;flex-direction:column;}
.span_1_of_2{flex:1;padding:5px;}
.span_2_of_2{flex:1;padding:5px}
#media screen and (min-width:768px){
.section{display:flex;flex-direction:row;}
}
<div class="section group">
<div class="col span_1_of_2">
<img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
<hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
</div>
<div class="col span_2_of_2">
<label>Our Facebook Feed</label>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
</div>
</div><!-- section group -->
Div should not be over Div with background image with divs inside, but for some reason the about div is displayed over the nav:
body {
margin: 0;
padding: 0;
/*background-color: blue;*/
}
.divider {
background-color: #be2b27;
width: 100%;
height: 100px;
position: absolute;
display: block;
padding: 0;
}
.divider h1 {
font-family: "Nexa Light";
font-size: 2em;
color: white;
text-align:left;
padding-left: 10px;
}
.lorem-text {
font-family: "Menlo";
font-size: 1.2em;
color: white;
}
.start-section {
margin-top: 30px;
/* position: absolute; */
padding-left: 20px;
padding-top: 20px;
}
#start-bg {
background-image: url(water.jpg);
background-color:#9abee1;
background-repeat: round;
height:100%;
position: absolute;
}
#home-head {
font-family: 'Nexa Light';
/* font-size: ; */
padding-top: 30px;
color: white;
}
.nav { }
<div id="start-bg">
<!--<div class="nav"...>...</div>-->
<div class="start-section">
<h1 id="home-head">Landing Page</h1>
<p class="lorem-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare est in maximus vestibulum.
Mauris eu tincidunt quam.<br> In commodo neque id tortor mattis, non consectetur ante tincidunt.
Nunc ultrices ultricies purus, id finibus justo eleifend sit amet.<br>
Sed in iaculis libero, et gravida nibh.
Proin mollis, nibh eu rhoncus scelerisque, orci ex posuere mi, id pharetra purus est suscipit sapien.
Aliquam fermentum dignissim ultricies. Cras vitae neque tincidunt, tristique neque at, ornare leo.<br>
Integer gravida lectus sed venenatis auctor. Vestibulum sed ligula eget dui ultrices luctus.<br>
Etiam dapibus auctor sollicitudin. Nam vel dui non lorem semper scelerisque. Donec sed condimentum mauris.
Maecenas ac enim sit amet orci sodales porta.
</p>
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150"><br>
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150"><br>
</div>
</div>
<div class="divider">
<h1>About</h1>
</div>
There must be something wrong with the positions or something or the fact that when the div has a background image it is not registered as holding any content so the about div is displayed above it.
What do I need to do?
I want the div to be displayed after the background image ends and stays there when I remove the images. If you need the nav html and css code i will give it to you.
#start-bg {
background-image: url(water.jpg);
background-color:#9abee1;
background-repeat: round;
height:100%;
position: absolute;
}
If you remove:
position: absolute;
Red bar go to bottom bottom of the page.
I am trying to implement a sticky footer with CSS using this: http://www.cssstickyfooter.com/using-sticky-footer-code.html .
I have almost got it working, but when having floats in my content container, I find that the footer will overlap a bit of the content.
This is the markup:
<div class="container" id="content-area">
<div class="module-content" id="mycontent">
<div class="menu">
<ul>
<li>
<a class="current-page" href="http://localhost/">1</a>
</li>
</ul>
</div>
<div class="module-content">
<div>
<p>Lorem ipsum dolor sit amet, consequat et metus, platea
posuere adipiscing porttitor dis amet ut. Turpis diam amet,
mollit commodo. Fusce vestibulum habitant, auctor vel ac
dui, nulla lacus hac, raesent euismod habitant eros massa
nulla. Justo dui, facilisis cras. Est ante maecenas
vehicula, etiam vestibulum mi lorem massa, sed nullam
suspendisse lectus ante purus gravida, iaculis urna pede
fermentum. Arcu id ligula arcu, erat vivamus quisque
quisque, tristique ipsum et. Sociis duis ut, morbi dolor
duis volutpat lacus viverra, scelerisque sodales sed, vel
nulla. Elit pede nullam ullamcorper consectetuer ac massa,
lobortis eget id dictumst et quis, nulla metus. Magnis id
id suscipit porttitor faucibus, felis commodo risus massa,
fusce tempus praesent aliquet sit vulputate tempor.</p>
</div>
</div>
</div>
</div>
<div class="container" id="footer">
<div class="container">
<p>Lorem ipsum dolor sit amet, consequat et metus, platea
posuere adipiscing porttitor dis amet ut. Turpis diam amet,
mollit commodo. Fusce vestibulum habitant, auctor vel ac dui,
nulla lacus hac,</p>
</div>
</div>
And the CSS:
html, body {
height: 100%;
}
#content-area {
min-height: 100%;
overflow: auto;
position: relative;
}
.container {
margin: 0 auto;
width: 985px;
}
#mycontent .menu {
float: left;
margin-right: 10px;
padding-top: 13px;
width: 100px;
}
#mycontent .module-content {
float: left;
width: 700px;
}
#footer {
color: red;
background: black;
opacity: 0.6;
height: 70px;
margin-top: -70px;
width: 100%;
clear: both;
}
And a fiddle of the above: http://jsfiddle.net/CfuAg/
And a picture of what's happening
Why is this happening and what are some ways to fix it? I tried adding a padding of 70px to #content-area, but it pushes the footer down by 70px and doesn't stick to the buttom of the window anymore.
Fixed! overflow: auto was assigned to the wrong element (it should be assigned to .module-content) and module-content should have a bottom-padding with a height of the footer:
html, body {
height: 100%;
}
#content-area {
min-height: 100%;
position: relative;
}
.container {
margin: 0 auto;
width: 985px;
}
#mycontent .menu {
float: left;
margin-right: 10px;
padding-top: 13px;
width: 100px;
}
#mycontent .module-content {
float: left;
width: 700px;
overflow: auto;
padding-bottom: 70px;
}
#footer {
color: red;
background: black;
opacity: 0.6;
height: 70px;
margin-top: -70px;
width: 100%;
clear: both;
}
I've modify your fiddle to make it works the way I understood what you're looking for.
I've remove the clear: both; and margin-top: -70px; and use instead the bottom property which I've set to 0
http://jsfiddle.net/CfuAg/4/
Hope this is what you looked for.
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