I am trying to add two images (ul,li) at the end of a DIV. I use position ABSOLUTE, RELATIVE and left:0, bottom:0, and it does it, but it doesnt remain on the div.
The images appear in the "MainDiv", and not in "container".
The css:
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
width:100%;
height:600px;
}
#container{
width:980px;
height:600px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
}
The Html:
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1">Example1</li>
<li id="image2">Example2</li>
</ul>
</div>
</div>
The absolutely positioned element is positioned with respect to the corresponding edges of it's parent... from the look of it your container doesn't have any height set...
When you add a height to container it does move your <ul> to the bottom of the div. In fact, it is always at the bottom of the div, but because the height of the div is 0 it doesn't look like it is at the bottom of it.
http://jsfiddle.net/s5aE3/
#container{
width:980px;
margin:0 auto;
position:relative;
height: 800px;
}
The list is correctly positioned at the bottom of the container div, but there is nothing that gives the container div any height. As the height of the container div becomes zero, the list is placed with the bottom where the container div is.
To put the list inside the container div, you need to give the container div a height. Either by specifying a height style, or putting something inside it that isn't absolutely positioned or floating.
Edit:
With your updated code that has a height for the container div, the list is placed at the bottom.
Try setting the vertical align to bottom.
<style>
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
}
#container{
width:980px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
vertical-align:bottom;
}
</style>
<body>
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1>Example1</li>
<li id="image2>Example2</li>
</ul>
</div>
</div>
Related
I've created the following to illustrate my question.
#container{
background-color:white;
position:relative;
}
#absolute{
position:absolute;
height:100%;
width:100%;
background-color:black;
}
#relative{
position:relative;
background-color:blue;
width:200px;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content"></div>
</div>
</div>
So I understand the following:
1) The content div is sized to 50px, so the containing divs (relative) also has a 50px height. All the way up to the container which is why the bar is a uniform 50px all across the screen.
2) If I remove the relative tag from the container, then the absolute div contents fill the screen, although the relative div is positioned in front still. This is because the absolute positioned element is now tied to the HTML element rather than the container and so is not restricted by the height of the container.
What I don't understand is:
1) If I remove the relative tag from the relative element, it disappears behind the absolute element. Even if I set a higher z-index on the relative element it does not show through.
#container{
position:relative;
}
#absolute{
position:absolute;
height:90%;
width:100%;
background-color:black;
z-index:1;
}
#relative{
//position:relative;
background-color:blue;
width:200px;
z-index:2;
color:white;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content">Test</div>
</div>
</div>
2) The absolute element is 50px high with no content due to the 100%, but if I give it content, it remains at 50px even when the content would overflow.
#container{
background-color:white;
position:relative;
}
#absolute{
position:absolute;
height:100%;
width:100%;
background-color:black;
color:white;
z-index:2;
}
#relative{
position:relative;
background-color:blue;
width:200px;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute">
Test<br/>Test<br/>Test<br/>Test
</div>
<div id="relative">
<div id="content"></div>
</div>
</div>
Can anyone please explain what the rule is that allows these elements to behave in this way. Many thanks.
To answer the first question :
If I remove the relative tag from the relative element, it disappears behind the absolute element. Even if I set a higher z-index on the relative element it does not show through.
It's because default position is position:static and that means ingnoring all positioning instructions including z-index,
in this case if you set #absolute with z-index negative value it will go on a lower layer:
#container{
position:relative;
}
#absolute{
position:absolute;
height:90%;
width:100%;
background-color:black;
z-index:-11;
}
#relative{
//position:relative;
background-color:blue;
width:200px;
z-index:2;
color:white;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content">Test</div>
</div>
</div>
as to question 2:
with height:100% it expands to height of parent;
I have a absolute positioned div inside a container div. The background color of the absolute positioned div does not fill the container div. The height of the container div is dynamic according to the content. How to make the background color of the positioned div to fill it's container div?
Html:
<div class="container">
test<br />
test<br />
test<br />
<div class="showbg">
test
</div>
</div>
css:
.container{ background-color:#CCCCCC; width:300px;}
.showbg{ background-color:#FFFFFF; position:absolute; width:300px; margin-top:-65px; opacity:0.4;
filter:alpha(opacity=40);}
.container {position: relative;}
.showbg {position:absolute; top:0;bottom:0;left:0;right:0;}
Write:
.container{position:relative;}
.showbg{height:100%;}
DEMO here.
Edit style for absolute div for following
.showbg
{
top:0;
bottom:0
}
for the absolute div with other style.
Check it on http://jsfiddle.net/pvr2Y/
.container {
background-color:#CCCCCC;
width:300px;
position:relative;
}
.showbg {
background-color:#FFFFFF;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0.4;
filter:alpha(opacity=40);
}
I am new to CSS and HTML, I have one problem with regard to height of floated elements:
when I set the height of the "content" div to anything more than or equal to the "main" div height, then the margin top of footer is showing correctly, but as soon as I change the height of content div to auto, margin top of footer is not working. I would really like to know is there any solution which makes the content height auto but respects the margin top of footer. Please help me. I've tried everything: clearfixes of every kind, overflow etc.
<div id="container">
<div id="header"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
<div id="footer"></div>
</div>
#container { width:800px; height:auto; background:#000; }
#header { width:800px; height:80px; background:#333; }
#content { width:800px; height:500px; background:#999; }
#main { width:600px; height:500px; background:skyblue; float:right; }
#sidebar { width:200px; height:500px; background:silver; float:left; }
#footer { width:800px; height:80px; background:green; clear:both; margin-top:10px; }
Use the overflow:hidden Property .
“overflow: hidden” is often used for the purpose of float containment.
It can do more special things, however: prevent an element's margins
from collapsing with its children and prevent an element from
extending “behind” an adjacent floated element.
Source: The magic of “overflow: hidden”
#content{
width:800px;
height:auto;
background:#999;
overflow:hidden;
}
see jsFiddle
Quick fix...here's a Fiddle
#container{width:800px;height:auto;background:#000;}
#header{position:relative;width:800px;height:80px;background:#333;}
#content{position:relative;width:800px;height:500px;background:#999;}
#main{position:relative;width:600px;height:800px;background:skyblue;float:right;margin-bottom: 10px;}
#sidebar{position:relative;width:200px;height:800px;background:silver;float:left;margin-bottom: 10px;}
#footer{position:relative;width:800px;height:80px;background:green;clear:both;}
The problem with your set-up is that when you set the height of #container to auto, its height is actually computed to zero. This is because #container contains purely floated elements, and they are ignored when computing the height of #container.
To fix this, add a clearfix inside #content but after any other content. For example:
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both }
You can see it working here: http://jsfiddle.net/Mzxjs/
I have a problem with my footer. Darn footer always.
Anyway, it won't show up in the center of the page. I tried using text-align:center & margin:auto but it won't come off the left side.
I'm going to post the code here; maybe you can find the problem?
HTML
<div id="footer">
<div class="footertxtl">
</div>
<div class="footertxtr">
</div>
<div class="designer">
</div>
</div>
CSS
#footer {
background-image:url(images/footer/footer.png);
background-repeat:no-repeat;
text-align:center;
height:223px;
clear:both;
position:relative;
width:100%;}
.footertxtl {
font-size:10px;
text-align:left;
float:left;
padding-left:60px;
padding-top:165px;
height:auto;
width:auto;}
.designer {
font-size:10px;
text-align:center;
padding-top:205px;
height:auto;
width:auto;}
.footertxtr {
text-align:right;
float:right;
font-size:10px;
padding-right:24%;
padding-top:155px;
height:auto;
width:auto;}
Your footer is set to 100% width which means it will always fill the whole width of the body, unless it is contained within another div.
As a result, the footer is 100% width, with one div floating to the left, another to the right, and the other relative.
Give the #footer a fixed width, then give it margin: 0 auto; this will position this div in the center
Can you post a jsfiddle example? If you have a container within your #footer which is not 100% wide, you can use margin:0 auto; to centre it.
If you do not set constant width, then it is set by default to 100%. Your "width: auto" does not behave as you expected. If you do cannot set constant width and you do not mind about IE7, you could do like this:
#footer{
float: left;
display: inline-block;
}
Remember about adding overflow: hidden; to parent div
If you have a wrapper for the rest of the page that set's either a fixed width or a percentage (75%) then stick the footer inside the wrapper
<body style="text-align: center;">
<div id="wrapper" style="text-align: left; width: 80%; margin: 0 auto;">
<div id="Header">............</div>
<div id="MainContent">.......</div>
<div id="Footer">input content here</div>
</div>
</body>
the wrapper will automatically center all of the content
#footer {
background: transparent url(images/footer/footer.png) no-repeat left top;
text-align:center;
height:223px;
clear:both;
}
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}