Long story short, I am creating a webpage that has a fixed wrapper <div> across the top and a small amount of "content" underneath it that you can scroll up and down from.
Problem is that my "content" <div> doesn't start from the bottom of the wrapper <div> but further up the page underneath it
Here's an example: jsfiddle
#wrapper {
background-color: #327bb7;
margin: 0 auto;
position:fixed;
color:#FFFFFF;
line-height: 100px;
width:100%;
height:100px;
}
Because of the:
position:fixed;
Add for example:
position: relative;
to #content.
or
position: absolute;
top: 100px;
the last if you want to append the content below the fixed area.
add padding-top : 100px Or whatever you want
but basically the padding will be the height of the wrapper.
#content {
padding-top : 100px;
}
Depending on the requirements of your layout you might want to try something like this.
document.getElementById("content").style.marginTop = document.getElementById("wrapper").style.height;
Related
So I have a fluid layout with a fixed nav. I have: the fixed nav itself, and a div containing four other divs that Im looking to fill the space beneath the fixed nav completely. I cant seem to make this happen without having some kind of scrolling of either the nav or the divs.
The nav is set to position:fixed
The div containing the content div is set to position:absolute height:100% width:100%
The four content divs themselves are set to float:left height:50% width:50%
Im not even certain this can be handled with css alone, if it can that would be awesome, if not, ill entertain other possibilities. Any help, as always, is greatly appreciated.
Development area:
http://riverhousegolf.icwebdev.com
Maybe there is solution with CSS only, but here is jQuery solution. Content below menu will fill rest of space, without scroll bars.
HTML markup will be:
<div id="menu">SOMETHING IN MENU</div>
<div class="content">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
<div class="part4"></div>
</div>
CSS:
body,html{padding:0; margin:0;height:100%;width:100%;}
#menu {
position: fixed;
top: 0;
background: blue;
height: 50px;
width: 100%;
}
.part1 {
width:50%;
height: 50%;
float: left;
background: purple;
}
.part2 {
width:50%;
height: 50%;
float: left;
background: red;
}
.part3 {
width:50%;
height: 50%;
float: left;
background: green;
}
.part4 {
width:50%;
height: 50%;
float: left;
background: silver;
}
.content{
width: 100%;
position: relative;
}
jQuery:
var height = $(document).height();
var menu_height = $("#menu").height();
var content_height = height - menu_height;
$(".content").css("height", content_height);
$(".content").css("top", menu_height);
DEMO
Most important part is jQuery. First, we need to get height of document (html), then height of menu. Then, we substract menu height from document height, and result is content height. Same result we will apply to top position of content, to avoid overlaping.
Remove the "overflow-y: scroll;" attribute from your "html" selector in your style sheet.
edit:
I think if you are to use pure CSS you are going to have a scroll bar. I made a fiddle to show how to at least stop the nav from cutting off th top of the other divs. I used a
<div class="spaceTaker" >
that bumps the rest of the page down.
http://jsfiddle.net/Dtwigs/XRJ8n/
Edit2:
Try keeping all of the widths the same. But remove all of the heights where they are set to a percentage. The html element should have height: 100% but your tiles, etc. should not. Now put this jquery on your page.
$( function () {
var pHeight = $("html").height() - $("nav").height();
$(".tile").height(pHeight / 2);
});
Also make your nav position relative.
http://jsfiddle.net/Dtwigs/XRJ8n/
This is the page I am working on right now: http://jsfiddle.net/0xsven/hycRx/
I want the page to expand vertically to fill the whole screen so that the footer is always at the very bottom. I am not searching for a sticky footer! I want the page to expand to the bottom like in this picture.
Any idea if this is possible?
Update
I used some confusing words so I am trying to clarify my question:
I want my page to always fill out the viewport vertically, even if there is not enough content. As soon as there is enough content to even extend the viewport the page should be scrollable. In my tests a sticky footer always stays at the bottom of the viewport covering other elements, which I don't want to happen.
One solution I came up with is manipulating/resizing the paddings/margins with jquery so it fits the viewport. But I dislike using javascript for such things.
You can experiment with the position attribute, like this:
#footer{
background-color: #222;
position: relative;
bottom: 0;
}
#footer{
position: fixed;
bottom: 0;
}
The behaviour you're trying to emulate is that of the conventional CSS Sticky Footer.
Here's a simple example:
HTML
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
CSS
html, body {height: 100%;}
#wrap {min-height: 100%; *display:table; *height:100%}
#main {overflow:auto; padding-bottom: 150px;} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
i am trying to code an html with 2 divs inside a div.
There is a parent div with no width or height.. the width is the browser width and the height is not specified.
I want inside this parent div, 2 divs: 1st one needs to have a width or 250px and the 2nd one needs to have the rest of the screen's width. They both are missing the height.. depending how much content there will be inside it.
Now i was trying to make it like this:
<div id="calendar">
<section id="list">
</section>
<section id="grid">
</section>
</div>
and the css like this:
#calendar {
margin: 0 auto;
position: relative;
overflow: hidden;
}
#calendar #list {
background: #f00;
position: absolute;
width: 250px;
left: 0;
top: 0;
}
#calendar #grid {
background: #0f0;
position: absolute;
left: 250px;
top: 0;
right: 0;
}
now the problem is, the parent div doesnt resize when i add content to the children divs
I hope there is a workaround with the CSS to solve this cause it would be bad to do it via JS.
Thank you in advance,
Daniel!
Here's my solution -> http://tinkerbin.com/Z8mJmItU
Float the #list with its given width, then give #grid the same margin-left.
Then to get both columns to look like they have 100% of the height of the parent-container you need an image. Before you'd have to use an 'actual image'. Today you can simply rely on css3 gradients for backgrounds making your page load faster (1 less http request for the image). It may seem more complicated, but it actually isn't 'that' complicated. It even ends up giving you more flexibility since you can change the width and color of the columns without needing to create a new image. All you need is to change the css.
You need to specify a height if you are going to use absolute. Then it should work.
EDIT
use
position: relative;
on the child elements.
EDIT 2
Perhaps this post would help with what you are after? Div width 100% minus fixed amount of pixels
Don't use positioning, use float ... with your current method the parent will collapse and the only way to determine the required height of the parent, would be to calculate the height of the highest child element (typically, with JavaScript).
<div id="calendar">
<section id="list">
</section>
<section id="grid">
</section>
<div class="clear"></div>
</div>
... and the CSS ...
#calendar {
margin: 0 auto;
position: relative;
}
#calendar #list {
background: #f00;
float:left;
width: 250px;
}
#calendar #grid {
background: #0f0;
margin-left: 250px;
}
.clear{
clear:both;
}
This way the #calendar will adjust in height to the tallest child element. Also remember to remove the overflow rule.
... the above for the sake of being brief, you should probably look at using clearfix (by adding a class to #calendar) - read more here.
Goal:
A CSS two column layout with main content in the flow first followed by left nav (see example code). This is probably easier than I think but I could not find any clear cut example here or online. The left nav has to have a fixed width.
I would like to position the left nav and main content areas as you would expect (left nav then main content). This is for SEO purposes to place the content as high up in the flow as possible then position it appropriately. I need to have this work in IE6 as well. The main content area needs to expand with the browser window. With my current version the left nav is absolute positioned and overlaps the main content container. Thanks in advance for all you CSS gurus!!! Hopefully this can be of use to others as well.
<style>
.clearly {clear: both; font-size: 1px;}
.contentContainer {border:1px solid; width:800px;}
.leftNav {width:200px;background-color:#CCC;position:absolute;}
.mainContent { position:relative;left:200px;width:100%;float:left;background-color:#A6C9FF;}
</style>
<div class="contentContainer">
<div class="mainContent">
Relative Main Content - Width 100%
</div>
<div class="leftNav">
Absolute Left Nav<br />
Absolute Left Nav<br />
Absolute Left Nav<br />
</div>
<div class="clearly"> </div>
</div>
Drop the containing div.
html, body { width: 100%; height: 100%; overflow: hidden; margin:0; padding: 0; }
.mainContent
{
position: absolute;
left: 200px;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.leftNav{
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 200px;
}
http://jsfiddle.net/hFAaZ/
P.S. this has an advantage over the other answer in that any backgrounds applied to either nav or content areas will always fill the page. This is usually what is expected from the designer.
Edit
Just noticed that you need a fixed width on the container. Add .container to the html,body list above, then also add another rule to ste it's width to 100%;
Is this what you are after:
http://jsfiddle.net/Mutant_Tractor/8uws6/
Simple semi-fluid + fixed layout:
Fluid column:
padding-left: 170px;
Fixed:
width:150px;
float:left;
background:red;
position:absolute;
I've found a lot of variations to this question within SO, but it seems no matter what I try I can't get this (seemingly very simple!) thing working!
What I'm trying to do is to keep the 'centered' div in the center of the viewport and to place the 'sidebar' div directly to its right (i.e. not right-aligned to the viewport) without affecting the centering of the 'centered' div.
Here's some test code on jsfiddle:
http://jsfiddle.net/6wCyr/13/
Everything I've read seems to imply that the float property is exactly what I'm looking for, but the results in the link show that I get weird results wherein the right sidebar is placed below the 'centered' div rather than beside it. That's what's shown in the link.
I've also seen a solution involving using a negative value for the right property, and setting the width of the sidebar exactly, but I couldn't get that one going either.
Hopefully this question is as easy to solve as I think it should be! Just can't seem to find the right set of div inside div and so forth. Hard to debug these alignment issues!
Thanks!
Live Demo
I moved div.sidebar inside div.centered.
I added position: relative to div.centered.
We're using this technique.
You don't have to declare a fixed width on div.sidebar.
CSS:
div.centered {
margin-left: auto;
margin-right: auto;
border: dashed;
width: 100px;
height: 100px;
position: relative
}
div.sidebar {
border: dotted;
position: absolute;
top: 0;
left: 100%
}
HTML:
<div class="holder">
<div class="centered">
CENTERED
<div class="sidebar">
RIGHT SIDEBAR
</div>
</div>
</div>
Try this.
http://jsfiddle.net/DOSBeats/6wCyr/16/
.holder {
margin:0 auto;
width:100px;
}
.centered {
border: dashed;
float:left;
height: 100px;
}
.sidebar {
border: dotted;
float:left;
margin-right:-100px;
width:100px;
}
If you do not set a width to your holder and center it, the sidebar will float to the edge of the window.
Try this:
HTML:
<div id="holder">
<div id="sidebar">Sidebar</div>
<div id="centered">Centered</div>
</div>
CSS:
#holder{
margin:auto;
width:500px;
}
#sidebar{
border:dotted;
float:left;
width:100px;
}
#centered{
border:dashed;
margin-left:110px;
width:380px;
}