I have 3 div.
<div class="main"></div>
<div id="fixedbox"></div>
<div id="fixedBar"></div>
CSS:
.main {
width: 850px;
padding:25px 5px;
border-left:1px solid #999;
border-right:1px solid #999;
text-align:left;
overflow:hidden;
}
body {
height: 100%;
margin: 0;
overflow-y: auto;
}
body #fixedbox {
position:fixed !important;
position: absolute;
left: 865px;
top: 0;
width: 160px;
}
#fixedBar {
display:block;
position: absolute;
width:100%;
height:20px;
position:fixed;
bottom:0;
left:0;
background:#F00;
}
* html #fixedBar {
position:absolute;
}
Problem is this:
When Im adding a block with "position:relative" in main div, the block will move in scroll in ie. With adding "position:relative" to body or main, there is other problems in ie. How can I used positions without problems in "<div class="main"></div>" ?
Thanks in advance
EDIT: I have solved the problem with change the doctype.
I presume you are adding position:relative to the body to position the 2 fixed position:absolute containers? If not you will need to.
I have had some problems with setting position:relative in IE in the past. Try some of the usual hacks like setting
height:1%;
Or
display:block;
to .main
You may find a specific solution on http://www.positioniseverything.net
Related
I'm having a small css issue with a basic html layout .
What is want is this : (without content)
http://jsfiddle.net/cge89ef4/1/
With content : http://jsfiddle.net/cge89ef4/2/
As you can see , the footer remains stuck and does not go to the bottom of the page as i want it too.
CSS :
body {
background-color: blue;
color:red;
margin: 75px auto 50px;
height:100%;
}
div#fixedheader {
position:absolute;
top:0px;
left:0px;
width:100%;
height:75px;
background:yellow;
}
div#fixedfooter {
position:absolute;
bottom:0px;
height:50px;
left:0px;
width:100%;
background:black;
}
Any way to fix it ?
Thanks
UPDATE
I have changed the DOM to HTML5 Tags for Header and Footer , I have also added a little JavaScript that reacts to the window resizing.
So IF your window height is more than the document height the footer is positioned absolute to the bottom, IF not the footer is positioned FIXED above the content
Also if you scroll down and the header is not visible any more it becomes fixed above the content as well
http://jsfiddle.net/cge89ef4/8/
UPDATE END
Here http://jsfiddle.net/cge89ef4/3/
change absolute to fixed for footer
position:fixed;
If you dont want the footer to overlap your content at any time you should add a margin or padding bottom to the content container with the height of the footer.
In addition you could look intho HTML5 tags , because there are already preset tag names for header, footer etc
For exampe:
<header></header>
<article><section></section></article>
<aside></aside>
<footer></footer>
use this styling for your body
body{
position: relative;
margin: 0;
}
Just make sure you give position: fixed to header and if you want the footer not to be fixed all the time, use a min-height.
body {
background-color: blue;
color: red;
margin: 75px auto 50px;
height: 100%;
}
div#fixedheader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 75px;
background: yellow;
}
div#fixedfooter {
position: fixed;
bottom: 0px;
height: 50px;
left: 0px;
width: 100%;
background: black;
}
Fiddle: http://jsbin.com/behajakuse/1/edit?html,css,output
have the body position: relative;
members,
I'm having troubles with my HTML code. I am trying to make somekind of youtube. But when I try to create this:
How it should look1
But this is how it looks when I try to make it in HTML:
http://jsfiddle.net/4u64jb5w/3/
<div class="Video">
<div class="BlackRect"></div>
<div class="Video-content">
<h2 class="Titel">This is a video title..</h2>
<div class="Video-footer">
Gebruikersnaam
</div>
</div>
</div>
.Video {
display:block;
position:relative;
margin-top: 100px;
}
.BlackRect{
Width:250px;
height:150px;
background-color:#000;
float:left;
}
.Titel {
color: #34495e;
display:block;
font-size: 25px;
float:left;
position:absolute;
top:0;
margin-left: 270px;
padding: 0;
}
.Video-content{
/*nothing to see here yet*/
}
.Video-footer {
position: absolute;
bottom: 0px;
left:0px;
}
I've noticed while inspecting the code in google chrome that the divs all have a width but no height. I think it has something to do with my positioning in CSS but I don't know exactly what I did do wrong.
How can I get this to like the picture I posted?
Any help is appreciated!
Thank you in advance
UPDATE!:
When I give the divs a static height I get the belonged result but how is it possible that I have to do so?
You've given position: absolute; for child elements like title1 and footer. But the immediate parent is position: static; so they were misaligned.
Other than that, instead of having margin-left for video-content, it's preferable to make it float left. it will be very generic and also can make it responsive easily.
.Video {
display:block;
position:relative;
margin-top: 100px;
}
.BlackRect{
Width:250px;
height:150px;
background-color:#000;
float:left;
}
.Video-content {
float: left;
position: relative;
margin-left: 10px;
height: 100%;
min-height: 150px;
}
.Titel {
color: #34495e;
display:block;
font-size: 25px;
margin-top: 0px;
}
.Video-footer {
position: absolute;
bottom: 0px;
}
DEMO
You've got compounded problems here. The first one is that elements that are position:absolute; do not create space inside their parent container. So first your a tag collapses because .Tite1 doesn't take up space, and then the .video-content container collapses because neither does .Video-footer. This equals zero height for that entire block.
Your second problem is that elements that are floated aren't by default considered in their parent's stacking context. So if all the elements in a parent are 'floated', the parent element has no height. This is the case for your .BlackRect element.
To break down:
<!-- no height because all children/grandchildren produce 0 height -->
<div class="Video">
<!-- doesn't create height because floated -->
<div class="BlackRect"></div>
<!-- doesn't create height because all children/grandchildren pos absolute -->
<div class="Video-content">
<!-- collapses because .Tite1 doesn't create height -->
<a href="#">
<!-- doesn't create height because position absolute -->
<h2 class="Titel">This is a video title..</h2>
</a>
<!-- doesn't create height because position absolute -->
<div class="Video-footer">
Gebruikersnaam
</div>
</div>
</div>
There isn't much to be done if all the elements in .Video-content are positioned absolute, but you can force .BlackRect to create space through a few different methods, the easiest is by applying overflow:hidden to the .Video wrapper.
.Video {
display:block;
position:relative;
margin-top: 100px;
overflow:hidden;
}
You do not need floats and the only absolutely positioned element should be the one you want at the bottom
.Video {
display: block;
position: relative;
margin-top: 100px;
}
.Video a {
text-decoration: none;
}
.BlackRect {
width: 250px;
height: 150px;
background-color: #000;
}
.Titel {
color: #34495e;
font-size: 25px;
font-style: italic;
}
.Video-content {
position: absolute;
left: 270px;
right: 0;
top: 0;
bottom: 0;
}
<div class="Video">
<div class="BlackRect"></div>
<div class="Video-content">
<h2 class="Titel">This is a video title..</h2>
<div class="Video-footer">
Gebruikersnaam
</div>
</div>
</div>
You're halfway there. Instead of floating .Titel you need to float the .Video-content, since it's a sibling of .BlackRect:
.Video-content{
float:left;
margin-left:20px;
height: 150px;
position:relative;
}
Notice I've given it a margin so the text stands off from the video, given it the same height as .BlackRect, and positioned it relative. I positioned it relative to do a little trick with the footer:
.Video-footer {
position:absolute;
bottom:10px;
}
This may have been where you were going with the absolute and relative positioning, but let me explain what I did anyway: When a parent div has a position of relative, any child div of the parent with a position of absolute and will be positioned absolutely within that parent container only (in other words, absolute relative to the parent, not to the page). It looks like that's what you were after, the code just needed to be simplified.
Everything else just needed to be simplified by removing unnecessary selectors:
.Video {
margin-top: 100px;
}
.BlackRect{
width:250px;
height:150px;
background-color:#000;
float:left;
}
.Titel {
color: #34495e;
font-size: 25px;
margin-top:10px;
}
/*to remove the underline*/
.Video-content a{
text-decoration:none;
}
Here's an updated jsFiddle
Did Few twerks and came up with this
Check Fiddle Fiddle
The CSS:
.Video {
position:absolute;
display:block;
background-color:gray;
width:100%;
height:60%;
}
.BlackRect{
Width:250px;
height:150px;
background-color:#000;
float:left;
}
.Titel {
color: #34495e;
display:block;
font-size: 25px;
float:left;
position:absolute;
top:0;
margin-left: 270px;
padding: 0;
}
.Video-content{
/*nothing to see here yet*/
}
.Video-footer {
margin-top:30%;
float:right;
}
I want to display a loader inside the container. I am trying to display the overlay div inside the container.
if I use absolute position, the overlay also going top.
Here is Fddle : http://jsfiddle.net/vaykmry4/5/
Code :
<style>
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
width:100%;
height:100%;
margin:auto;
left:0;
top:0;
position:absolute;
background:#fff;
opacity:.8;
text-align:center;
}
.loader {
display:inline-block;
}
</style>
<div class="container">
<div class="overlay">
<span class="loader">
loading...
</span>
</div>
<div class="content">Here is content ... <div>
</div>
Thanks.
First of all I should note that a fixed element is positioned relative to the initial containing block which is established for the html element.
Hence you should use absolute positioning to position the overlay relative to its nearest containing block which is established by the container.
.container {
position: relative;
overflow: auto;
}
.overlay { position: absolute; }
Second, It will work until the content start growing. When the content height gets bigger than the overlay, the overlay will not fill the entire space of the container anymore.
Since you may use JavaScript in order to to display the overlay (including loading, etc.) one solution is to add overflow: hidden; to the container to prevent from scrolling.
Finally, you should set top property of the .overlay element according to the position of the vertical scroll-bar.
Here is the jQuery version of the above approach:
var $container = $(".container");
$(".overlay").fadeIn().css("top", $container.scrollTop() + "px");
$container.css("overflow", "hidden");
EXAMPLE HERE
You are using margin: 25% on container which is causing the gap of 50% top-bottom value for overlay, so use height: 150% instead of 100%
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
width:100%;
height: 150%;
margin:auto;
left:0;
top:0;
bottom: 0;
right: 0;
position:absolute;
background:#000;
opacity:.5;
}
.content {
height:300px;
}
working fiddle
position: absolute will let you place any page element exactly where you want it with the help of top right bottom left attributes. These values will be relative to the next parent element.
position: fixed is a special case of absolute positioning. A fixed position element is positioned relative to the viewport.
In your case you should use position: absolute for your .overlay
Use this:
HTML:
<div class="container overlay">
<div class="content"><div>
</div>
CSS:
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
margin:auto;
left:0;
top:0;
position:relative;
background:#000;
opacity:.5;
}
.content {
height:300px;
}
Here is the working fiddle
hello stackoverflow community,
i have a problem with my fixed header. my html structur looks like that:
<div id="site_wrapper">
<div id="site_header">Header</div>
</div>
The CSS Looks like this:
div#site_wrapper {
max-width:1500px; min-width:900px;
}
div#site_header {
position:fixed; left:50%; top:0px; z-index:10;
height:160px; width:1500px;
margin-left:-750px;
background-color:#fff;
}
My Problem is, that i need the header centered and fixed with the width 1500 ...
Some Ideas?
Since #site_header is inside site_wrapper you need to center #site_wrapper div, i also update the #site_wrapper code to be always centered inside #site_wrapper
div#site_wrapper {
margin-right: auto;
margin-left:auto;
max-width:1500px; min-width:900px;
}
div#site_header {
position: fixed;
top:0px;
z-index:10;
height:160px; width:1500px;
margin-left:auto;
margin-right:auto;
background-color:#fff;
}
If you want to make the header fixed, center align and some special width, try updating you CSS code with below:
div#site_wrapper {
max-width:1500px;
min-width:900px;
margin: 0 auto;
}
div#site_header {
position:fixed;
z-index:10;
height:160px;
width:1500px;
background-color:#ffff00;
}
Refer this fiddle: http://jsfiddle.net/aasthatuteja/B2Tnj/
Hope this helps!
To have a fixed header just use the following code:
div#site_header {
position: fixed;
top: 0px;
left: 0px;
z-index: 10;
height: 160px;
width: 100%;
margin: 0;
text-align: center;
padding: 0;
}
Okay. I'm trying to get a page to display 100% of the height of the viewport, but the catch is the page has multiple divs that aren't always nested. I've been browsing multiple questions and other websites and I cannot find an answer that suits my needs.
I currently have a layout as so:
<html>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Where as the header and footer is 80px each, I am trying to get the content div to fill the rest of the viewport. I've tried setting html, body, & the container div to "height:100%" each and then setting the content div to min-height:100% and height:100% but that just makes the div expand to 100% of the viewport, and then the footer gets pushed down 80px (because the header is 80px), so the full page ends up as 100% + 160px (two 80px divs).
Any ideas? Cheers.
You can do this with simple display:table property.
Check this:
http://jsfiddle.net/HebB6/1/
html,
body,
.container {
height: 100%;
background-color: yellow;
}
.container {
position: relative;
display:table;
width:100%;
}
.content {
background-color: blue;
}
.header {
height: 80px;
background-color: red;
}
.footer {
height: 80px;
background-color: green;
}
.content, .header, .footer{
display:table-row;
}
original post here: http://peterned.home.xs4all.nl/examples/csslayout1.html
http://jsfiddle.net/cLu3W/4/
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
I don't have chrome right now and this doesn't seem to be working in jsfiddle but you should be able to achieve this by making all absolute positioned, having header have top set at 0px, footer bottom at 0px, and content have top: 80px, bottom 80px. You'll also have to make the container, body, and possibly html take up 100% height and have absolute or relative positioning.
*{margin:0; padding:0;}
.header{height:80px; background:salmon; position:relative; z-index:10;}
.content{background:gray; height:100%; margin-top:-80px;}
.content:before{content:''; display:block; height:80px; width:100%;}
.footer{height:80px; width:100%; background:lightblue; position:absolute; bottom:0;}
This is not perfect. For example, what happens when the text overflows .content is really not ideal, but you could solve this problem by using height based media queries to simplify the design for smaller screens.
This can be achived in multiple ways:
Use a table base layout (fully supported, but frowned upon)
Use the new CSS 3 flex box layout (no old IE support)
Using absolute positioning
I would recomend the 3rd option. See an example at http://jsfiddle.net/HebB6/
HTML:
<html>
<body>
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
CSS:
html,
body,
.container {
height: 100%;
background-color: yellow;
}
.container {
position: relative;
}
.content {
background-color: blue;
position: absolute;
top: 80px;
bottom: 80px;
left: 0;
right: 0;
}
.header {
height: 80px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.footer {
height: 80px;
background-color: green;
position: absolute;
top: 0;
left: 0;
right: 0;
}