This code works in Chrome as I want but not in IE or Firefox. To be more clear and satisfy SO constrains about the comment-code ratio in a post I'd like that only the content area being scrollable when the viewport goes bellow 300px or the content simply does not fit. Actually IE is my only concern. How could I achieve the same behavior under IE >= v10.
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
overflow: hidden;
}
#table {
display: table;
height: 100%;
width: 100%;
}
.navBar {
width: auto;
height: 72px;
overflow: auto;
border-bottom: 1px solid #bbb;
display: table-row;
}
.results {
background: gray;
width: 100%;
height: 100%;
overflow: auto;
display: table-row;
}
.results > div {
height: 100%;
overflow: auto;
}
#media screen and (max-height: 300px) {
footer {
display: none;
}
}
<body>
<div id="table">
<div class='navBar'>header</div>
<div class='results'>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at
venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque
ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis
lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a
venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales
leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend
sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div>
</div>
<footer>footer</footer>
</div>
</body>
What do you think?
Is it a solution? I got the idea from here
<div class="table">
<!-- Header -->
<div class="row header">Header</div>
<div class="row content">
<!-- Use inner div's with position relative and absolute, to fix cell height, making it overflow correctly. -->
<div class="wrapper">
<div class="inner-content">
<input type="text" />
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div>
<div>Some text.</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row footer">Footer</div>
html, body {
height: 100%;
max-height: 100%;
padding:0px;
margin:0px;
}
.table, .row {
outline: none;
border: none;
outline-style: none;
vertical-align: top;
text-align: left;
}
.table {
border-collapse: collapse;
display: table;
table-layout: fixed;
/* This will ensure the cells within the table will keep there width. */
width: 100%;
height: 100%;
}
.row {
display: table-row;
width: 100%;
}
.header {
background-color: red;
}
.content {
height: 100%;
}
.footer {
background-color: green;
}
.wrapper {
position:relative;
height: 100%
}
.inner-content {
overflow: auto;
position: absolute;
top: 0;
right:0;
bottom: 0;
left: 0;
}
#media screen and (max-height: 300px) {
.footer {
display: none !important;
}
}
I'm not entirely sure what you mean by "only content area being scrollable". This was my interpretation of it:
http://jsfiddle.net/5q1Lgsy6/11/
By using a position: fixed width:100% top bar you can make it so that only the content below it will be scrollable.
I ditched all display: table tags, you don't really need them to organize your content unless that content is supposed to be displayed on an actual table.
Here's the CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
#table {
height: 100%;
width: 100%;
}
.navBar {
background-color: white;
top: 0;
width: 100%;
height: 72px;
border-bottom: 1px solid #bbb;
position: fixed;
}
.results {
margin-top: 72px;
background: gray;
width: 100%;
height: 100%;
overflow: auto;
}
.results > div {
height: 100%;
overflow: auto;
}
#media screen and (max-height: 300px) {
footer {
display: none;
}
}
EDIT: if you also want the footer to be permanently fixed add this to your CSS:
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
background-color: white;
}
there is a way to write css for IE
IE-6 ONLY
* html #div {
height: 300px;
}
IE-7 ONLY
*+html #div {
height: 300px;
}
IE-8 ONLY
#div {
height: 300px\0/;
}
IE-7 & IE-8
#div {
height: 300px\9;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}
Related
I am trying to centre and overall set elements using css display property but i encountered a problem.
Once i added a navbar as an element whole structure got changed it's place.
Here is the code before i added navbar:
body {
display: flex;
justify-content: center;
}
.content {
display: inline-flex;
width: 600px;
height: 100%;
border-width: 1px;
justify-content: center;
}
.nav {
width: 100%;
height: 100px;
border-width: 1px;
background-color: #000000;
display: block;
}
.menu {
display: inline-block;
width: 200px;
height: 100%;
background-color: #3F4E62;
}
.article {
display: inline-block;
width: 380px;
height: 100%;
background-color: #dddddd;
}
.item{
color: #FFFFFF;
font-family: Georgia;
display: block;
}
<div class="content"><div class="menu"><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a></div><div class="article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis non eros pellentesque
commodo. Phasellus elit mauris, ultricies ac sem volutpat, efficitur convallis nibh. Mauris rutrum
odio nec justo rutrum, sit amet tristique sapien tristique. Nullam ac urna eget tortor suscipit blandit.
Maecenas pharetra faucibus odio quis feugiat. Curabitur a commodo arcu, a pellentesque lorem.
Nulla facilisi. Nullam augue metus, scelerisque sed pulvinar at, fermentum sit amet arcu. Morbi
lobortis suscipit porttitor. In vel tristique lorem, vitae pulvinar sapien. Nullam pretium imperdiet
nibh, eu bibendum arcu egestas ac. Vestibulum faucibus fringilla justo. Nam facilisis
elementum ex, ut fermentum leo feugiat vulputate. Ut molestie, enim ac faucibus mollis, est turpis
varius lectus, at sollicitudin erat ligula vitae tortor. Ut tincidunt sed sem in sodales. Cras tincidunt
ligula diam, quis volutpat quam cursus nec.
</div></div>
Navbar was supposed to be a line across whole window but it got stuck inline with elements from div with class="content".
Here is the code when i added navbar:
body {
display: flex;
justify-content: center;
}
.content {
display: inline-flex;
width: 600px;
height: 100%;
border-width: 1px;
justify-content: center;
}
.nav {
width: 100%;
height: 100px;
border-width: 1px;
background-color: #000000;
display: block;
}
.menu {
display: inline-block;
width: 200px;
height: 100%;
background-color: #3F4E62;
}
.article {
display: inline-block;
width: 380px;
height: 100%;
background-color: #dddddd;
}
.item{
color: #FFFFFF;
font-family: Georgia;
display: block;
}
<div class="nav">Navbar</div>
<div class="content"><div class="menu"><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a></div><div class="article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis non eros pellentesque
commodo. Phasellus elit mauris, ultricies ac sem volutpat, efficitur convallis nibh. Mauris rutrum
odio nec justo rutrum, sit amet tristique sapien tristique. Nullam ac urna eget tortor suscipit blandit.
Maecenas pharetra faucibus odio quis feugiat. Curabitur a commodo arcu, a pellentesque lorem.
Nulla facilisi. Nullam augue metus, scelerisque sed pulvinar at, fermentum sit amet arcu. Morbi
lobortis suscipit porttitor. In vel tristique lorem, vitae pulvinar sapien. Nullam pretium imperdiet
nibh, eu bibendum arcu egestas ac. Vestibulum faucibus fringilla justo. Nam facilisis
elementum ex, ut fermentum leo feugiat vulputate. Ut molestie, enim ac faucibus mollis, est turpis
varius lectus, at sollicitudin erat ligula vitae tortor. Ut tincidunt sed sem in sodales. Cras tincidunt
ligula diam, quis volutpat quam cursus nec.
</div></div>
Leave the body tag and add another div class="main-container"> name it whatever you want with the following style. You're missing the flex-flow: or flex-wrap so the elements are not wrapping and you basically need them to wrap.
.main-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
Here check this:
.main-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.content {
display: inline-flex;
width: 600px;
height: 100%;
border-width: 1px;
justify-content: center;
}
.nav {
width: 100%;
height: 100px;
border-width: 1px;
background-color: #000000;
display: block;
}
.menu {
display: inline-block;
width: 200px;
height: 100%;
background-color: #3f4e62;
}
.article {
display: inline-block;
width: 380px;
height: 100%;
background-color: #dddddd;
}
.item {
color: #ffffff;
font-family: Georgia;
display: block;
}
<div class="main-container">
<div class="nav">Navbar</div>
<div class="content">
<div class="menu"><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a></div>
<div class="article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis non eros pellentesque commodo. Phasellus elit mauris, ultricies ac sem volutpat, efficitur convallis nibh. Mauris rutrum odio nec justo rutrum, sit amet tristique sapien tristique.
Nullam ac urna eget tortor suscipit blandit. Maecenas pharetra faucibus odio quis feugiat. Curabitur a commodo arcu, a pellentesque lorem. Nulla facilisi. Nullam augue metus, scelerisque sed pulvinar at, fermentum sit amet arcu. Morbi lobortis suscipit
porttitor. In vel tristique lorem, vitae pulvinar sapien. Nullam pretium imperdiet nibh, eu bibendum arcu egestas ac. Vestibulum faucibus fringilla justo. Nam facilisis elementum ex, ut fermentum leo feugiat vulputate. Ut molestie, enim ac faucibus
mollis, est turpis varius lectus, at sollicitudin erat ligula vitae tortor. Ut tincidunt sed sem in sodales. Cras tincidunt ligula diam, quis volutpat quam cursus nec.
</div>
</div>
</div>
My HTML structure shows a paragraph first and then a graphics at the bottom. Using CSS, I want to show the graphics at the top and paragraph at the bottom. The paragraph will be dynamic so the height is not fixed. I can't figure out how to solve the issue.
This my code:
.centerDiv {
width: 500px;
margin: 0 auto;
}
.topDiv {
display: inline-block;
width: 460px;
vertical-align: top;
}
.bottomDiv {
display: inline-block;
width: 460px;
height: 100px;
background-color: #ff0000;
vertical-align: top;
}
<div class="centerDiv">
<div>
<div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
<div class="bottomDiv">Graphic</div>
</div>
</div>
If the Graphic has a fixed height you can achieve that using positioning
see the code bellow
.centerDiv {
width: 500px;
margin: 0 auto;
}
/* added code */
.centerDiv>div {
position: relative;
padding-top: 100px; /* padding value equals to bottomDiv's height*/
}
/*---------------*/
.topDiv {
display: inline-block;
width: 460px;
}
.bottomDiv {
display: inline-block;
width: 460px;
height: 100px;
background-color: #ff0000;
/* added code */
position: absolute;
top: 0;
left: 0;
/*---------*/
}
<div class="centerDiv">
<div>
<div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
<div class="bottomDiv">Graphic</div>
</div>
</div>
Or you can use flex-direction: column-reverse; which reverses the order of the div children
But this may not be supported in some browsers
.centerDiv {
width: 500px;
margin: 0 auto;
}
.centerDiv>div {
display: flex;
flex-direction: column-reverse;
}
.topDiv {
display: inline-block;
width: 460px;
}
.bottomDiv {
display: inline-block;
width: 460px;
height: 100px;
background-color: #ff0000;
}
<div class="centerDiv">
<div>
<div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
<div class="bottomDiv">Graphic</div>
</div>
</div>
I am trying to implement the following:
You will see there is text and then a line to its side. I am trying to make the line remain the same distance from the text as the screen decreases in size. This works OK, but when the screen gets smaller the line goes into the 'Test Border' part.
See code below as to how I have implemented this. Perhaps I should be taking a different approach.
Also, a jsfiddle here for your convenience.
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: inline-block;
padding-bottom: 15px;
width: 8%;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: 90%;
}
<h3>Test Border</h3>
<div class="underline"></div>
You can display both blocks as table and specify first block fixed width (as it's only text that does not change).
.wrapper {
display: table;
width: 100%;
vertical-align: bottom;
padding-bottom: 15px;
table-layout: fixed;
}
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: table-cell;
width: 85px;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 100%;
position: relative;
top: -12px;
}
<div class="wrapper">
<h3>Test Border</h3>
<div class="underline"></div>
</div>
I'd probably use flex box like this.
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 10px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Test String</span>
<div class="line"></div>
</div>
This will make the title as wide as the longest unbroken work, and the border will fill up the rest of the space.
Here's what it looks like with paragraphs between each header (an almost real world example)
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 5px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Lorem ipsum dolor</span>
<div class="line"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis metus at semper laoreet. Vestibulum vitae lectus ut justo consequat dignissim et in eros. Duis aliquam, ipsum et imperdiet venenatis, ipsum augue scelerisque ante, eu lacinia dui metus
sed lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu risus a nibh vulputate consectetur. Phasellus id lectus tempor, cursus arcu ut, suscipit augue. Etiam aliquam lobortis semper. Vestibulum dui arcu, faucibus vel suscipit
sed, fermentum sed purus. Vivamus pharetra orci aliquam ligula imperdiet elementum a non tortor. Donec nisl enim, condimentum id nulla quis, vulputate interdum felis. Pellentesque molestie congue urna, eget ultricies est aliquet in. Aenean convallis
magna dolor, vitae facilisis nibh euismod et.
</p>
<div class="border">
<span class="string">Etiam quis molestie</span>
<div class="line"></div>
</div>
<p>
Etiam quis molestie libero. In vitae massa cursus, commodo lectus vel, vehicula felis. Nam venenatis tortor et diam faucibus, vel ullamcorper orci placerat. Mauris at aliquet nunc, quis eleifend turpis. Mauris ultricies at mi ac bibendum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Nulla metus enim, volutpat ut magna sed, dignissim tincidunt lorem. Nam nec tempor urna. Nam eget quam elit. Pellentesque condimentum turpis consequat turpis rhoncus vestibulum. Curabitur efficitur dapibus
tortor ac bibendum. Donec risus nibh, dignissim vel sapien vel, fermentum scelerisque velit. Ut posuere finibus erat, nec bibendum nunc faucibus at.
</p>
<div class="border">
<span class="string">Phasellus sed orci</span>
<div class="line"></div>
</div>
<p>
Phasellus sed orci eget urna commodo luctus a sed felis. Aliquam erat volutpat. Quisque sit amet volutpat magna. Etiam vestibulum, velit sit amet efficitur consectetur, tortor velit consectetur velit, et facilisis ex dolor sit amet quam. Fusce tristique
lorem eget dapibus malesuada. Suspendisse iaculis est nec urna sollicitudin, tincidunt vehicula justo pellentesque. Morbi nulla lorem, tempus a interdum vel, fringilla ut elit. Vestibulum sed neque sed lorem viverra luctus. Suspendisse sapien ipsum,
ultrices vitae posuere eget, tristique sit amet augue. Nam suscipit, dolor et lacinia vulputate, erat nunc lacinia nibh, vel posuere nisl nunc eget enim. Vestibulum suscipit lorem risus, id feugiat sem molestie ac. Integer consectetur nunc sed lacinia
commodo. Quisque cursus purus nec dui euismod, nec porttitor nibh fermentum. Nunc tellus mauris, accumsan vitae tincidunt sit amet, ultricies in elit. Donec elementum libero ipsum, sit amet aliquam tortor volutpat eget. Pellentesque pretium dictum ligula.
</p>
<div class="border">
<span class="string">Fusce ultricies ante</span>
<div class="line"></div>
</div>
<p>
Fusce ultricies ante ut orci laoreet, in luctus quam eleifend. Integer nisl purus, pharetra sit amet ligula id, porta porta risus. Etiam nec varius risus, eget euismod risus. Vivamus pharetra purus vitae turpis ultrices ullamcorper. Proin vestibulum,
tortor id blandit pharetra, sapien augue dictum elit, a efficitur urna magna at lorem. Donec sollicitudin, purus sed pharetra iaculis, dolor mauris pretium est, in vestibulum massa odio vitae sapien. Curabitur scelerisque felis dui, non molestie nisl
viverra in. Integer tempor nec risus quis vulputate. Nulla facilisi. Pellentesque ipsum elit, lacinia et consectetur id, gravida ut arcu. Maecenas vestibulum faucibus rutrum. Duis at egestas purus. Proin ac congue nisl, id placerat turpis. Aenean ac
nisl at odio efficitur convallis sit amet quis ipsum. Mauris scelerisque aliquet libero, nec dapibus lectus.
</p>
I think the best solution is change the markup, because with your code the text in h3 tag could be bigger than your max-width (in fact, it is). Something like this:
.textline {
display: table;
}
h3 {
font-size: 26px;
color: #000 !important;
display: table-cell;
width: 9%;
margin-right: 1%;
vertical-align: bottom;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 90%;
position: relative;
top: -7px;
}
<div class="textline">
<h3>Test border</h3>
<div class="underline"></div>
</div>
When you use percentages you have to take into account the fixed measures of the other elements, width, margins, borders... Not the same 90% of a 1000px screen that one of 500px, the remaining space is less.
You can use calc to solve this issues:
h3 {
font-size: 26px;
color: #000 !important;
width: 95px;
display: inline-block;
padding-bottom: 15px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 100px);
}
<h3>Test Border</h3>
<div class="underline"></div>
You could try using a table display, with the text and line each having their own cell:
<div class="div-row">
<div class="div-cell"><h3>Test Border</h3></div>
<div class="div-cell underline"></div>
<div>
CSS:
.div-row {
display: table-row;
width: 100%;
}
.div-cell {
display: table-cell;
}
I haven't tested this, but the div containing the line should automatically shrink to the available width as your resize the browser window (or as you go from desktop to mobile).
If you want, you could also set a fixed width to the div containing the text.
You can try calc() property and it will work...
Check this fiddle here
What you have to do,
h3 {
font-size: 26px;
display: inline-block;
max-width:90px;
margin-right:10px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 104px);
}
Try the below CSS:
h3 {
font-size: 26px;
color: #000 !important;
display: inline-block;
padding-bottom: 15px;
}
.underline {
border-bottom: 1px solid #C6BCB6;
width: 90%;
}
I'm making a website that is using ajax calls to load a content pane. Just mocking this up quick with some data, (on my website the ajax is working fine, so no need for that here) I cannot get the content pane to scroll when it overflows - the entire page scrolls instead.
There are a TON of questions similar to this but every one I've come across they have not used the overflow tag and it fixed their problem. I've tried that but had no success.
I'm not sure how to get the div to recognize that it is being overflowed. The only way so far that I've managed to get it to scroll, is fixing the height, however I feel like that's poor to do, because depending on the screen size I want it to scroll like one would expect.
Here's the html:
<body>
<div id="content-container">
<img src="http://i.imgur.com/69BtzId.png" alt="logo">
<div class="navbar">
<nav>
<ul>
<li class="homeLink"> HOME
</li>
<li id="activePortfolioLink"> PORTFOLIO
</li>
<li class="aboutLink"> ABOUT
</li>
</ul>
</nav>
</div>
<div id="portfolioUnderline"></div>
</div>
<div id="left">
<ul class="verticalNavBar">
<li id="webDesignLink"> <a>WEB DESIGN</a>
</li>
<li id="uiLink"> <a>USER INTERACTION DESIGN</a>
</li>
<li id="graphicDesignLink"> <a>GRAPHIC/ TYPOGRAPHY DESIGN</a>
</li>
</ul>
</div>
<div id="verticalLine"></div>
<div id="rightContent">
<div class="portfolioImages">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut massa in tortor ullamcorper iaculis. Ut placerat imperdiet metus sed pellentesque. Proin iaculis erat eget fringilla lobortis. Pellentesque sit amet urna condimentum, tristique erat et, egestas ante. Duis eu pulvinar leo, fringilla posuere ligula. Nunc commodo tellus at lorem interdum feugiat. Cras varius consequat diam vitae scelerisque. Mauris nec ligula in mi accumsan scelerisque sed vel augue. Aliquam elementum, dolor id ornare feugiat, ante justo sollicitudin erat, ut gravida velit nibh vel velit. Fusce ultrices consectetur eros, ac tincidunt libero auctor ut. Quisque dapibus congue arcu sed imperdiet. Pellentesque lorem nisi, dictum sit amet libero in, cursus eleifend ante. Nunc vel euismod erat. Duis massa tellus, tincidunt in fermentum ut, sagittis vulputate lectus. Nunc ut iaculis nibh. In congue laoreet arcu commodo imperdiet. Nullam rutrum augue nec mauris rhoncus facilisis. Donec bibendum luctus magna. Vivamus tempor egestas turpis. Curabitur non porta lorem, nec elementum ante. Cras faucibus consequat augue, laoreet pretium lorem tincidunt sed. Vestibulum magna dolor, pulvinar vitae facilisis eget, posuere sit amet est. Suspendisse vel elit a neque laoreet faucibus eget et quam. Integer feugiat, tellus sit amet tempus dignissim, neque justo congue enim, quis commodo neque neque quis orci. Suspendisse scelerisque erat lobortis felis fermentum, in molestie nulla pharetra. Suspendisse lacinia ac orci et tincidunt. Duis lobortis at leo a viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam libero turpis, consequat non convallis at, eleifend non dolor.</br>
</br>
</br>
</br>
</br>Maecenas tincidunt lorem vitae fringilla consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet magna tincidunt, pellentesque arcu posuere, euismod lectus. Sed nec pellentesque diam, id varius quam. Praesent mattis sapien odio, in mattis dui tempus sit amet. Morbi pulvinar odio nec augue tempus varius. Sed porttitor consequat magna, sit amet lobortis mauris congue eleifend. Donec pretium elit vitae egestas rutrum. Sed sapien libero, vulputate eu lacinia sit amet, aliquam et elit. Aenean nisi mi, vulputate id nulla ut, vestibulum porta enim. Nunc quis tellus eleifend, adipiscing lorem in, congue justo. Vivamus ornare risus quis faucibus pretium. Vestibulum eu velit placerat, lacinia justo rutrum, sagittis nisi. Donec quis tincidunt justo, eu posuere mauris. Morbi eleifend, dui eget aliquet adipiscing, tellus risus hendrerit dolor, non aliquet magna sapien malesuada ante. Fusce lobortis commodo sem id tempus. Nulla eget vehicula mi, id volutpat erat. Proin sed enim egestas, rhoncus ipsum a, consectetur mi. Quisque est arcu, tempus a ligula eu, aliquam elementum quam. Sed tristique sit amet sapien eget ornare. In vitae adipiscing neque. Ut aliquet felis vitae porttitor vehicula. Morbi aliquam rhoncus lacinia. Vestibulum at viverra nisl. Donec rhoncus, dolor eu luctus egestas, magna leo consequat justo, ac venenatis odio ligula ac tortor. Nullam faucibus ante enim, vitae cursus mauris interdum ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc turpis massa, viverra vitae rutrum non, elementum sit amet orci.</p>
</div>
</div>
</body>
Here's the CSS:
* {
font-family:'Lato', sans-serif;
font-weight: lighter;
padding: 0;
margin: 0;
color:white;
}
body {
background: #111111;
height: 100%;
}
#content-container {
background-color: #111111;
height: 113px;
width: 100%;
}
#content-container img {
padding: 15px;
padding-top: 15px;
/*float: left; */
}
.navbar {
float: right;
background-color: #111111;
font-size: 25px;
padding-top: 45px;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 15px;
float:right;
}
nav ul li.homeLink a {
padding-left: 41px;
padding-right: 43px;
}
nav ul li.portfolioLink a {
padding-left: 9px;
padding-right: 9px;
padding-bottom: 1px;
}
nav ul li.aboutLink a {
padding-left: 37px;
padding-right: 37px;
}
#activePortfolioLink a {
padding-left: 9px;
padding-right: 9px;
background: #0033cc;
font-weight: normal;
}
#portfolioUnderline {
background-color: #0033cc;
width: 100%;
height: 10px;
margin-top: -12px;
}
#left {
float: left;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left: 300px padding-left:300px;
height:100%;
overflow:scroll;
}
.verticalNavBar {
float: right;
text-align: right;
margin-top: 20px;
color: white;
font-size: 15px;
}
.verticalNavBar li {
list-style: none;
color: white;
padding-top:10px;
padding-bottom: 10px;
}
.verticalNavBar li a {
text-decoration: none;
color: white;
padding: 10px;
}
#verticalLine {
background-color: #0033cc;
float:left;
width: 10px;
height: 905px;
}
#webDesignLink a {
background: #0033cc;
font-weight: normal;
}
.portfolioImages {
margin: 0 auto;
padding-top: 20px;
padding: 10;
margin-right: 10%;
margin-left: 10%;
margin-bottom: 20px;
overflow: auto;
}
img.individualImage {
margin-left: 450px;
}
.portfolioImages p {
font-size: 15px;
font-weight: lighter;
text-align: center;
}
Here's a jsfiddle of the code: http://jsfiddle.net/GGSSj/
Thanks for your time!
You can fix the height in relation to the screen size, but you have to fix the height /somehow/ to get it to scroll independently.
Here is a fiddle with absolute positioning of each segment: http://jsfiddle.net/GGSSj/3/
#content-container {
position:absolute; top:0; left:0; width:100%; height:113px;
}
#left {
position:absolute; top:123px; bottom:0; left:0; width:300px;
}
#rightContent {
position:absolute; top:123px; bottom:0; left:310px; right:0;
overflow-y:scroll;
}
You can fix the height in relation to the screen size, but you will have to fix the height the scrollable container (somehow with javascript for full screen height) to get it to scroll independently.
Give it a try : fiddle updated here
#rightContent {
height: 555px; /* fit height to your needs */
overflow: auto;
}
You need to set your top area and your left area to position:fixed;
http://jsfiddle.net/GGSSj/
#left {
position:fixed;
top: 113px;
left: 0;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left:300px;
padding-top:113px;
height:100%;
overflow: auto;
}
#content-container {
position: fixed;
background-color: #111111;
height: 113px;
width: 100%;
}
I have created a page with a static image positioned to the ride side of the browser at full height (with a gradient over it) and a block of text to the left. I want the image to resize with the browser window, however I do not want the image to go behind the text or to get smaller than the text. When I set a min-width and min-height on the body, for example 1024x768, this doesn't solve the problem. Am I doing something wrong? How should I go about doing this?
Thanks in advance!
Here's my code:
<style type="text/css">
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
min-width: 1024px;
min-height: 768px;
}
#background-image {
position: absolute;
right: 0;
top: 0;
height: 100%;
background-image: url('image.jpg');
z-index: -1;
}
#background-gradient {
position: absolute;
right: 0;
top: 0;
z-index: 0;
height: 100%;
}
#content {
position: absolute;
left: 15%;
top: 15%;
width: 500px;
font-family: Georgia;
font-size: 16px;
}
p.dropcap:first-letter {
float: left;
font-size: 50px;
line-height: 30px;
padding-top: 2px;
padding-right: 4px;
font-family: Georgia;
}
h1 {
font-size: 55px;
}
</style>
</head>
<body>
<img id="background-image" src="image.jpg" />
<img id="background-gradient" src="gradient.png" />
<div id="content">
<h1>[TITLE]</h1>
<p class="dropcap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh lectus, vehicula quis elementum nec, pellentesque vitae est. In in libero pulvinar felis ultrices varius vel at augue. Suspendisse sollicitudin risus eu mauris ultrices nec auctor neque facilisis. Pellentesque commodo tellus quam. Praesent dictum sodales nisi, id tempor neque hendrerit id. Ut non mi a ante pulvinar tempor. Morbi scelerisque metus eu sem iaculis hendrerit. Integer pulvinar ipsum quis ante tincidunt gravida.</p>
<p>Nullam vel tellus sed mauris sagittis egestas at sed lacus. Pellentesque sit amet justo felis. Donec sit amet est in urna consectetur convallis vitae id justo. Sed adipiscing accumsan augue, at cursus lorem bibendum nec. Etiam diam odio, sagittis ut tempor fermentum, elementum eu erat. Vivamus pharetra, nibh vel elementum pulvinar, risus leo ornare felis, eget tincidunt velit odio non turpis. Proin semper metus eget nisi varius varius elementum nisl eleifend. Nulla facilisi. Suspendisse urna sapien, pulvinar non porttitor pellentesque, laoreet id leo. Praesent sed tortor quis tellus eleifend ultricies et eu eros. Sed massa eros, hendrerit eu facilisis sed, fermentum sit amet purus. Nulla aliquam eleifend ante, tincidunt pulvinar dolor elementum eu. Proin quis justo in arcu sollicitudin faucibus ac tincidunt ligula.</p>
</div>
</body>
Put all your HTML code inside a container div which is directly inside body. You can then move the CSS code from body to #container, like this:
#container {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
min-width: 1024px;
min-height: 768px;
}
IIRC you can't set min-width on body. You'll want to be careful though, because the earlier versions of IE don't support min-width.
Just float:right and float:left
And add a margin to give it the previous look
Demo