I am trying to create a layout here which looks like the following: Here's the fiddle
<body>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
This is the content section
</div>
<div class="stream-content">
This is the stream content.
</div>
<div class="push">
</div>
</div>
<div class="footer">
</div>
<body>
I want the content section to take up the full space between the header and footer section. There is an additional section called [stream-content] which if there (will be there only on home page) has to take the position just before the footer. And in that case, the content section should take up space all the between header and stream-content section. I tried doing the same with absolute positioning but all my elements were going haywire, so wanted to understand the correct way of doing this. Thanks in advance for all help!
Add position:relative to your wraper class.
Add position:absolute;bottom:0; to the stream-content class.
Check it here.
Fiddle
If I understand correctly then one way to do it would be to put [steam content] outside the wrapper, as wrapper is the one that is keeping the footer at the bottom. If you must have the [steam content] inside wrapper than you can try something like this http://ryanfait.com/sticky-footer/ to keep it at the bottom together with the footer
Related
I have a web page like this one (simplified):
<body>
<div id="container">
<div id="content">
....
</div>
<div id="header">
....
</div>
<div id="footer">
....
</div>
</div>
</body>
Header and Footer are fixed (top and bottom), the Content has overflow auto.
At screen no problem.
When I try to print the document (some pages), some part of the content is hidden in every page by the two bands of Header and Footer (that must be printed too).
I searched in the Internet, but I don't understand if there is a solution to my question...
Can anyone help me?
Thanks in advance.
missing text in page 2
Just put an margin-top and margin-bottom to content. So if you have:
#header{
height:5vh;
}
#footer{
height:7vh;
}
you would do:
#content{
margin-top:5vh;
margin-bottom:7vh;
}
You should check wether the CSS rules applies only for your front-page or for the whole website. And if it doesn't work, give us a printscreen with the problem!
I have a 4 column layout with a standard header and footer. Its something like this
<div id="header"></div>
<div id="leftnav"></div>
<div id="maincontent"></div>
<div id="nextcontent"></div>
<div id="addtionalinfo"></div>
<div id="footer"></div>
Something like this http://jsfiddle.net/gaby/mBuf9/
But when there is no content/data in the center i want the right most div to span and take up the entire content space. And similarly if there is no content in the left most div i want the maincontent to span the remaining space. is there a way to do it?
You can try something like the following.
Here is the fiddle with content:
http://jsfiddle.net/mBuf9/27/
And the same fiddle without content:
http://jsfiddle.net/mBuf9/28/
The main change is that the divs are placed in a table and some small changes in css.
Hope this helps...
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
<div id="page">
<div id="header">
Header goes here.
</div> <!--end of header -->
<div id="main">
<div id="photos">
THIS IS FLOATED LEFT.
Photos are dynamically added here.
</div> <!--end of photos-->
</div><!-- end of main-->
<div id="footer">
Footer goes here.
</div><!-- end of footer -->
</div> <!-- end of page-->
In this code I'm trying to add photos dynamically to the div "photo" which is floated LEFT.
Now what happens when I try to add photos is my footer goes up to the header. The div main has a background color. On adding more photos the photos goes out of the main i.e. outside the color content. I've used clear property for the floating element.
Please, help me understand where am I wrong. Any help would be greatly appreciated.
Try adding this line
<br style="clear: left; margin: 0; padding: 0;" />
</div><!-- end of main-->
<div id="footer"> Footer goes here. </div>
<!-- end of footer --> </div>
<!-- end of page-->
This issue is happening because floated elements don't really occupy any vertical space in the page layout (since other elements are allowed to wrap around them). Since the left-floated div "photos" is the only content within the "main" div, the "main" div is treated as if is has no vertical height. This is why the footer appears directly below the header.
To fix this, you have some options:
Add other content to the "main" div that is NOT floated
Specify a fixed height for the "main" div (not a good solution)
Leave the "photos" div unfloated, and float other content in the main div to the right
Use clear:right or clear:both in the "photos" div css. This mostly defeats the purpose of the float, though
(other options exist)
Hi I have just completed my site. I'm having problems with my print style. My html is as below:
<div id="container">
<div id="main">
<h1>title</h1>
<div class="blockright">image in here and text</div>
<p>paragraphs of text</p>
<div class="blockleft">image in here and text</div>
<p>Even more paragraphs of text</p>
<div class="clear"></div>
<div class="footer">Copyright here</div>
</div>
</div>
.blockright has af ixed width and floats right
.blockleft has a fixed width and floats left has a width of auto
.main has a width and houses the content
In my print css, i would like .blockleft and .blockright to be aligned to the bottom of the printed page before the footer. Each page on the site has to be printable and I don't want to manually reposition the page to print the article or have to have a custom style for each page to print properly. Does anyone know how to get a div aligned to the bottom of the page. I tried absolute positioning but I could not get it to work. Any ideas?
Many thanks in advance
in your print style sheet
#main {
position:fixed;
bottom:0;
left:0;
display:block
}
If you don't want all of #main to go to the bottom just wrap another div around .blockleft and .blockright and apply this css to it. Alas this will probably not work in IE6, however you may try applying some of the techniques used to apply a sticky footer to a page. here's one example http://ryanfait.com/sticky-footer/