So, for a website, I have the site divided up with divs and iframes: an iframe for a sidebar, an iframe for a footer, and a big div in the middle for the body content. In order to get everything static and well-fitting, I used the code here:
.bodycontent{
position:fixed;
top:0px;
left:150px;
right:0px;
bottom:100px;
overflow:auto;
}
.footerframe {
position:fixed;
left:150px;
bottom:0px;
right:0px;
height:100px;
border-top: 2px solid #888;
border-right: 2px solid #888;
border-top-right-radius:4px;
}
This was intended to get both the main div and the footer iframe to stretch across the page. It works for the main div, but not the footer. What is up with that inconsistency?
There are two problems with your code:
Top/Bottom or Left/Right should be used in pairs always, not in four values. If you use top, don't use bottom; if you use left don't use right.
If you want an element with position fixed to stretch to the whole page, you should give it width:100%
:)
Related
i want make a footer with relative position but when the page have not content its show on the bottom of page. a property like this:
position:relative absolute; [i know this isnt correct]
relative is good but when the page is not empty.
fixed covering some of content and show always
absolute not good when the page have content
this is my code:
color:#444;
background:#222;
bottom:0px;
width:100%;
position:relative;
min-height:80px;
padding:10px 0 10px 10px;
border-top:1px solid #444;
use min-height for content (middle content).
for example:
min-height: 500px;
your question is unclear,but as I undrestand you want to have a footer on bottom of the page even if there is no content,do so :
#footer{
position:fixed;
bottom:0;
z-index:999
}
DEMO
but this way you have sticky footer to bottom of your browser window, another way to achieve what you want is tu use min-height css property for your content,bud this is not a fully solution,couse different browser have different height and you have problem, I suggest that you use jQuery
By using the property position:absolute; I have to mention the correct size of all layers (in my case 3 layers "#header", "#mybody", "#footer") where in my website #mybody's height is dynamic. So, I need #footer's position should be something like relative but using relative I am unable to set with:100%; Even if I set width:100% I am not getting complete 100% using relative. However I am getting 100% using absolute but I can't use absolute for above reason(s). Also I don't want footer to be fixed. How can I set my footer's width to 100% without using absolute or fixed position? Using width:100% with other than absolute or fixed doesn't resulting complete 100% to me.
Code:
mheadf {
position:relative;
width:100%;
height:35px;
border:thin solid black;
}
mbody {
position:relative;
width:800px;
height:500px;
border:thin solid black;
}
mfootf {
position: relative;
width:100%;
height:115px;
border:thin solid black;
}
-->
Using width:100%; should make the div 100% in width, assuming there are no margins or paddings on your body/div. Remove those and you'll be good to go.
I want to have the bottom of my wrapper touching the bottom of the browser at all times. But I don't know how to center it horizontally.
url: http://arabic001.com
#wrapper {
position:absolute;
text-align:center;
bottom:0px;
width:1110px;
height:675px;
border:1px white solid;
}
Thanks to John I solved the issue of centering it horizontally. But now the bottom is acting really strange. It switches between being too low (part of the wrapper is eaten up by the bottom of the browser) or there is extra space at the bottom even though the code says bottom:0px;. here is my new code:
#wrapper {
position:absolute;
text-align:center;
bottom:0px;
left:50%;
margin-left:-555px;
width:1110px;
height:675px;
border:1px white solid;
}
left:50%;
margin-left:-555px;
Pad it half way and subtract half the width to the left margin.
http://screensnapr.com/v/dZvq1K.png
I have 3 divs all floated left. I want to set the second div and third div to specific sizes (based on pixels or percentages) and the first div to simply take up the rest of the space.
Additionally at runtime depending on the user's privileges one of the specific sized divs might not be displayed. I need the first div to take up the space left over.
How can I do this?
You can use display:table property for like :
.parent{
width:100%;
display:table;
}
.fill{
border: 3px solid green;
display:table-cell;
}
.fixed{
width: 100px;
border: 3px solid blue;
display:table-cell;
}
http://jsfiddle.net/WVDNe/8/
It's not work in IE7 & below.
But check this it's work in all browsers:
http://jsfiddle.net/LJGWY/3/
First of all here the work in progress website link http://jacobnlsn.com/wordpress/. I want the bars to be the same height. Here is what i have in CSS for both:
#bodybinblog {
width:546px;
float:left;
background:#400000;
border-left:solid 9px #cdba70;
border-right:solid 9px #cdba70;
margin:0 15px 0 30px;
padding:0;
}
#sidebarbinblog {
width:229px;
height:inherit;
float:left;
background:#400000;
border-left:solid 10px #cdba70;
border-right:solid 10px #cdba70;
margin:0 0 0 11px;
padding:0;
}
Any idea how to fix this?
I think one of the tricks designers use in webdesigns is the laying of background images. In this case, you want the sidebarbinblog to assume the same height as the bodybinblog because you want the background to fit nicely. If the sidebar's height is higher than the body, same problem will occur but this time on the body side.
The solution is to create a background image of maybe 1px horizontally capturing both for the body and the sidebar. Apply that background on the container div of both the body and the sidebar Repeat-y it so it spans the full height.
You want to use "faux columns". Here is a useful link - http://dustinbrewer.com/tutorials/fauxcolumns/
It should work like magic.