Consider the following code:
div {
width:100%;
height:64px;
border:1px solid #000;
}
.top-fixed {
position:fixed;
}
.middle-fixed {
position:fixed;
top:64px;
}
.bottom {
margin-top:128px; #64+64
}
<html>
<head></head>
<body>
<div class="top-fixed">Top Fixed</div>
<div class="middle-fixed">Middle Fixed</div>
<div class="bottom">Bottom</div>
</body>
</html>
For div.bottom, I am using margin-top property so that it does not overlap with the top-most div. But it also brings div.top-fixed 'down' with itself (see the fiddle).
How can I rectify it? One way is possibly using padding-top property for div.bottom instead of margin-top, but that does not sound elegant.
You missed top 0 in the top-fixed div.
Try this
.top-fixed {
position:fixed;
top:0;
}
Change the CSS of the your .bottom element to:
.bottom {
position:relative;
top:128px; #64+64
}
Add top:0; to your .top-fixed class.
Related
I have this kind of structure coming from the following code. And I cannot achieve to do the following despite my efforts and reading.
In pure CSS, how may I force X to stick the right border of the container, being under Y2/Y1 divs ?
The container and C do not have a fixed width (I put a fixed width in the code for convenience). All the other ones have fixed width.
.
I
<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
BODY {
font-family:Arial;
}
DIV.container {
width:200px;
height:20px;
line-height:20px;
font-size:9px;
background-color:yellow;
}
DIV.BlocA {
width:20px;
background-color:#AAAAAA;
float:left;
}
DIV.BlocB {
width:20px;
background-color:#999999;
float:left;
}
DIV.BlocC {
width:20px;
background-color:#666666;
float:left;
}
DIV.BlocX {
padding-right:9px;
width:50px;
background-color:#00E9E9;
text-align:center;
float:right;
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70);
}
DIV.BlocY1, DIV.BlocY2 {
width:20px;
float:right;
}
</style>
</HEAD>
<DIV class="container">
<DIV class="BlocA">A</DIV>
<DIV class="BlocB">B</DIV>
<DIV class="BlocC">C</DIV>
<DIV class="BlocY1" style="background-color:red;">Y1</DIV>
<DIV class="BlocY2" style="background-color:green;">Y2</DIV>
<DIV class="BlocX">X</DIV>
</DIV>
</BODY>
</HTML>
I am not sure if this is what your desired result was.
CHECK DEMO
I used clear:both; and float:left; on the elements you wanted to the left. I also wrapped the 'Y' divs so that I could float them side to side.
I share with you the link that changed my life and how I deal with CSS positioning
http://www.barelyfitz.com/screencast/html-training/css/positioning/
To control which div is on top you may give them each a z-index.
I would either float them all in a certain order or I would use position relative/absolute
How to, as the title suggests, make a div didn't move. So, when the user scroll our web, the content is moving but not the div-element. If let say the div-element I want to implement is a sidebar, how can I do that with only a CSS script? (or with HTML5 power).
<style type="text/css">
div.fixedDiv{position:fixed;top:0;left:0;}
</style>
You can try this... Jsfiddle
Html
<div class="wrapper">
<div class="fixed"></div>
</div>
Css..
.wrapper { position: relative; height: 1500px; background:red; }
.fixed { position: fixed; left:0; top:50; width:100px; height:100px; background: green; }
<style>
#yourdiv{
position:absolute;
left:100px;
top:150px;
}
</style>
<div id="yourdiv">Hello I'm div</div>
Adjust the coordinates left and top as you desire.
Anyways you can see css positionings here.
I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
Try making the footer position:fixed.
http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.
Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
EDIT
Using the technique in the article above (tested - and works in fiddle):
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x
Try using with absolute position for the footer div
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
Make sure that body height is 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer
It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.
There...
#logoWrapper{
background-image: url(../image/bg_img.jpg);
height:86px;
width:100%;
}
Q> How to fix the size of the image get into #logoWapper same with its Wapper automatically?
#logoWrapper img{ // not work
height:86px;
width:100%;
}
Thank you!
For a background image in CSS3 if you want to stretch not repeat you can use background-size: 100%;
Documented here http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Alternatively you can layer a absolute positioned image inside a relative positioned div and add an additional wrapper.
<style>
#wrapper {
position:relative;
...
}
#wrapper div, #wrapper img {
position:absolute;
top:0px;
left:0px;
...
}
</style>
<div id="wrapper">
<img ... >
<div> this goes on top of image</div>
</div>
I have that problem: I want to have a centered layout with or without a right-side sidebanner (it should float right to the content). so my css has to center content+sidebanner IN CASE there is a sidebanner tag or just the content (content and sidebanner have a fixed width) if there is no sidebanner tag - there are some pages where there should be the sidebanner and on some it isn't. css should format both possibilities well.
so it should like this:
<div id="wrapper"><div id="content"></div><div id="sidebanner"></div></div>
i tried a couple of things with floats and display:inline but it didn't really work out :(
Try this...
#wrapper {
position:relative;
left:50%;
margin-left:-500px;
width:1000px;
}
margin-left should be negative half of the width.
For the sidebanner, when its there, you can add a class .wsidebanner to the content block as follows:
<div id="content" class="wsidebanner"></div>
and the css would be:
#content {
background-color:#199;
}
.wsidebanner {
float:left;
width:800px;
}
#sidebanner {
background-color:#919;
float:right;
width:200px;
}
i would use following
#wrapper {
width:1000px;
margin:0 auto; //centering the wrapper
position:relative; //so we can position the ad absolutely
}
#sidebanner {
width:120px;
position:absolute;
top:0;
right:-120px; // same as width
}
Since selecting an element's parent is not possible with CSS, you'll have to add a class to the wrapper div when there's no sidebar.
HTML
<div id="wrapper">
<div id="sidebanner">...</div>
<div id="content">...</div>
</div>
<div id="wrapper" class="nosb">
<div id="content">C</div>
</div>
CSS
#wrapper {
width: 400px;
margin: 0 auto;
}
#wrapper.nosb {
width: 300px;
}
#content + #sidebanner {
margin-right: 100px;
}
#sidebanner {
float: right;
width: 100px;
}
See fiddle.
Note: IE6 doesn't support the adjacent sibling selector.