I'm stuck trying to get this to work. It looks right when the content of the main column fills the page height but not when it doesn't.
Looks right: http://jsfiddle.net/creativetags/ngv4H/1/
Doesn't look right: http://jsfiddle.net/creativetags/EAuBc/1/
<div class='container'>
<div class='container-wrap'>
<nav class='tabnav'>Some nav menu items here</nav>
<div class='container-inner'>
<div class='clearfix' id='mainwrap'>
<div class='columns' id='main'>
<h2>Main content scrolls here</h2>
</div>
</div>
<div class='columns' id='side'>
<div class="sidecontent">
<p>Fixed Side panel</p>
</div>
</div>
</div>
</div>
</div>
I'm using a faux sidebar column that is fixed, so when you scroll the main column it stays in view.
I need the background of .container-inner to fill to the bottom of the page, even when the content doesn't reach the bottom.
.tabnav needs to show the background image from the body tag, so .container-inner can't start from the top of the page.
Updated demos with large content and small content, using the same CSS.
Summary of the changes
Fixing the main content
Apply the white bg color to both .container-wrap and .container-inner.
Set .container and .container-wrap to height:100%;.
The background image underneath .tabnav is now covered by a white bg color, so re-apply the bg image to .tabnav. This is the key part of the solution.
Updating the sidebar
Set #side and .sidecontent to height:100%;.
Move the side bg image from .container to .sidecontent.
CSS added
.container {
height: 100%;
...
}
.container-wrap {
width: 660px;
height: 100%;
background-color: #f8f8f8;
}
.tabnav {
background: #1d1d1b url("http://cat.storehousebelfast.com/assets/bg.jpg") repeat fixed top left;
}
#side {
height: 100%;
...
}
.sidecontent {
background: transparent url("http://cat.storehousebelfast.com/assets/right-column.gif") repeat-y top right;
height: 100%;
...
}
CSS removed
.container {
background: transparent url("http://cat.storehousebelfast.com/assets/right-column.gif") repeat-y top right; /* Remove this */
...
}
.container-inner {
min-height: 100%; /* Remove this */
height: 100%; /* Remove this */
...
}
Related
Here is my JSFiddle thus far.
What should I do to make sidebar stretch vertically (height) on the entire page? Right now it stretches to the original height of web browser window, but when there is more content inside the container, the sidebar does not stretch with it.
HTML:
<div class="main-content">
<div class="sidebar">
menu
</div>
<div class="content">
... a bunch of content ...
</div>
</div>
CSS from the above JSFiddle:
html, body {
width: 100%;
height: 100%;
}
.main-content {
width: 100%;
height: 100%;
}
.sidebar {
width: 100px;
float: left;
background-color: #000;
color: #fff;
min-height: 100%;
}
.content {
width: 200px;
float: left;
}
I don't think there is a "pure" css solution for this issue. The problem is that your sidebar is 100% height of it's parent container. And it's parent container main-content is 100% height of it's parent (the window). So for your content to be the same height as main-content's inner content you would then have to set a pixel height value to main-content.
However you could easily resolve this with jquery.
var sidebar = $('.sidebar');
var content = $('.content');
if (content.height() > sidebar.height() )
sidebar.css('height', content.height());
else
sidebar.css('height', sidebar.height());
Fiddles:
http://jsfiddle.net/up7Zg/29/ and http://jsfiddle.net/up7Zg/30/
try this
.sidebar {
position: absolute;
top: 0;
bottom: 0; /* this line, and the one above, confer full-height */
left: 0;
width: 30%;
background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}
My html page has a title and a menu at the top, the contents section under the menu, and the footer at the bottom. The footer must always be at the bottom of the window, no matter what the content size is (except for when the content if higher than the window, in which case the footer must be underneath the content). I have markup and CSS rules that implement this (below).
But I need to also show a background image over the contents and the footer. That is, the image must cover the entire screen but the title/menu area. I have no idea how to accomplish this. In my code below (as well as on jsfiddle at http://jsfiddle.net/EGj54/) I have attached the background to the whole page, but I want it to show only for the contents and the footer.
Could someone help me please?
<div id="main">
<div id="navbar">
<div id="caption"><span>Test</span></div>
<ul id="sections">
<li><span>current</span></li>
<li>next</li>
</ul>
</div>
<div id="content">content</div>
<div class="push"></div>
</div>
<div id="footer">footer</div>
* {
margin: 0;
}
html, body {
height: 100%;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
}
#caption {
font-weight: bold;
}
#footer, .push {
color: white;
height: 25px;
}
#sections {
background-color: #aaaaaa;
}
#main {
height: auto !important;
margin: 0 auto -25px; /* bottom margin is negative value of #footer height */
min-height: 100%;
}
#main {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
background-size: cover;
}
Your footer will stay at the bottom since you placed it last with your divs, no problem with that as long as you will not use float or absolute positioning. Move your style in background to body to solve your problem:
body {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
background-size: cover;
}
can you simply adjust the vertical position of the background images?
background-position: left 20px;
You can set the background-position of the image
#main {
background-image: url('yourimage.jpg');
background-size: cover;
background-position: 0 100px; // 100px or whatever the height of your navbar is
}
Alternatively, You can cheat like this ;)
#content {
height: 100px;
background: url('yourimage.jpg') top;
}
#footer {
height: 50px;
background: url('yourimage.jpg') bottom;
}
When I resize the browser (window) it shrinks the top background images (yellow squares) and causes a 1px break in the layout (the red squares show the area with the problem). I tried to force the size to always be the same for the top background images by setting width to 50px. The rest of the background is the repeated-x content_bg_sliver.gif image that I show by using a purple square. Any suggestions?
Thanks,
partizan
P.S: Please see attached images that shows the problem within the red squares.
<!-- HTML CODE Starts -->
<div id="top-navigation-container-inner">
<div id="top-nav-left-background"><!-- The left background appended to the top main navigation --></div>
<div id="top-nav-right-background"><!-- The right background appended to the top main navigation --></div>
</div>
<div id="main-body-container">
<div id="main-body-container-inner">
main content goes here....
</div>
</div>
<!-- HTML CODE Ends -->
/* CSS Code Starts */
#top-navigation-container-inner {
background: #FFF;
height: 160px;
float: none;
font: 14px Arial;
position: relative;
}
#top-nav-left-background, #top-nav-right-background {
height: 370px;
position: relative;
top: 0;
width: 50px;
}
#top-nav-left-background {
background: url('../images/top_nav_left_background.gif') left bottom no-repeat;
float: left;
margin-left: -50px;
}
#top-nav-right-background {
background: url('../images/top_nav_right_background.gif') right bottom no-repeat;
float: right;
margin-right: -50px;
}
#main-body-container{
background: aqua url('../images/content_bg_sliver.gif') center repeat-y;
float:none;
overflow:hidden;
width: 100%;
height: 400px;
}
/* End CSS Code */
try looking at this and see if this is what your after and if you think it's a better way to go about it!
http://drupalgeeks.co.uk/example/
Okey so basically I have:
<div id="content">
... content of arbitrary size ...
</div>
<div id="content_bottom"></div>
The style is:
#content {
background: transparent url(content_tile.png) center top repeat-y;
width: 800px;
}
#content_bottom {
background: transparent url(content_bottom.png) center top no-repeat;
height: 200px;
width: 800px;
}
content_tile.png is a 800x1 image (tiles vertically), and has transparency.
content_bottom.png is a 800x200 image.
Basically, I need to have the content_bottom.png image to replace the #content background image only on the bottom.
Having a negative margin on #content almost works, but since both images are transparent images, they overlap, and it should not happen.
I think that I need to make #content not to render its background on the last 200px on its bottom.
Any idea how I could do that ?
If you altered your markup slightly and used javascript you could do it with an absolutely positioned div that contained only the background. Then onload, set #repeating-background's height to (#content's height - 200px):
HTML
<div id="content">
<div id="text">
This is where your content would go
</div>
<div id="repeating-background"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
background: url(content_bottom.png) left bottom no-repeat;
}
#text {
position: relative;
z-index: 2;
}
#repeating-background {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 800px;
height: 1px;
background: url(content_tile.png) left top repeat-y;
}
Javascript (jQuery)
$(document).ready(function() {
$('#repeating-background').height($('#content').height() - 200);
});
create a third div, nested in #content, that is 200px height.
I am building a CSS site and fail solving this partial problem:
On the left side there is a box which consists of three images. A top image, an (optional and stretched) middle image, and a bottom image.
I want the box to the left automatically stretch if there is more content inside. This already works for the right side with my current code.
(I put both columns into a container div and set the left box to height: 100.)
But now there shall also be content in the left box. This content does overflow because I set the left box to position: absolute. Thus it does not increase the size.
I didn't manage to get this effect without position: absolute though. I tried using float etc.
Here is the example code:
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
<div id="bgbottom">
<div id="bgmiddle">
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
With this stylesheet:
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
position: relative;
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
position: absolute;
width: 185px; /* width of the bg images */
height: 100%;
background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
position: absolute;
width: 100%;
height: 100%;
background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
position: absolute;
width: 100%;
top: 250px; /* Don't cover top GIF */
bottom: 15px; /* Don't cover bottom GIF */
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
}
It looks like this (Colored it for better understanding):
The yellow part is actually a stretched image, I left it out for the example, it works as expected.
How can I add text into the left box that will also stretch it? Or is it possible with TABLE instead of CSS at this point?
EDIT: BitDrink's solution looks this way at my browser (current FF)
alt text http://img502.imageshack.us/img502/1241/layoutsample2.png
I could be wrong here but what you are trying to achieve here is two columns of the same height no matter how much text is in the left or right columns.
Equal Height Columns using CSS is the best CSS technique for this where by the backgrounds and bottom curved edges would need to be given to div#vertical stretcher.
The only other way that I know to make two columns equal height is to use JavaScript. See The Filament group article on setting equal heights with jQuery.
the problem is the absolute positioning! If you want an automatic resize (in vertical) of the left box, just apply a "float:left" to #bgtop!
Notice that the attribute "min-height" is not supported from all browsers (for example IE6)! The code below is an example:
<style type="text/css" >
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
float: left;
width: 185px; /* width of the bg images */
height: 100%;
background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
width: 100%;
height: 100%;
background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
width: 100%;
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
background-color: #FFF;
border: 1px dotted black;
}
</style>
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
text top
<div id="bgmiddle">
text middle
<div id="bgbottom">
text bottom
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
You can see the result below:
The 4 div(s) resize vertically according to their content!