I have this side menu that I wanted to be fixed so it will follow the user when the user scrolls. I'm planning to put jumping targets inside it because the contents are very long.
The problem is, I made it fixed and then when I scroll it down, it went pass the footer. I used
top:0;
and it doesn't went up the footer, but it went up the header. What would be the solution?
This is my html.
<div class="myheader">
</div>
<div class="content">
<div class="left_side">
</div>
<div class="right_side">
</div>
<div class="footer">
</div>
This is my css:
.myheader{
float:left;
width:100%;
height:190px;
background: #fff url(img/blackorchid.png) repeat scroll 0 0;
}
.content{
float:left;
background: #fff url(img/linen.png) repeat scroll 0 0;
height:auto;
margin-left:120px;
width:1100px;
}
.left_side{
width:800px;
float:left;
}
.right_side{
width:300px;
height:500px;
background-color:yellow;
float:right;
position:fixed;
top:0;
}
There are contents inside the left_side. That's where the texts are. The division that I want to be fixed is <div class="right_side">.
Not sure I am fully following, but if you want it to be fixed to the foot of the page, then why not set bottom to 0. See here: jsdfiddle. I also set the right to 0 to make it fix to the right of the page.
.right_side{
width:300px;
height:500px;
background-color:yellow;
position:fixed;
bottom:0;
right:0;
}
I added the fill div just to make sure that the page scrolled.
If you want some space from the bottom, then just specify a margin. See this updated fiddle: jsfiddle
Related
There is a content class, in which there 2 have class classes in it, One is left float and other is right float as you seen in image.
I want a footer at the end or bottom of my page, i.e after the 2 classes div ends.
CSS:
.footer
{
background-color:black;
width:100%;
height:25px;
margin-right:auto;
margin-left:auto;
color:white;
bottom:0px;
position:absolute;
}
But is it not working. If you see the image,it is not at the bottom... even though bottom:0px? Is there any problem?
Add this before footer div
<div style="clear:both;"></div>
and remove position: absolute from footer css
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
ive been making pages using tables forever. recently ive been trying to switch to divs since everyone seems to have done that, and its been a pain. anyway i was thinking if anyone could be nice enough to help me figure this one out. i have attached a picture that will explain the problem because after all a picture's worth a thousand words. thanks in advance.
[image removed]
do you mean something like this?
html:
<div id="content"><br/></div>
<div id="navigation"><div><br/></div></div>
css:
html,body{
height:100%;
margin:0;
padding:0;
}
#content{
width:800px;
border:1px solid red;
min-height:100%;
margin:0 auto;
position:relative;
}
#navigation{
position:absolute;
top:0;
width:100%;
height:100px;
background:gray;
}
#navigation div{
width:800px;
height:100%;
background:lightgray;
position:relative;
margin:0 auto;
}
demo:
http://jsfiddle.net/Z8UDf/
To center a div use CSS margins:
<div style="width: 800px; margin: 0 auto"></div>
Inside that div you can then place your navigation bar which will fill up the space available to it.
With regards to the spaces either side of the main content you have two options.
You can set a background-image on the body at top repeat-x so that it appears that you have a horizontal bar right the way across your page.
You can split the navigation from the main body, have both centered using the method above. Wrap the top 'navigation' div with another div that will be 100% width. You can then style that div as you wish. This has the advantage that you can move it without updating your background images.
use css style
<div style="position:absolute;left:100px;top:150px;" > MyDiv1 </div>
<div style="position:absolute;left:130px;top:150px;" > MyDiv2 </div>
I am trying to implement the CSS Sticky Footer method as shown at cssstickyfooter.com. (I have also tried Ryan Fait's solution but to no avail).
I have followed everything to a t, or least I think I have. I have a container div (they call it wrap), a logo bar (they call it a header) and a page div (they call it main) then I have my footer.
So here is the problem, if I have the overflow:auto on then I get a really short div and a scroll bar (yucky). But if I comment it out all my content shows but the page still believes that the div is the same size as if the overflow:auto was not commented out.
It otherwise works just as it should. The footer stays at the bottom and when resizing, it stops at the short page/main div. Is there any way to get it to the bottom of my content? I should mention that I can't use fixed height for my page/main div because I need it to resize based on the size of the div's it contains (whichever one is visible at the time).
It may or may not be the footer causing the issue, either way I could use some help figuring this out.
HTML:
<body>
<div id="container">
<div id="logo">
<div id="home-flower"></div><!-- end home-flower -->
<div id="about-flower"></div><!-- end about-flower -->
<div id="proof-flower"></div><!-- end proof-flower -->
<div id="contact-flower" ></div><!-- end other-flower -->
</div><!-- end logo-->
<div id="page">
<div id="spacer"><br/></div><!-- end spacer -->
<div id="home">home</div><!-- end home -->
<div id="about">about</div><!-- end about -->
<div id="proof">proof of concept</div><!-- end proof -->
<div id="contact">contact</div><!-- end contact -->
</div><!-- end page -->
</div><!--end container-->
<div id="footer"> </div><!-- end footer -->
</body>
CSS:
* {
margin:0px auto !important;
}
html, body {
height:100%;
}
#container {
width:800px;
background-color:#F0F;
min-height: 100%;
height: auto !important;
height: 100%;
}
#page{
width:100%;
min-height:100%;
position:relative;
background-color:#F00;
padding-bottom:75px;
/*overflow:auto;*/
}
#logo{
position:relative;
width:100%;
height:210px;
top:0px;
left:0px;
background:url(images/logo.png);
}
#home{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#about{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#proof{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#contact{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#footer {
position:relative;
margin-top:-75px;
width:800px;
height:75px;
background-color:#C0F;
clear:both;
}
#spacer {
position:relative;
line-height:20px;
}
How about using
<div id="footer">
This is footer text
</div><!-- end footer -->
and css as
#footer{ position:fixed; bottom:0px; }
The footer sticks to the bottom of the page.
Is this what you are looking for.
It looks like I needed to change the position of the #home, #about, #proof, and #contact divs to relative instead of absolute like I had them. However, once I do that they are no longer stacked on top of each other. Any ideas on how to make relatively positioned divs have the same (x,y) position so that they are right on top of each other? I have the top and left set to 0px for each div but theyare just layering themselves instead of stacking...if that makes any sense.
I'm trying to make a webpage with the following structure:
1 big div (main), and 3 divs inside it, a left shadow, content, and a right shadow.
these is the css code for them, mleft and mright are the shadows.
body,html{height:100%;}
.main {
width:900px;
height:100%;
}
.mleft, .mright {
width:25px;
height:100%;
float:left;
}
.mleft { background-image: url("shadowleft.jpg"); }
.mright { background-image: url("shadowright.jpg"); }
.content {
width:850px;
float:left;
background-color:red;
}
And the html is like this:
<div class="main">
<div class="mleft"></div>
<div class="mcontent">
(content, some text and images)
</div>
<div class="mright"></div>
</div>
I want this to be viewable in big and small screens, the problem is that when viewing in small screens or making the window small, the main div height goes below the height of content div, so the shadow is too short to cover content div.
I've been playing with min-height, but min-height:auto, doesn't work, and none of the values of "overflow" does what I want.
Any clean way of solving this that works on any browsers?
Should I use javascript?, redo everything another way?
Update:This is an image of how it looks
Update2: The height of main seems to be directly the height of the window (100%) so I main is always the size of the window, which if small it's less than the content inside it, I tried playing with min-height with no success. The expected result is that it resizes until it reaches the size of it's contents, when it should stop.
OK, I've deleted all the old stuff... found a solution using positioning :)
http://jsfiddle.net/Damien_at_SF/AtX4A/
Basically, the shadows sit inside the content div and with absolute positioning are placed at 0,0 left and 0,0 right (or you could move them outside the content using negative positioning)
UPDATE: put the main div back in and applied margin:auto to it's style in order to center the whole lot :)
HTML
<div class="main">
<div class="mcontent">
<div class="mleft"></div>
<div class="mright"></div>
(content, some text and images)>
<div style="clear:both;"></div>
</div>
</div>
CSS
body,html{
height:100%;
margin:0px;
padding:0px;
}
.main {
width:900px;
height:100%;
margin:auto;
}
.mleft, .mright {
width:25px;
height:100%;
}
.mleft {
background:green;
position:absolute;
top:0px;
left:0px;
}
.mright {
background:blue;
position:absolute;
top:0px;
right:0px;
}
.mcontent {
width:850px;
background-color:red;
position:relative;
padding-left:25px;
}
Hope that helps :)