http://69.65.3.168/~doubleop/pro.sperity/
The content and footer are both in a div (#left) and the sidebar is in (#right)
#left{
width:685px;
float:left;
overflow:visible;
}
#right{
width:215px;
float:left;
margin-top:20px;
}
The footer is 900px; wide, which is why i set #left to overflow:visible, so you could see it. I am doing this because i want the sidebar to overlap the footer when the content area has small amount of content. Obviously, when the content area expands, the sidebar will remain in the same place, but the footer will be pushed down. Al this gives me a nice overlap effect.
However, IE 6 doesnt like this, and it pushes the sidebar under neath the footer.
If i change #left property to overflow:hidden, the sidebar appears in the right place, but the footer is cut off. So the problem lies within the overflow:hidden part.
Does any one know what i can do to work around this?
Just place your #footer after #right div.
<div id="left">
</div>
<div id="right">
</div>
<div style="clear: both;"></div>
<div id="footer">
Yeap. You're going to need to do a "clear:both" on the footer. Your right hand float is out of the flow of the page and the footer doesn't know that anything is above it. Clearing both will bascially turn off the floating making the footer think that something is above it, which will in turn push it to the bottom where it belongs.
Related
I have a fixed header and my content is sliding behind the header. How would I stop the content from sliding behind it.
To put it phiscially the content and the fixed menu are to pieces of paper. They are carrently behaving as if they are on different planes how would I put them on the "same plane" as if on a table. The second paper should not go under the first.
Try putting
Clear:both;
in the content div(the div sliding behind the header)
If the header is fixed like you say, put the margin top on the content div to the height of the header.
So to put this simply:
<div class='header'>
</div>
<div class='content'>
</div>
CSS
.header{
position:fixed;
width:100%;
height:100px;
}
.content{
margin-top:100px;
}
I'm trying to solve a scrollbar problem.
I had the problem that I wanted to have three divs aligned vertically and that the middle one will have the space left of the footer and the header
This post helped me with this part: Middle div with 100% in CSS?
The things is that I need that the content div (the middle div) show a scrollbar when the content overflows the middle div space.
Now I have this: http://jsfiddle.net/rv4XS/31/
<body>
<div id="wrap">
<div id="container">
<div id="header">header
</div>
<div id="content">data<br/>
data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
</div>
</div>
</div>
<div id="footer">footer
</div>
</body>
Thanks for the help.
EDIT 1: Only firefox and chrome, No IE.
EDIT 2: Maybe I'm not explaining well my question: I have a header that has variable height based on the content it has, the footer has a fixed height. Now, knowing that the header has a variable height and that the footer has a fixed height, how can I make a middle div (content div) that takes all the space left by the footer and the header?
If the header increases its height a lot ... what will happen is that the middle div will not be visible but only the header and the footer. of course the idea is that if the middle div has some data inside and it is cropped, it has to show the scrollbar.
You can give #content as below :
Note : cannot give % as you gave.Then It Occupied whole height and width which the content has.
Correct One
#content {
width:100%;
height:100px;
overflow: auto;
}
I have updated JSFIDDLER
I've got myself into a bit of predicament where I have a fixed width site, but need two fluid width bars to go 100% across the screen. I'm using a rather horrible wordpress template for the site in question, that every time you save any settings it saves the content width as per its settings. In this case it's 900px.
Thing is I'm happy with the whole site being 900px, it's just a header bar and footer bar that I need 100%, even the elements inside these bars can be 900px, I just need the colour to extend to each side of the screen.
The site in question is http://mysterybox.co/ You can see from the image below which bar I need extended out. If anyone could point me in the right direction that would be great.
Just create a new container for both your header and footer and take them out of your #container div. Something like this will work:
HTML
<div class="header-wrapper">
<div id="headerwidth">
....
</div>
</div>
<div class="footer-wrapper">
<div id="footer">
....
</div>
</div>
CSS
.header-wrapper, .footer-wrapper {
background-color:#000;
margin:30px 0 40px;
}
#headerwidth, #footer {
width:900px;
margin:0 auto;
}
I have a div inside another div which has a fixed position at the bottom of the page. I need the outer div to scroll all the way past the inner div allowing all the content to be shown.
.outer{position:relative; }
.inner{position:fixed; bottom:0; z-index:999;}
<div class="outer">
<p>Lots of content......</p>
<div class="inner">
<p>More content fixed in a box at the bottom of the page.....</p>
</div>
<div>
Maybe this well help describe it better- http://jsfiddle.net/winchendonsprings/dDgjQ/2/
What I need in this example is the yellow text to scroll all the way to the top of the red box.
You just need to add some padding to the bottom of the div.outer and adjust as necessary for the size of the red div.
In this instance, I did padding-bottom:100px;
http://jsfiddle.net/jasongennaro/dDgjQ/3/
EDIT
To respond to your comment re div.inner not appearing on each page, you could do the following with jQuery:
$('.inner').parent().css('paddingBottom','100px');
Here it is applied:
http://jsfiddle.net/jasongennaro/dDgjQ/4/
And here it is with the div.inner removed:
http://jsfiddle.net/jasongennaro/dDgjQ/5/
EDIT 2
You could also create another class and only add it to that page.
http://jsfiddle.net/jasongennaro/dDgjQ/6/
I have a centered container layout with a right fixed nav div. To make the fixed nav stay in place when viewport resizes it's set up in some nested divs. Problem is the nav div ends up infront of the content. I can change the z-index order but I want both content and nav to be accesible as in being able to "mark" text for example. Any ideas on this? Below is link to code and and an image showing the layout structure
http://jsbin.com/aliru5/3/edit
You are making this more complicated than it needs to be, try this:
<div id="container">
<div id="content"></div>
<div id="nav"></div>
</div>
#container {
margin:0 auto; /* center container in browser */
overflow:hidden; /* clear floats */
width:900px
}
#content {float:left;width:640px}
#nav {float:right;width:240px}