I'm in the process of making a website and I'm terrible at CSS so I'm running into a few issues that I'm not sure how to deal with.
This is the website site I'm working on here:
http://www2.hawaii.edu/~akinsey/sandbox/broken/
I'm having two main issues. The first is that when the content flows past the bottom of the page it messes up the background on the content div. How can I make it so when the text overflows the page, the tiling of the content div doesn't stop (You can see what I'm talking about if you scroll to the bottom of the link above). I'm pretty sure this is happening because I'm using a fixed position for the main div wrapper. The reason I did this was so the content div would extend all the way to the bottom. Without the fixed position it was stretching all the way to the bottom, but it caused the page to have a vertical scroll bar even though there was no content on the page.
The second issue I'm having is with the Hawaiian Pattern background image on the right. I wasn't too sure how to accomplish this: I want the image to be exactly where it is now, but currently when you scroll so does that particular background image. Essentially I want it attached to the right side of all the page content (like it is now), and to stay in that position even when you re-size the page or scroll.
Basically I want the webpage to look like this version:
http://www2.hawaii.edu/~akinsey/sandbox/index2.html
But with a working scroll bar that doesn't mess up all of the background images.
Here is my current css:
html { text-align: center; margin:0; padding:0; height:100%; }
body { text-align: center; margin:0; padding:0; height:100%; background-image:url('../image/bg.gif'); background-repeat:repeat-x; }
#wrapper { height:100%; width:100%; margin:0 auto; position: fixed; }
#innerwrapper { margin-left:auto; margin-right:auto; width:975px; height:100%; background-image: url("../image/hawaiianpattern.gif"); background-repeat:no-repeat; background-position: right top; }
#header { margin-left:auto; margin-right:auto; width:810px; background-image:url('../image/header1.png'); height:100px; }
#navbar { margin-left:auto; margin-right:auto; width:800px; height:35px; background-image: url('../image/navbg.gif'); background-repeat:repeat-x; }
#content { margin-left:auto; margin-right:auto; width:804px; height:100%; background-image: url('../image/contentbg.gif'); background-repeat:repeat-y; }
#contentholder { padding-top:10px; text-align:left; margin-left:auto; margin-right:auto; width:90%; height:100%; }
And here is the accompanying html:
<!-- Site Wrapper -->
<div id="wrapper">
<div id="innerwrapper">
<!-- Header -->
<div id="header"></div>
<!-- Navigation Bar -->
<div id="navbar">
<ul class="lavaLampNoImage" id="1">
<li id="l1" class="current"><a id="n1" class="navlink" style="color:black" href="#">Home</a></li>
<li id="l2" ><a id="n2" class="navlink" href="#">About</a></li>
<li id="l3" ><a id="n3" class="navlink" href="#">Forum</a></li>
<li id="l4" ><a id="n4" class="navlink" href="#">Contact</a></li>
</ul>
</div>
<!-- Content -->
<div id="content">
<div id="contentholder">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus urna, ut consequat nibh. In ut pharetra nisl. Etiam vitae ante sed sem fermentum lobortis. Cras ac varius magna. Nunc fringilla dolor id diam lobortis dapibus. Etiam lobortis, elit vitae lobortis sagittis, lacus orci cursus ligula, ut suscipit libero est eu odio. Mauris tellus est, tristique id convallis tincidunt, placerat at enim. Sed augue ante, molestie a tempus a, vehicula nec ligula. Etiam rhoncus, est eget ultrices pulvinar, ipsum enim congue velit, quis lobortis neque lacus non neque. Sed accumsan felis id neque cursus lacinia. Donec vitae leo ut ante aliquam hendrerit. Morbi commodo, lacus at pretium tristique, justo ante fermentum metus, eget condimentum augue turpis quis urna. Fusce eu erat eget dolor consequat vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Fusce vestibulum vestibulum tortor, sit amet molestie sem euismod eget. Nullam ornare felis ut urna consectetur ut vestibulum risus lacinia. Etiam ligula libero, pharetra sit amet eleifend vel, tincidunt pulvinar magna. Nullam lacinia auctor sollicitudin. Praesent et leo dolor. Etiam lacinia, nisi at aliquet dignissim, tellus ante aliquet arcu, tincidunt facilisis magna nibh cursus tellus. Ut sed orci non justo eleifend luctus id a purus. Etiam pulvinar libero eget purus malesuada a blandit sapien bibendum. Integer laoreet accumsan pulvinar. Proin lobortis molestie odio sed mollis. Aliquam nec dui id erat molestie aliquam eu et risus. Suspendisse ipsum urna, iaculis eget ornare vitae, commodo a enim. Phasellus adipiscing diam eget ante dapibus dictum. Fusce quis massa a diam rhoncus varius eu quis orci. Integer ac urna nibh. Pellentesque ornare nisl sit amet elit euismod aliquet.
</p>
<p>
Nulla egestas dolor sed mi pellentesque auctor. Aliquam dictum congue felis et tempus. Duis eu imperdiet diam. Morbi tristique ornare dapibus. Proin laoreet pellentesque enim. Proin a orci est. Aliquam quis sapien at risus vestibulum dignissim. Donec augue erat, egestas et ornare quis, pulvinar non felis. Donec tincidunt leo nec justo rhoncus varius. Phasellus odio nunc, porta et lobortis quis, luctus vel quam. Maecenas vehicula dictum vehicula. Integer mollis risus nisl. Donec feugiat congue urna, nec elementum orci rhoncus quis. Morbi sit amet elit odio, et aliquam tortor. Donec porttitor ullamcorper lacus, a commodo justo fringilla vel. Ut vel est ut arcu euismod pulvinar at vel ligula. Aliquam vestibulum turpis in mauris venenatis sit amet elementum mi blandit.
</p>
</div>
</div>
</div>
</div>
Any help is greatly appreciated.
Thanks in advance,
Anthony
UPDATE:
Thanks to the advice from Joseph below, I was able to fix the issue with the background pattern scrolling. The updated page can be seen here:
http://www2.hawaii.edu/~akinsey/sandbox/broken/index2.html
Now everything looks great when there is enough content to fill the page, but when there isn't the content div and bgwrap div won't extend to fill the page and turns out looking like this:
http://www2.hawaii.edu/~akinsey/sandbox/broken/
Thanks again for all your help!
and to solve your other problem you could have the following HTML
<div id="bgwrap" style="width: 975px; height: 100%; position: fixed; left: 50%;
margin-left: -495px; background-image: url("../image/hawaiianpattern.gif");
background-repeat: no-repeat; background-position: right top; z-index: -1;"></div>
inserted directly before innerwrapper in wrapper... or anywhere else come to think of it.
EDIT
Oh and remove
background-image:url('../image/header1.png');
from #innerwrapper
If i understood well you can fix one of the problems by removing this line
height:100%;
from #innerwrapper
If you change this, when you resize your background will be as is should be
for the background you may use background-attachment:fixed;
http://www.w3schools.com/cssref/pr_background-attachment.asp
Related
(EDIT: my current code added to bottom of post)
I need to set a value for the height of the div in order for it to hide/scroll overflow properly, but I don't want a div at a specific pixel height. I can solve that by using % or vh units, but I don't actually want to use those units. By that, I mean I don't want my div to always be, for example, 2/3 of the page, because that means the bottom of the div will be a different distance from the bottom of the browser window, like this-
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body > div {
width: 90%;
height: 90%;
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div>
</div>
</body>
</html>
-I want it to be a consistent distance from the bottom of the browser window,
like this-
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
div {
background-color: yellow;
width: 350px;
position: fixed;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div>
</div>
</body>
</html>
(for visual representation primarily, I am not really using the code itself as an example)
Basically, I want my div to be a variable height and hide/scroll overflow, but always 10px from the bottom.
I think these describe the same problem I'm having:
Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x - y), where y is unknown
Getting a scrollable child div to Vertically fill the remainder of its parent dynamically
The answers there are to use tables or flexbox - are these the only options (without using javascript)?
My code:
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, Arial, sans-serif;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 100%;
}
p {
font-size: 9pt;
}
a {
text-decoration: none;
color: black;
}
.container { /*this contains all the divs!!*/
padding: 10px;
}
.header {
}
.name {
float: left;
width: 25vw;
padding-right: 5vw;
}
.about {
width: 65vw;
}
.main { /*this contains divs 'left' and 'right'*/
/*background-color: #CCCCCC;*/
clear: left;
padding-top: 10px;
width: 95vw;
}
.left {
/*background-color: #E6E6E6;*/
float: left;
min-height: 10px;
width: 25vw;
padding-right: 5vw;
}
.hold { /*this is how i tried your solution*/
position: relative;
height: calc(95vh - 10px);
}
.right { /*this is my problem div*/
background-color: #FFFF00;
width: 65vw;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.lorem {
margin-right: 20vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Name </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="name">
<p> Name </p>
</div> <!-- end div name -->
<div class="about">
<p> about </p>
</div> <!-- end div name -->
</div> <!-- end div header -->
<div class="main">
<div class="left">
</div> <!-- end div left -->
<div class="hold">
<div class="right">
<div class="lorem">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat facilisis purus at fermentum. Etiam ultricies iaculis nulla maximus cursus. Maecenas justo nulla, suscipit a dapibus at, lobortis nec mauris. Mauris egestas mi sit amet risus convallis, in hendrerit lorem maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin tempor libero, nec molestie dui tempor sit amet. Aenean molestie ex id nisl venenatis, quis tincidunt lectus porta. Vivamus aliquam lobortis nulla, id porta leo consequat sollicitudin. Ut iaculis neque placerat ipsum placerat tincidunt.
Quisque libero sem, hendrerit quis urna sit amet, mollis venenatis nisl. Morbi vel neque rhoncus, congue purus ac, condimentum nunc. Morbi vestibulum metus nec velit eleifend, ac sodales nulla posuere. Praesent id fermentum massa. Morbi vestibulum lorem nulla, ac vestibulum nunc auctor non. Donec ultricies placerat mauris, at pretium nibh finibus eu. Suspendisse gravida neque nisl, sit amet bibendum ante placerat eget. Sed laoreet suscipit turpis vitae ullamcorper. Mauris quis pharetra eros. Curabitur quis diam non dui elementum facilisis vel ac sem. Duis vitae augue vitae mi pulvinar placerat ut quis purus. Donec sagittis maximus aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus pharetra nisi arcu, in laoreet lacus convallis sed. Nam euismod ligula felis, ut laoreet nisl sodales eget. Maecenas cursus, augue vitae suscipit laoreet, purus magna bibendum tellus, sed maximus ex dui ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget aliquet tellus, in viverra sapien. Sed eget urna mauris. Morbi dapibus dolor et felis viverra condimentum sed a nisl. Integer congue cursus ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nulla risus, pulvinar eget odio vitae, scelerisque cursus magna. Nam maximus eros vitae massa euismod, vel tempus felis vulputate.
Nunc blandit massa a nisl viverra, vitae molestie ex rhoncus. Pellentesque finibus luctus nisi. Sed quis luctus metus. Nullam sed augue ultrices, lacinia dolor ac, egestas ante. In non nisi nibh. Sed vitae dui libero. Duis ut ullamcorper urna. Phasellus quis fringilla leo.
Nulla porta tellus ut nibh pharetra dapibus. Mauris ullamcorper egestas aliquam. Cras posuere scelerisque imperdiet. In ultrices, leo eu molestie bibendum, augue dui semper ante, vel faucibus nibh enim sed eros. Mauris ipsum dui, placerat et tincidunt vitae, laoreet vel enim. Praesent at ligula et neque placerat blandit sed vulputate ipsum. Phasellus sodales, odio nec aliquam pretium, augue lacus mattis quam, nec vulputate purus lorem vitae nisi.
Suspendisse nisl ipsum, volutpat ac dapibus at, tincidunt eget nulla. Mauris ornare a nisi ac fringilla. Maecenas leo sapien, vulputate in dictum a, feugiat in eros. Aliquam sit amet sagittis leo. Mauris metus nisl, convallis eget mollis ut, ullamcorper eu tellus. Pellentesque eu dolor tempor, bibendum leo vitae, maximus velit. Aenean volutpat neque sit amet tellus mattis euismod.
Quisque nec vehicula orci. Curabitur varius fringilla risus, convallis tincidunt velit porttitor vitae. Aenean in lacus nec nunc tempor dignissim nec pretium sem. Nullam finibus odio quis metus ornare, in fermentum elit rutrum. Proin vitae dui in metus vehicula sodales. Donec massa neque, suscipit ac est quis, ultrices auctor risus. Cras eu auctor lectus. Nam sagittis vulputate hendrerit. Maecenas consequat odio justo, at malesuada nulla ullamcorper a. Donec arcu tellus, dignissim ut velit vel, consequat scelerisque dolor. Curabitur dictum vel risus quis consequat.
Pellentesque fringilla eu nisi sed tincidunt. Nulla feugiat sit amet purus sit amet cursus. Suspendisse nibh purus, tincidunt eu congue ut, ultricies id lectus. Phasellus convallis in nibh vel molestie. Nunc condimentum congue justo. In congue, turpis at vulputate imperdiet, dolor erat ultricies turpis, vitae egestas est augue in nisl. Ut ut leo diam. Duis vulputate ligula velit, vitae volutpat felis viverra a. Maecenas justo quam, lobortis a placerat ut, ullamcorper ac lorem. Sed eu vehicula odio.
Fusce id mauris ornare, mollis mi at, vulputate turpis. Praesent a risus feugiat, rutrum lacus nec, sodales nisi. Nulla ullamcorper libero pretium lacus accumsan, eu tempor mi porta. In tincidunt porta feugiat. Cras lectus arcu, convallis nec neque ac, vestibulum pretium ex. Curabitur mi ipsum, commodo ut eros eget, fringilla fringilla tortor. Curabitur maximus tellus ut turpis malesuada, auctor semper lectus porta. Suspendisse non sapien sagittis, dapibus tellus et, egestas quam. Aliquam vitae massa sit amet urna rhoncus rutrum sit amet et lorem. Phasellus gravida justo ut vulputate vestibulum.
Nunc sed tempus metus, sit amet volutpat mi. Quisque sed metus rutrum, iaculis enim sed, sodales lacus. Quisque quis mi ac sapien scelerisque efficitur lacinia et nunc. Proin tincidunt scelerisque turpis, non euismod ante interdum at. Sed vitae velit scelerisque, placerat nulla in, egestas justo. Mauris urna orci, pulvinar a nibh a, luctus pellentesque mauris. Nulla faucibus hendrerit urna non venenatis. Quisque nulla mi, suscipit sit amet nunc eu, dictum ullamcorper tellus. Donec lacus libero, commodo quis mauris pellentesque, feugiat iaculis nisl. Nulla facilisi. Suspendisse sed risus quis risus fringilla condimentum. Aenean aliquet in eros vel volutpat. Vivamus malesuada ultrices lorem sit amet feugiat. In interdum leo ac orci sollicitudin, maximus vestibulum nisl gravida. Sed venenatis pharetra fringilla. Etiam mauris risus, cursus et est tristique, mattis venenatis nisi.
</p>
</div> <!-- end div LOREM -->
</div> <!-- end div main -->
</div> <!-- end div hold -->
</div> <!-- end div container -->
</body>
</html>
You're on the right track! You can combine vh with calc to get the desired effect.
height: calc(100vh - 10px) - assuming the element is positioned at the top of the screen, that'll achieve the effect you're describing.
To handle scroll/overflow, you'll need an inner container - a div inside the one you set the height property on. Give that inner div { height: 100%; overflow: auto; } and you should be all set.
Here's a demo - to see it working, use the full screen view and shrink your browser's height.
/* These styles are just to make this easier to see,
and to normalize the display a little. */
* { box-sizing: border-box; margin: 0; padding: 0; }
.page { width: 100px; border: 2px solid; }
/* Here's the box that locks to some distance from the bottom, in this case 30px */
.outer {
height: calc(100vh - 30px);
position: relative;
border: 1px solid blue;
}
/* And here's the scrollable container inside it */
.inner {
height: 100%;
overflow: auto;
}
<div class="page">
<div class="outer">
<div class="inner">
content content content content
content content content content
content content content content
</div>
</div>
</div>
I need some help with hiding my horizontal scrollbar and still able to scroll. I have used webkit but does not work in IE and firefox. I have seen a lot of help with vertical scrollbar, but does not work with horizontal. Any help?
Update:
I have created a JSFiddle to show my problem. I want to hide the horizontal scrollbar and still able to scroll without using
::-webkit-scrollbar {
display: none;
}
http://jsfiddle.net/o1xoh9w8/1/
Here is how you do it, I have tested this in Chrome, IE, Firefox, Opera, Safari(Windows) and Edge
<h1>You can scroll with mouse wheel</h1>
<div id="box">
<div id="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
h1{font-weight:bold;font-size:2em;} /* ignore only for header */
/* *********************** */
div#box{
height:200px;
width:300px;
overflow:hidden;
border:1px solid black;
padding: 10px;
}
div#content{
height:200px;
width:326px;
/*
* Uncomment to see scrollbar
width:300px;
*/
overflow:auto;
}
Here is a JSFiddle: http://jsfiddle.net/JoshMesser/VUSuZ/
Credits go to creator of the JsFiddle
EDIT:
For vertical it is just a matter of changing the height. What you are doing is you are just pushing the scroll bar outside of what user can see, so to them its not there, while in reality it is there hidden behind elements. Here is a JS Fiddle based on my last one. You will see I just forced p to be in single line to get horizontal scrolling and then increased the height to hide the scroll-able bar.
http://jsfiddle.net/VUSuZ/575/
I used a fixed height approach.
Note: this approach can help only in specific cases.
#container1{
height: 50px;
/* Just for presentation. Can be removed */
border: 1px solid red;
/* Hides content outside this container */
overflow: hidden;
}
#container2{
/* Height is significantly greater than the height of container#1 to hide
any possible scroll */
height: 100px;
overflow: auto;
white-space: nowrap;
}
<div id="container1">
<div id="container2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit, ante laoreet mattis blandit, arcu nisi blandit felis, et molestie justo lacus et sem. Nunc tempor tellus sit amet eleifend tristique. Integer eget condimentum lectus, nec viverra risus. Nullam leo lectus, placerat vitae porta eget, auctor et nisi. Suspendisse feugiat in lacus accumsan tincidunt. Fusce pulvinar accumsan sem sit amet finibus. Curabitur volutpat mi vitae eros mattis congue. In ut sem eu tellus egestas lobortis vitae eu felis. Maecenas sodales, nisl eu bibendum vulputate, neque leo finibus odio, sit amet bibendum libero dolor sed diam. In molestie magna vitae dui vulputate, eu consequat dui ullamcorper. In hac habitasse platea dictumst. Vestibulum pulvinar, mi quis mollis pulvinar, metus justo aliquet arcu, vel venenatis ipsum dolor at sapien. Sed ac odio bibendum, feugiat nibh at, viverra mi. Morbi sem nisi, ultricies non nulla pretium, gravida malesuada neque.
</div>
</div>
(My case is horizontal scrollable buttons container for mobile screens - the buttons are stuck to the above block (+ margin) and have fixed height)
I think you do not want to use
::-webkit-scrollbar {
display: none;
}
Because it will hide all the scroll bars.
A better way to hide the scroll bar but still enable scrolling in a particular container will be to follow the following example:
HTML
<div class="container">
<table>
<tbody>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
</tbody>
</table>
</div>
CSS
.container {
overflow-x: auto;
white-space: nowrap;
}
.container::-webkit-scrollbar {
display: none;
}
I have a side-bar div that will have ads. It should have a fixed width of about 333px and need it to be responsive is possible in its height.
It has a background but when content loads in the main div the side-bar div will not extend the length of the main content. I have tried a few things but get varied results in different browsers.
When in the mobile view or when it's in a small view the side bar should fit to the size of the window width wise and only be has high as the content in the side-bar.
I have loaded a few images for examples to show what I need.
Below is the ccs I have
.main
{
padding: 20px;
}
.side-bar
{
background-image: url('../images/BlueBG.jpg');
width: 333px;
display: block;
height: 100%;
}
This has been asked a few times on SO, but you can use flexbox for this. If you are using bootstrap, you most likely will have a container-fluid class. Simply set the display to flex and all the items inside will become flex-items. This will allow you to have them stretch. In your case, you will have to set container-fluid back to block or set your main and side-bar to flex-basis:100% in a media query for your mobile.
Here's the fiddle: http://jsfiddle.net/56we9rmj/2/
HTML
<div class="container-fluid">
<div class="main"><p>Arcu dictumst nec ultricies aptent rhoncus. Sed fermentum ligula. Donec vitae felis. Lectus nec ad. Tempus et quam. Nec dolor eu. Lacus at in eu dolor penatibus. Quis vivamus vehicula. Mauris dui ullamcorper diam eget pretium lectus consectetuer ultrices tincidunt sit nulla. Lobortis lacus et. Dolor ea placerat etiam diam aenean integer nec erat. Suscipit ut elementum. Consectetuer dui id vestibulum cras egestas. Quis nulla nulla. Pariatur pellentesque amet taciti neque lorem fermentum vehicula amet elit blandit pellentesque. Cras sit gravida. Cras vulputate curabitur mauris purus semper mauris lacus et et pulvinar in justo nullam qui sed quam massa. Integer amet ullamcorper. Feugiat quis sed quam fusce non feugiat amet vitae. Arcu elementum eget justo ac sed quis id tellus.</p>
<p>Vivamus non cras. Turpis in eleifend mattis nam arcu aliquam vulputate felis. Dignissim ligula dignissim habitant nonummy proin. Mauris varius varius. Purus lorem ullamcorper dictum cras in felis ullamcorper vitae. Nunc amet interdum nec adipiscing tempus ac vestibulum primis. Nisl purus orci sed sunt mauris. Odio donec nulla. Pellentesque arcu felis. Et varius ornare eros id quisque. Vel dui velit arcu eget in dignissim nunc nec habitasse habitasse elit quis ac aptent duis volutpat facilisis varius ut sem consectetuer erat arcu. Mauris condimentum sodales luctus a ullamcorper amet a pellentesque tellus ac sit. Nam mauris nulla neque aenean tempus. Mi dui ipsum. Laoreet vitae mauris. Arcu at tristique. Quia mi praesent nibh eu est. Dui libero condimentum elementum risus risus. Ut feugiat diam. Quam semper erat felis ultricies vel. Sed proin sollicitudin. Etiam eleifend morbi imperdiet purus pharetra. Vel diam feugiat. Vel volutpat vulputate. Enim ligula fringilla at nunc risus.</p>
</div>
<div class="side-bar">
<img src="http://placehold.it/300x100" />
<img src="http://placehold.it/300x100" />
</div>
</div>
CSS
.container-fluid {
display:flex;
align-items:stretch;
align-content:stretch;
}
.main {
flex-basis:66.66666667%;
padding:20px;
}
.side-bar {
background:red;
flex-basis:33.3333333%;
}
.side-bar img {
width:100%;
}
#media screen and (max-width:Mobile-PX-HERE) {
.container-fluid {
flex-wrap:wrap;
}
.main, .side-bar {
flex-basis:100%;
}
}
Hope that helps!
Giving position:absolute; and 100% height to the sidebar will do. http://jsfiddle.net/fdf01y4b/
Resize the window or add more text to see it in action
.side-bar {
height: 100%;
position: absolute;
top: 0;
right: 0;
}
If you have problems with the sidebar going out of the parent div, just give position:relative; to the parent wrapper like I did on the Jsfiddle example
<div class="wrapper">
<div class="main">Content</div>
<div class="side-bar">Sidebar</div>
</div>
.wrapper{
position:relative;
}
For smaller screens you can just remove the sidebar position:absolute; to position:initial; with media queries:
#media (max-width: 600px){
.side-bar{
position: initial;
}
}
I'm building a 3 row liquid layout. I have a fixed height header and a footer. I also have a minimum width for the wrapper (for these 3 rows).
The problem is, I can't make the middle one (#content) resize vertically. If I make position:absolute then I lose control over scrolling. I thought I could do it using the top,bottom,margin and padding while setting the height to 100% but I couldn't.
Here's the code that I'm using to test it and here's the fiddle link: http://jsfiddle.net/inhan/kUZgY/ You will see that the lighter gray background won't expand when window is resized.
I'm willing to use CSS only and not use HTML5 features. What am I missing? Thanks for any input.
CSS
body {
margin:0;
padding:0;
border:0;
height:100%;
max-height:100%;
}
* html body { /*IE6 hack*/
padding:30px 0;
}
* html #content { /*IE6 hack*/
height:100%;
width:100%;
}
#wrapper {
width:100%;
min-width:800px;
min-height:100%;
position:absolute;
}
#header, #footer {
position:absolute;
left:0;
width:100%;
height:30px;
overflow:hidden;
background-color:gray;
color:white;
}
#header {
top:0;
}
#footer {
bottom:0;
}
#content {
margin:31px 0;
overflow:hidden;
width:100%;
background:rgba(0,0,0,.2);
}
HTML
<body>
<div id="wrapper">
<div id="header">This is header</div>
<div id="footer">This is footer</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.<br/><br/>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc.
</div>
</div>
</body>
Extra Info
I'm actually not really interested in setting a minimum width for the whole page but some middle content will need that. So if I can, I might wanna make the whole structure respect when there's min-width property in the content that is loaded.
This should be what you're after http://jsfiddle.net/kUZgY/6/
You were just missing html {height:100%;}
I also changed the #header and #footer to position:fixed
I recreated my issue here.
The problem is that the 'left' div should be matching the combined height of 'top' and bottom' right divs. I have been reading articles and tutorials on how to achieve equal height with columns of varying content but none of them seem to apply to the 'stacked' columns.
My current nonworking solution was built on a concept taken from this article:
The only way to make the height of a div equal to the tallest column
is if that div contains all the columns. So to explain this another
way, by placing the columns inside a container we cause the container
to be the height of the tallest column. This is a very useful
structure. For this structure to work correctly in all browsers the
container div must be floated (left or right) plus each of the column
content divs must also be floated, it does not matter which way.
I am aware of the equalHeights jQuery plugin and resize, but I would very much prefer CSS solutions.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id='container'>
<div id='height-container'>
<div id='left'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus, nunc non semper fringilla, nibh mauris aliquam diam, sit amet suscipit purus ligula eu odio. Nulla tortor neque, sodales nec placerat vitae, laoreet a mi. In ac ullamcorper dui. Sed enim tellus, volutpat at tristique eu, condimentum volutpat tellus. Integer massa quam, egestas id vulputate id, ultrices ut felis.
</div>
<div id='right'>
<div id='top'>
Proin condimentum purus tortor, eu laoreet velit. Praesent ornare, mauris eu laoreet suscipit, nibh mauris imperdiet dolor, ut molestie erat tellus ac odio. Etiam tempor eros at neque tincidunt a feugiat massa imperdiet. Vestibulum aliquet nibh sit amet urna facilisis condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare dolor quis neque aliquet lacinia et id tortor. Fusce eu sapien non mi aliquet condimentum id vitae ante. Phasellus sit amet eros vitae velit fringilla facilisis non at eros. In non venenatis lectus. Nam tortor tellus, vehicula non vulputate vitae, mollis a velit. Pellentesque gravida pretium ante, eu volutpat risus viverra non. Duis purus quam, venenatis nec consectetur interdum, aliquam rutrum diam. Donec interdum odio eget ante consectetur in sodales mi molestie. Nunc bibendum, turpis vel vulputate accumsan, diam tortor placerat sem, sed posuere risus purus eu massa. Nullam eleifend pulvinar massa, nec cursus velit dictum quis.
</div>
<div id='bottom'>
Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur. <br><br>
Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur.
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body{
text-align:justify;
}
#container{
width:1000px;
margin:0 auto;
}
#height-container{
background:orange;
float:left;
}
#left{
float:left;
width:200px;
background:#CD5555;
padding:20px;
}
#right{
width:600px;
float:right;
}
#top{
background:yellow;
padding:20px;
}
#bottom{
background:#00FF66;
padding:20px;
}
You can use display:table property for this:
#height-container{
background:orange;
display: table;
vertical-align:top;
}
#left{
display: table-cell;
width:200px;
background:#CD5555;
padding:20px;
}
#right{
width:600px;
display: table-cell;
}
Check this http://jsfiddle.net/6rBAw/2/
But it's work till IE8 & above
UPDATED
CSS
#left{
width:200px;
background:#CD5555;
}
#right{
float:right;
width:600px;
}
.clr{clear:both;}
HTML
<div id='right'></div>
<div id='left'>
<div class="clr"></div>
</div>
Check it http://jsfiddle.net/6rBAw/4/
Here is a solution which works in IE 7 as well http://jsfiddle.net/6rBAw/6/ this solution makes use of negative margin bottom and padding bottom, the only thing is you have to give the margin bottom and padding bottom value the same and a large value and give the container of the column overflow hidden property.
#container{
width:1000px;
margin:0 auto;
**overflow: hidden;**
}
#left{
float:left;
width:200px;
background:#CD5555;
**padding:20px 20px 99999px 20px;
margin-bottom: -99999px;**
}
#right{
width:600px;
float:right;
**padding-bottom: 99999px;
margin-bottom: -99999px;**
background-color: black;
height: 1000px;
}