I want to inline two elements next to each other using flexbox. I want this to work exactly like display: inline works but for flexbox. How would you do this? What am I missing? :)
Demo: https://jsfiddle.net/24duh8wr/
If you want the text in the second item to wrap around the text it the first item, flexbox is not the way to achieve this. You have two options (remove display: flex from the container in both cases):
1) Just make them inline:
.item {
display: inline;
}
2) Float the first item left:
.item:first-child {
float: left;
}
It's not possible to do it with flexbox, if I understand your expectation http://take.ms/sLdMr . Flexbox is tool to build layout.
Please try display: inline-flex;
As explained in the commentary. Use flex-direction.
.flexbox {display: inline;}
.flexbox2{
display:flex;
flex-direction:row;
}
<div class="flexbox">
<div class="item">Date:</div>
<div class="item">Quisque rutrum. Vivamus laoreet. Aenean viverra rhoncus pede. Curabitur turpis. Morbi ac felis.In ut quam vitae odio lacinia tincidunt. Aenean ut eros et nisl sagittis vestibulum. Sed hendrerit. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Praesent nonummy mi in odio.</div>
</div>
<hr>
<div class="flexbox2">
<div class="item">Date:</div>
<div class="item">Quisque rutrum. Vivamus laoreet. Aenean viverra rhoncus pede. Curabitur turpis. Morbi ac felis.In ut quam vitae odio lacinia tincidunt. Aenean ut eros et nisl sagittis vestibulum. Sed hendrerit. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Praesent nonummy mi in odio.</div>
</div>
Related
I am working on a flexbox side bar menu, but seem to be running into conflicts between flex: 0 1 auto containers with an intrinsic size for min-height, causing the containers to shrink below the allowed minimum.
JSFiddle Link (same as snippet below)
Summary / Intended behavior
The menu spans the entire vertical screen space and consists of an arbitrary number of minimizable-group containers that are neatly stacked on top of each other.
Each group has a flex: none header/title and a flexible container minimizable-group-content
There are two group-content types:
.unshrinkable for important control elements that should remain fully visible to the user (red boxes in snippet)
.shrinkable for potentially huge lists, which are allowed to shrink to some minimum height (blue boxes in snippet)
Each minimizable group can be collapsed by the user (⮟ button) -- that part works fine currently.
Issue
In the snippet you can see all three minimizable groups (in full-screen). The unshrinkable content in Group 2 however gets squeezed together, unless I collapse either Group 1 or Group 3
From looking at the Dev Console, it seems the problem is in minimizable-group-content. The red .unshrinkable box inside shows a reasonable calculated height (18 pixel), but the enveloping container only has a calculated height of ~5px and refuses to resize no matter what CSS I throw at it.
Is there any other property I can set to prevent my flex boxes to shrink past the minimum height? Or can I get the intended behavior with a different approach?
(Not) related:
Parent flexbox container ignores child's flexbox min-width -- used that as well, but covers the exact opposite: elements not shrinking
https://github.com/philipwalton/flexbugs#flexbug-1 -- would match, but it seems that one is fixed already
How do min-content and max-content work? -- explanation for intrinsic dimensions - which I think I am using correctly?
Safari: flexbox and min-height -- tried fit-content/min-content/max-content, but none seem to have any effect
Snippet
Array.from(document.getElementsByClassName("minimizable-group")).forEach((element) => {
element.children[0].addEventListener('click', () => {
element.children[0].classList.toggle('minimized');
element.children[1].classList.toggle('minimized');
});
});
* {
min-height: 0px;
}
html,
body {
position: absolute;
margin: 0px;
padding: 0px;
overflow: hidden;
top: 0px;
left: 0px;
height: 100vh;
width: 300px;
}
body {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex-direction: column;
flex: 0 1 auto;
overflow-y: auto;
}
.minimizable-group {
display: flex;
flex-direction: column;
flex: 0 1 auto;
overflow-y: hidden;
}
.minimizable-group-title {
flex: none;
}
.minimizable-group-content {
display: flex;
flex-direction: column;
flex: 0 1 auto;
overflow-y: auto;
min-height: min-content !important;
}
.unshrinkable {
flex: none;
min-height: max-content !important;
}
.shrinkable {
flex: 0 1 auto;
overflow-y: auto;
min-height: 1em;
}
/*********************************/
/* IRRELEVANT STUFF BELOW */
.minimizable-group-title {
cursor: pointer;
color: #aaa;
background-color: #333;
font-weight: bold;
}
.minimizable-group-title::before {
content: '⮟ ';
}
.minimizable-group-title.minimized::before {
content: '➤ ';
}
.minimizable-group-content.minimized {
max-height: 0px;
visibility: hidden;
}
.unshrinkable {
background-color: #ffcccb;
}
.shrinkable {
background-color: #add8e6;
}
<div class="container">
<div class="minimizable-group">
<div class="minimizable-group-title">Group 1</div>
<div class="minimizable-group-content">
<div class="unshrinkable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="shrinkable">Amet venenatis urna cursus eget nunc. Sapien nec sagittis aliquam malesuada. Tortor vitae purus faucibus ornare suspendisse. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Et leo duis ut diam quam. Nisl suscipit adipiscing bibendum
est ultricies integer quis auctor. Volutpat maecenas volutpat blandit aliquam etiam erat. Fames ac turpis egestas integer eget aliquet nibh. Enim praesent elementum facilisis leo vel. Enim facilisis gravida neque convallis a. Et magnis dis parturient
montes nascetur ridiculus mus mauris vitae. Amet est placerat in egestas.
<p /> Vel eros donec ac odio tempor. Purus gravida quis blandit turpis cursus in hac habitasse platea. In aliquam sem fringilla ut morbi tincidunt augue interdum. Diam ut venenatis tellus in metus. Vitae purus faucibus ornare suspendisse sed nisi lacus
sed. Velit sed ullamcorper morbi tincidunt. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Augue mauris augue neque gravida in fermentum. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Sem et tortor consequat
id. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Eros donec ac odio tempor orci dapibus ultrices.
</div>
<div class="unshrinkable">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="minimizable-group">
<div class="minimizable-group-title">Group 2</div>
<div class="minimizable-group-content">
<div class="unshrinkable">Elementum sagittis vitae et leo duis</div>
</div>
</div>
<div class="minimizable-group">
<div class="minimizable-group-title">Group 3</div>
<div class="minimizable-group-content">
<div class="unshrinkable">Facilisis volutpat est velit egestas dui id ornare arcu odio. Duis ultricies lacus sed turpis tincidunt id.</div>
<div class="shrinkable">Amet venenatis urna cursus eget nunc. Sapien nec sagittis aliquam malesuada. Tortor vitae purus faucibus ornare suspendisse. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Et leo duis ut diam quam. Nisl suscipit adipiscing bibendum
est ultricies integer quis auctor. Volutpat maecenas volutpat blandit aliquam etiam erat. Fames ac turpis egestas integer eget aliquet nibh. Enim praesent elementum facilisis leo vel. Enim facilisis gravida neque convallis a. Et magnis dis parturient
montes nascetur ridiculus mus mauris vitae. Amet est placerat in egestas.
<p /> Vel eros donec ac odio tempor. Purus gravida quis blandit turpis cursus in hac habitasse platea. In aliquam sem fringilla ut morbi tincidunt augue interdum. Diam ut venenatis tellus in metus. Vitae purus faucibus ornare suspendisse sed nisi lacus
sed. Velit sed ullamcorper morbi tincidunt. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Augue mauris augue neque gravida in fermentum. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Sem et tortor consequat
id. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Eros donec ac odio tempor orci dapibus ultrices.</div>
</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 want to have an image floated left, with text to the right that doesn't flow around it, and that falls underneath it when the browser is minimised. Like this:
This is the css I've got at the moment:
.item-container{ margin: 0 20px 20px 25px; }
.directory {display: inline; overflow: auto;}
.directory-image {float: left; margin-right: 17px;clear: left;}
You could add a float:left to the .directory div and give it a width of a certain value.
.directory {
float:left;
width:300px;
}
Like so: http://jsfiddle.net/aMA65/
You could also add a width in percentage to .directory and .directory-image to make it more responsive. (Don't forget img { max-width:100%; height:auto; } )
The trick to this is display: table;
HTML
<div class="wrap">
<img src="http://placekitten.com/150/150">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis ante id enim vestibulum viverra. Suspendisse malesuada justo et elit porttitor condimentum. Sed interdum mi dui, ut consequat risus laoreet quis. Sed quis elit nec arcu consectetur gravida vel eu lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non nisl vehicula, aliquet sem nec, rutrum libero. Maecenas in mi felis. Curabitur et semper justo. Sed vel faucibus massa. Maecenas semper elementum aliquet. Nam mattis elementum fringilla. Etiam suscipit mi ut mauris vehicula, id tempor libero molestie. Vestibulum molestie nulla non adipiscing pretium. Cras volutpat magna auctor, ornare massa at, consequat lectus. Sed ac pharetra metus. Praesent eleifend nisi vitae eros fermentum fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed porta vehicula augue nec elementum. Phasellus convallis lobortis dolor sed facilisis. Cras nisi elit, porta ac aliquet a, imperdiet eget turpis. Nullam euismod eros urna, in tincidunt enim feugiat id. Sed pharetra odio erat, et rhoncus massa sodales in. Nullam consectetur tortor sit amet ligula mollis, quis gravida eros pellentesque. Morbi eget laoreet mi, non euismod erat. Suspendisse elit est, dapibus a semper sed, molestie venenatis diam. Sed faucibus justo in ipsum molestie, et scelerisque ligula sodales. Vivamus sodales sodales arcu, ut bibendum diam consectetur sit amet. Donec id augue nibh. Nam vel mauris sem.
</div>
</div>
CSS:
.wrap { display: table; width: 100%; }
.wrap img { float: left; }
.wrap .content { display: table-cell; vertical-align: top; }
Then, in a media query:
#media screen and (max-width:600px){
.wrap { display: block; }
.wrap img { float: none; display: block; margin: 0 auto; }
.wrap .content { display: block; }
}
No tables or similar nonsenses needed, just pure CSS with media queries
here's how you can do it, btw re-size your browser under 400px width to see the result
you can change the value as you like for example:
#media only screen and (max-width: 960px) { }
in this case layout change will happen when browser window width is smaller than 960px.
here's the demo:
http://jsfiddle.net/darkosss/SE4p5/
And if you want images to be responsive too, follow the instructions for the "img" tag form the comment above.
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