I have a 3 container structure.
container 1 is of x height...container 2 fills the rest of the window...container 3 SHOULD start after container 2, but its disappeared.
JSFIDDLE
HTML
<header>
</header>
<div id="maincontent">
</div>
<footer>
</footer>
css:
html,body{padding:0; margin:0;}
header{
background-color:red;
height:1.8em;
}
#maincontent{
background-color:black;
position:absolute;
top:1.8em;
bottom:0;
width:100%;
}
footer{
background-color:yellow;
height:50px;
}
How can i get container 3 (footer to follow container 2).
I know its position absolute of container 2 thats causing the problem but thats the only way I can get that container to fill the screen.
I've tryed playing around with margins to no avail;
Clearer explanation of what i'm trying to achieve:
container1 + container 2 = 100% height. Then scroll to see containe 3.
I could acheive this in javascript but was hoping it was possible in css.
Because #maincontent has absolute positioning, footer is behind it below header.Use position: absolute to put footer at the bottom of the page; then change bottom: 0 to bottom: 50px for #maincontent. Fiddle: http://jsfiddle.net/xFWHk/1/
Change #maincontent's bottom property to the height of your footer, ie:
#maincontent {
top: 1.8em;
bottom: 50px /* Height of footer */
}
Here's a fix: http://jsfiddle.net/xFWHk/2/ ... You don't need absolute positioning in your case as "container 2" will follow "container 1" as the natural flow of the document.
CSS:
html, body {height:100%;padding:0; margin:0;}
header{
background-color:red;
height:1.8em;
}
#maincontent{
background-color:black;
width: 100%;
height: 100%;
}
footer{
background-color:yellow;
height:50px;
}
I've solved it, FINALLY!
footer{
background-color:yellow;
height:50px;
width:100%;
position:absolute;
bottom:-50px;
}
added absolute to the footer and a negative margin. Will see how this goes.
Related
This is my html code.
I want header separated with content and content should be separated with header and footer with each having position equal to absolute and stacked one below the other
<body>
<div id="header" class="div">
</div>
<div id="content" class="div">
</div>
<div id="footer" class="div">
</div>
</body>
css code
.div {position: absolute}
#header{top:0;left:0;right:0}
#footer{bottom:0;left:0;right:0}
You will need to specify top in the css of the content div, whose value should be equal to the header's height when you are using absolute positioning. One more thing, you may even achieve your purpose with more simple ways by using relative positioning. But as per your approach right now, this could be done.
Here is a working example.
These are the changes in the css code:
.div {
position: absolute;
border:solid 1px #000; /*added this just to visualize things clearly.*/
}
#header{
top:0;
left:0;
right:0;
height:50px; /*specified some random height to the header.*/
}
/* specified css rules for the content div */
#content{
top:50px; /*this should be equal to or more than header's height.*/
left:0;
right:0;
}
#footer{
bottom:0;
left:0;
right:0;
height:50px;
}
hm. I dunno if I really understand your question.
why are you positioning everything absolutely? it takes elements out of normal flow.
for instance if you just use your html:
<body>
<div id="header" class="div">
</div>
<div id="content" class="div">
</div>
<div id="footer" class="div">
</div>
</body>
And some simple CSS without absolute positioning:
#header {width: 100%;
height: 200px;
background-color: red;}
#content {width: 100%;
height: 200px;
background-color: blue;}
#footer {width: 100%;
height: 200px;
background-color: yellow;}
You get three divs stacked on each other. if you want to remove the margins / padding :
* {margin: 0px;
padding: 0px;}
I'm not sure what you mean by "stacked one below the other".
Perhaps you are referring to z-index (http://www.w3schools.com/cssref/pr_pos_z-index.asp)? In that case, use something like this:
.div {
position: absolute;
}
#header{
z-index: 3; /* uppermost */
}
#content{
z-index: 2; /* in between */
}
#footer{
z-index: 1; /* lowest */
}
Or are you referring to vertical position? – in which case https://stackoverflow.com/a/33030721/5412860 answer would work.
Though https://stackoverflow.com/a/33030747/5412860 makes more sense...
I am trying to make a side navigation bar that has a position: fixed and a height: 100%, but when I try this there is always still space were you can see the background below and or above the div. And by the way, I also tried to make the height like 1000px but I still have the same problem.
HTML:
<div id='navbar'></div>
CSS:
#navbar {
background-color:black;
width:100px;
height:100%;
z-index:99;
position:fixed;
left:-10px;
bottom:10px;
}
JSFiddle
I guess that you're setting bottom: 10px to push your #navbar to the top where you had that 10px spacing in the first place, which causes the same spacing in the bottom. You can force your element to stretch from start/end of it's parent height by applying top: 0; bottom: 0;(you should remove bottom: 10px;) to the #navbar element.
P.S. top: 0 is superfluous, however I've set it to demonstrate the concept.
JSFiddle
https://jsfiddle.net/7oxyvab5/2/
navbar has a bottom of 10px set in the CSS.
#navbar {
background-color:black;
width:100px;
height:100%;
z-index:99;
position:fixed;
left:-10px;
bottom:0px;
}
I have som problems, regarding Max-width and Absolute Positioning.
In the top of my site, I have a '100%-width section' with a background-image.
I want a small image partly covering the bottom of the top image. To do so, I use Position:relative on the section (top image) and position:absolute on the small image. So far so good..
My problem is, that i want the small image to be centered and have a max-width, so it aligns to the content on the site. (Which have a max-width of 500px..)
I really can't figure out, how to do it...
So, is there a way to only affect vertically, when using position:absolute, or maybe something else i can do?
I hope it makes sense.. :)
screens:
http://cvdmark.com/images_help/screens.jpg
<body>
<section id="img_heading">
<img src="#">
</section>
<section id="content">
<ul>
<li>
</li>
</ul>
</section>
</body>
body {
width:100%;
min-width:100%;
background-color:#000;
float:left;
}
#img_heading{
width:100%;
min-width:100%;
height:150px;
margin-bottom:6em;
background:url(../img/heading_img_test.jpg);
background-position: center center;
float:left;
position:relative;
}
#img_heading > img{
width:90%;
height:100px;
position:absolute;
bottom:-75px;
margin: 0 auto 0 auto;
max-width:500px;
/*left:5%;*/
background-color:#F69;
}
#content{
width:90%;
margin: 0 auto 0 auto;
max-width:500px;
}
#content ul{
width:100%;
list-style-type: none;
}
#content ul li{
width:100%;
float:left;
margin-bottom:30px;
}
JS Fiddle : http://jsfiddle.net/rpatil/ukKgx/
I think what you'd want is to align an absolute position div to the bottom of the section and center it.. (this following assumes you have your content in the section centered too..) replace div with img if you want to and give it your required id.. I ve given "foo-id"
div#foo-id
{
position: absolute;
bottom: 0px; /*since you want it at the bottom of section*/
z-index: 2;
width:90%; /*since your asked for 90%*/
max-width: 500px;
/*the following to center your image*/
margin-left:-45%;
left:50%;
}
Believe that helps!
And here is an updated jsfiddle.. thanks #rubyist..
http://jsfiddle.net/ukKgx/2/
This is an other solution to make it centred --> jsFiddle
<section style="position: absolute; left: 50%;width:50%">
<div style="position: relative; left: -50%;background-color:#ccc; border: dotted red 1px;width: 90%;max-width:500px;height:150px">
</div>
</section>
If you want to make it more custom, you have to use Javascript onLoad page to calculate screen width % picture width
I am trying to layout a page that has a horizontal navigation bar across the top and content area that will gain scrollbars when the content is too big.
My current way of doing this is a div width 100%; height 50px; position absolute; top 0; left 0; and then a second div with height 100%; width 100%; margin-top 50px; overflow:auto; however, the scrollbar that appears is offset by the 50px margin and as such pushes the content off the bottom of the page. If i remove the margin it all works but it puts the content behind the navigation bar.
I also tried wrapping it in a container an experimenting with putting the margin their and the overflow in the child but this still didn't seem to have the required effect.
jsFiddle, with comments to try explain it better.
http://jsfiddle.net/Piercy/hggXJ/
HTML
<div id="nav">
<h1>Navigation</h1>
</div>
<!-- <div id="contentContainer"> -->
<div id="content">
<div id="oversizeContent">
<p>You can see the black border on this green box, but you cannot see the bottom black border. Similarly you cannot see the bottom arrow of the scrollbar.</p>
<p>I tried putting a wrapper around the content and putting the margin on that but the scrollbar still over flows Uncomment the contentContainer div and comment/uncomment the corresponding css.</p>
</div>
</div>
<!-- <div> -->
CSS
html, body
{
height:100%;
overflow:hidden;
color:white;
font-weight:bold;
}
#nav
{
height:50px;
width:100%;
background-color:red;
position:absolute;
top:0;
left:0;
z-index: 2;
}
#contentContainer
{
/* uncomment this if you bring #contentContainer into play */
/*
margin-top:50px;
position:absolute;
top:0;
left:0;
*/
height:100%;
width:100%;
}
#content
{
/* moving this into #contentContainer doesnt help either */
/* comment this if you bring #contentContainer into play */
margin-top:50px;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:blue;
z-index: 1;
overflow: auto;
}
#oversizeContent
{
background-color:green;
width:400px;
height:1000px;
border:10px solid black;
}
instead of height:100%; do bottom:0; and it will go to the bottom of the relative parent or viewport if there is no container set to position:relative;
DEMO
Alright guys here my problem,
Im trying to make my
<div id="content" style="margin:0 auto;"><!--AJAX Loaded Content--></div>
take as much height as it can between my
<div id="header" style="position:fixed;top:0;width:100%;height:300px;"></div>
and my
<div id="footer" style="position:fixed;bottom:0;width:100%;height:200px;"></div>
The only css rule I have is
html,body{position:fixed;height:100%;width:100%;}
I tried using height:100%; on my #content but it still display as a height:auto;...
Also, the whole thing still needs to display properly on mobile.
So my question is: what CSS rule(s) should I add/remove to make my #content take the whole space between the two other <div>'s?
http://jsfiddle.net/8AQQg/2/
As I said in my comment, you can't flow around fixed or absolutely-positioned elements. One approach might be to use an absolutely-positioned div with the same top and bottom dimensions as the heights of your #header and #footer:
http://jsfiddle.net/G3k54/2
html, body {
position:fixed;
height:100%;
width:100%;
}
#header {
position:fixed;
top:0;
width:100%;
height:30px;
}
#footer {
position:fixed;
bottom:0;
width:100%;
height:20px;
}
#content {
position: absolute;
top: 35px;
bottom: 25px;
width: 100%;
}