This question already has answers here:
CSS: Control space between bullet and <li>
(25 answers)
Closed 4 years ago.
sSo I wanted to increase size in my list between bullet and text and used:
ul li span { margin-left: 10px; }
<ul>
<li>
<span>Text</span>
</li>
</ul>
And it shifts only lines with bullet:
How to shift everything properly?
Solution 1
Simply use padding on the li, like this:
ul li { padding-left: 100px; }
<ul>
<li>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida turpis aliquam risus sodales volutpat. Vivamus bibendum urna nunc, non pharetra urna aliquam sed. Maecenas vel diam ultricies, porttitor tortor ac, tincidunt felis. Cras nec lectus est. Praesent eget elementum ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis lacus erat, feugiat et enim sed, efficitur tempus justo.</span>
</li>
</ul>
The reason this works (and the margin on the span does not) is because the li has default display setting of block, while a spans default is inline. The latter only applies the margin to the beginning of the line.
Solution 2
Setting the span to block solves this problem too. This avoids any confusion about where the padding should be (left or right of the bullet). This confusion can be the cause of different browser implementations of padding on a li-item. This solution looks/works like this:
ul li span { display: block; padding-left: 100px; }
<ul>
<li>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida turpis aliquam risus sodales volutpat. Vivamus bibendum urna nunc, non pharetra urna aliquam sed. Maecenas vel diam ultricies, porttitor tortor ac, tincidunt felis. Cras nec lectus est. Praesent eget elementum ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis lacus erat, feugiat et enim sed, efficitur tempus justo.</span>
</li>
</ul>
It works with this css:
ul li span { margin-left: 10px; display: inline-block; }
Related
I have a very weird problem. I was actually creating a JSFiddle to answer another question when I ran into an alignment issue. Just creating two inline-block elements results in a very weird situation where the left block is pushed down by about 40px.
I know that this is an issue in both Chrome and Firefox (on Mac, not sure about Windows).
See for yourself: JSFiddle
All I have are two custom elements that I called <cell> that contain a title, held in <t> and a lipsum paragraph held in <cnt>.
HTML:
<div align="center">
<cell>
<t>This is a short title</t>
<cnt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet adipiscing diam, suscipit commodo augue. In tellus nunc, dapibus eu interdum at, laoreet volutpat est. Duis non mi quis urna malesuada dapibus. Nunc sit amet nulla quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque molestie neque cursus viverra luctus. Mauris ac placerat purus. Aenean vel dictum sem, condimentum pharetra diam. Nunc sed leo et arcu malesuada placerat sit amet nec ipsum.</cnt>
</cell>
<cell>
<t>This is a very very very very very very very chocolate very very very very very very long title</t>
<cnt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet adipiscing diam, suscipit commodo augue. In tellus nunc, dapibus eu interdum at, laoreet volutpat est. Duis non mi quis urna malesuada dapibus. Nunc sit amet nulla quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque molestie neque cursus viverra luctus. Mauris ac placerat purus. Aenean vel dictum sem, condimentum pharetra diam. Nunc sed leo et arcu malesuada placerat sit amet nec ipsum.</cnt>
</cell>
</div>
CSS:
cell
{
display: inline-block;
width: 300px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
margin: 0;
}
Result:
You need to specify the vertical-align property (e.g. vertical-align:top;) since the default value is baseline (which you can see if the fiddle and image).
cell {
display: inline-block;
width: 300px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
margin: 0;
vertical-align:top;
}
jsFiddle example
I am having trouble setting up containers for a website I am making.
I have defined the width of a sidebar container, but when I put text in it to test, it pushes down the body instead of sitting next to it..
My code is as follows
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis urna at tristique tincidunt. Etiam ut cursus elit. Donec hendrerit turpis urna, ac pretium enim tincidunt nec. Donec ut mauris convallis odio vehicula dapibus ut id ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a eleifend magna. Suspendisse potenti. Morbi ac ante vel sapien bibendum lacinia eu et nulla. Nunc aliquam nunc quis sem sollicitudin ultricies. Sed ultricies ornare nisi accumsan pharetra. Suspendisse elit arcu, sagittis vel bibendum eget, sollicitudin vel ipsum. Nam feugiat dolor tellus, sit amet adipiscing dui imperdiet at. Morbi facilisis non orci sit amet placerat. Nunc arcu elit, tincidunt vel est sit amet, fringilla porttitor leo. Nunc pharetra tellus vitae convallis elementum.<br>
Quisque tristique nunc semper feugiat lacinia. Cras eu nunc commodo, auctor augue sed, pellentesque nisi. Duis ut sapien non metus venenatis porta vitae ac turpis. Suspendisse et fringilla magna. Quisque tempus tortor metus, quis eleifend elit interdum mollis. Nullam porta tincidunt magna sed ullamcorper. In luctus purus at fermentum posuere. Donec pellentesque lectus lorem, at tempus turpis iaculis ac. Sed in eros vitae augue adipiscing vehicula. Vivamus arcu odio, cursus nec magna rhoncus, eleifend ornare sem.<br></p>
</div>
<div class="container">
<p class="body">
Everything Blinds is a ‘come-to-you’ blinds service operating on-site, so you don’t have to worry about the inconvenience of having your blinds taken away. As professional blind specialists, we have years of experience - we know how to fix and clean all makes and models, and our in-depth knowledge of blinds can help you choose the right new blind for your home. <br>
We aim for quality customer service by providing:
</p>
<ul>
<li>Free quotes for cleaning, repairing and installing old and new blinds</li>
<li>Most jobs can be easily quoted over the phone</li>
<li>Premium quality blinds at competitive prices</li>
<li>Onsite, on-the-day cleaning and repairing</li>
<li>Wide variety of Australian-made blinds</li>
<li>Reliable and friendly service</li>
</ul>
</div>
#sidebar {width: 20%;margin-left: 10%;}
.container {width: 60%; margin-left: 30%; margin-right: 10%;}
You can see it in action at www.dweeman.com/eb/sitetemplate.html
I used a predone template for the navigation menu which had a few CSS elements, but I can't spot anything that would be interfering.
Any ideas what I am missing? I know the website looks terrible and has problems but it's still in early development.
Thanks
Update your HTML and CSS as mentioned below :
HTML :
<div style="float: left">
<div id="sidebar">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis urna at tristique tincidunt. Etiam ut cursus elit. Donec hendrerit turpis urna, ac pretium enim tincidunt nec. Donec ut mauris convallis odio vehicula dapibus ut id ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a eleifend magna. Suspendisse potenti. Morbi ac ante vel sapien bibendum lacinia eu et nulla. Nunc aliquam nunc quis sem sollicitudin ultricies. Sed ultricies ornare nisi accumsan pharetra. Suspendisse elit arcu, sagittis vel bibendum eget, sollicitudin vel ipsum. Nam feugiat dolor tellus, sit amet adipiscing dui imperdiet at. Morbi facilisis non orci sit amet placerat. Nunc arcu elit, tincidunt vel est sit amet, fringilla porttitor leo. Nunc pharetra tellus vitae convallis elementum.<br>
Quisque tristique nunc semper feugiat lacinia. Cras eu nunc commodo, auctor augue sed, pellentesque nisi. Duis ut sapien non metus venenatis porta vitae ac turpis. Suspendisse et fringilla magna. Quisque tempus tortor metus, quis eleifend elit interdum mollis. Nullam porta tincidunt magna sed ullamcorper. In luctus purus at fermentum posuere. Donec pellentesque lectus lorem, at tempus turpis iaculis ac. Sed in eros vitae augue adipiscing vehicula. Vivamus arcu odio, cursus nec magna rhoncus, eleifend ornare sem.<br>
</p>
</div>
<div class="container">
<p class="body">
Everything Blinds is a ‘come-to-you’ blinds service operating on-site, so you don’t have to worry about the inconvenience of having your blinds taken away. As professional blind specialists, we have years of experience - we know how to fix and clean all makes and models, and our in-depth knowledge of blinds can help you choose the right new blind for your home.
<br>
We aim for quality customer service by providing:
</p>
<ul>
<li>Free quotes for cleaning, repairing and installing old and new blinds</li>
<li>Most jobs can be easily quoted over the phone</li>
<li>Premium quality blinds at competitive prices</li>
<li>Onsite, on-the-day cleaning and repairing</li>
<li>Wide variety of Australian-made blinds</li>
<li>Reliable and friendly service</li>
</ul>
</div>
</div>
CSS :
#sidebar {
width: 20%;
margin-left: 10%;
float: left;
}
.container {
width: 60%;
float: left;
padding-left: 15px;
word-break: break-all;
}
You should use floats. try adding this to your sidebar and container..
#sidebar: {
float:left;
width: "";
height:auto;
}
and
#container {
float:left;
width:"";
}
Just make sure to fill the width with real values =)
Also make sure you are FTPing correctly. I don't see any floats on your page still =P
try adding this style overflow-wrap: break-word;
All you need to do is add float:left; to your sidebar:
#sidebar {
width: 20%;
margin-left: 10%;
float: left;
}
I have 2 columns (left and right), and these columns are vertical and have images and text and links.
I want to put text in the middle of the page, left column and right column but in the middle there is no column but when i paste the text i get aligning problem. but my text is touching the left column image or boarder, unless if i center the text witch i don't want to center it.
How can i make a space between the element on the left column and my text in the middle of the page so i can justify it properly?
<div style="position: relative; float: right; text-align: center;">
<!-- Images in a vertical line here-->
</div>
<div style="position: relative; float: left; padding-right: 1px; text-align: center;">
<!-- Images in a vertical line here-->
</div>
Thank you,
I believe you're looking to add margin: *some distance in em, px, or %* or padding: *some distance in em, px, or %* to your style rules, depending on where you want that space to occur relative to the CSS box.
Using margin would not help much, but You could put some container (another div) in those divs having padding-right and padding-left.
I made a fiddle to try and make what you've requested: http://jsfiddle.net/MEA8W/
CSS:
.column {
float: left;
text-align: justify;
width: 50%;
}
.column p {
padding: 10px
}
HTML:
<div class="column">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec vestibulum mi, eu mollis nibh. Vestibulum euismod, orci ut porttitor dictum, velit dolor sodales leo, at iaculis metus leo malesuada mi. In non fermentum nulla. Vivamus in dapibus dui. Nulla quis mi commodo, tincidunt eros gravida, rutrum nibh. Vestibulum ac arcu vulputate, tincidunt ante id, molestie massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
<div class="column">
<p>
Quisque aliquam ultricies varius. Phasellus viverra congue massa, et fringilla sapien. Quisque quis tristique nisi, sit amet rhoncus nulla. Nulla bibendum mauris pretium dui faucibus rhoncus. Praesent nec mauris ac enim auctor rhoncus a ultrices nisl. Nulla commodo lorem vel eleifend semper. Etiam ac sapien iaculis lacus interdum sodales. Maecenas sed turpis sapien. Vestibulum faucibus ipsum vitae hendrerit egestas. Phasellus cursus congue tempus. Nulla facilisi. Donec vestibulum posuere est, ut fringilla nunc congue sit amet. Aenean et ultricies quam.
</p>
</div>
I'm trying to create a responsive layout in bootstrap that has a full-height sidebar. I got the responsive part working, but the only problem is - the spacing of the spans don't seem to be playing well together.
On the right side - the main content - it doesn't span to fit the rest of the screen. Also, when the browser gets too small - the main content actually gets partially hidden by the sidebar.
Am I doing something wrong with the spans? If I remove the position: absolute; from the .sidebar, then the whole .content. piece slides underneath the sidebar - but the sidebar is no longer full height, and the content still doesn't fill the rest of the screen evenly. It seems as it's impossible to get this working correctly, but I want to use bootstrap for the convenience of not having to redo all the CSS/JS that's integrated.
Example:
CSS
html {
height: 100%;
}
.sidebar {
background: #333;
margin: 0;
padding: 3em 2em;
height: 100%;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
min-height: 100%;
position: absolute;
}
.sidebar .logo { margin-bottom: 3em; }
.content {
margin: 5em;
}
HTML
<body>
<div class="row">
<!-- Navigation for small screens -->
<div class="navbar navbar-inverse hidden-desktop">
<div class="navbar-inner">
<a class="brand" href="/">Home Link</a>
<ul class="nav">
<li>Projects</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- Navigation for larger screens -->
<div class="span3 hidden-phone hidden-tablet">
<div class="span3 sidebar">
<div class="logo"><a class="logo-title" href="/">Home Link</a></div>
<ul class="nav nav-pills nav-stacked">
<li>Projects</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="span9 content">
<div class="span5">
<div class="page-header">
<h1>Hello. <small>This is.</small></h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vitae ante lobortis ultricies. Pellentesque blandit massa a velit convallis at accumsan elit gravida. Nulla facilisi. Fusce egestas consectetur velit vitae egestas. Cras vitae justo a sapien gravida condimentum. Donec lacinia lacinia ante. Proin eget est neque, ut egestas nibh. Donec non enim eu sem varius adipiscing. Proin dapibus enim a enim condimentum hendrerit. Donec vestibulum, mauris eget lobortis sagittis, enim libero dapibus augue, ac luctus ipsum augue quis purus. Aenean magna ante, elementum ac ultricies vitae, lobortis vitae augue. Nam metus erat, adipiscing posuere fringilla sit amet, molestie vel dolor. Quisque libero lacus, auctor eget porta vitae, vehicula eget mi. Vestibulum pulvinar hendrerit faucibus.
Aliquam scelerisque nisl sit amet mauris euismod bibendum. Phasellus ac laoreet enim. Praesent a felis id nisl ultrices dignissim. Nam dictum leo at quam vulputate mollis. Curabitur vitae ipsum enim, sit amet sollicitudin neque. Nunc iaculis ultricies convallis. Etiam nunc neque, consequat ac vehicula id, imperdiet in neque. Duis vitae sem magna. Nulla vehicula sapien sit amet sapien tempus tempus. Fusce pharetra dui nec risus sollicitudin vel pharetra arcu lacinia. Quisque eleifend sapien eu quam rutrum sed imperdiet nisi sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id placerat purus.</p>
</div>
<div class="span3">
<div class="page-header">
<h1>Second Header. <small>Not working.</small></h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vitae ante lobortis ultricies. Pellentesque blandit massa a velit convallis at accumsan elit gravida. Nulla facilisi. Fusce egestas consectetur velit vitae egestas. Cras vitae justo a sapien gravida condimentum. Donec lacinia lacinia ante. Proin eget est neque, ut egestas nibh. Donec non enim eu sem varius adipiscing. Proin dapibus enim a enim condimentum hendrerit. Donec vestibulum, mauris eget lobortis sagittis, enim libero dapibus augue, ac luctus ipsum augue quis purus. Aenean magna ante, elementum ac ultricies vitae, lobortis vitae augue. Nam metus erat, adipiscing posuere fringilla sit amet, molestie vel dolor. Quisque libero lacus, auctor eget porta vitae, vehicula eget mi. Vestibulum pulvinar hendrerit faucibus.
Aliquam scelerisque nisl sit amet mauris euismod bibendum. Phasellus ac laoreet enim. Praesent a felis id nisl ultrices dignissim. Nam dictum leo at quam vulputate mollis. Curabitur vitae ipsum enim, sit amet sollicitudin neque. Nunc iaculis ultricies convallis. Etiam nunc neque, consequat ac vehicula id, imperdiet in neque. Duis vitae sem magna. Nulla vehicula sapien sit amet sapien tempus tempus. Fusce pharetra dui nec risus sollicitudin vel pharetra arcu lacinia. Quisque eleifend sapien eu quam rutrum sed imperdiet nisi sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id placerat purus.</p>
</div>
</div>
</div>
</body>
You're already setting that sidebar to absolute, why bother with the height: 100%? It'd be easier to simply add top:0; bottom:0.
The reason your sidebar is getting slid over the content like that is the absolute positioning of the sidebar. If you want to keep that from happening, I'd recommend setting a defined width in your sidebar class (say, of 240px), then changing content's CSS to read like so:
.content {
padding: 5em;
left: 240px;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}
That should constrain your content appropriately to not slide under your sidebar in any circumstance. Then, in order to make it appropriately responsive, adjust font size and width of your sidebar down as the screen reduces, and decrease the left property of .content to match the width of the sidebar.
Is that what you're looking for?
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