I want to position one div over another div.
CSS:
.fresh_bnr_img {
float:left;
width:950px;
text-align:center;
}
.black_strip1 {
position:relative;
top:20px;
width:120px;
height:50px;
background:#000;
opacity:0.5;
z-index:999;
}
HTML:
<div class="fresh_bnr_img">
<div class="black_strip1">Home</div>
<img src="images/banner-2.jpg" width="946" height="295" alt="fresh-banner" />
</div>
The problem is that when I place the black_strip1 class on the inner div, it appears in the right place but a blank space is appearing before the next div.
give the containing div position:relative; and the child div position:absolute;
the child div will now be positioned with respect to the parent div. (starting from the top left of the parent div)
eg.
.fresh_bnr_img{
position:relative;
float:left;
width:950px;
text-align:center;
}
.black_strip1{
position:absolute;
top:20px; /* 20px from the top edge of .fresh_bnr_img*/
left:0px; /* 0px from the left edge of .fresh_bnr_img*/
width:120px;
height:50px;
background:#000;
opacity:0.5;
z-index:999;
}
I hope it will help you
http://www.templatespoint.com/blog/2010/10/how-to-do-div-on-div/
Related
I'm currently playing around with HTML and using position to align my div content.
At the moment, I have 3 divs. 2 divs using position:fixed and the other using position:relative.
My two fixed divs span the width of the page at 100% and are aligned at the top of the webpage. Like a top bar.
My third div is placed underneath the top bar with position:relative. The problem i'm having is that the third div is not being positioned underneath the two fixed divs (see picture)
Here is my code:
.topbar-container {
position:fixed;
width:100%;
height:72px;
background-color:#ffffff;
border-bottom:1px solid #e0e0e0;
z-index:2;
top:0;
}
.topbar {
position:fixed;
width:1200px;
height:72px;
left:50%;
margin-left:-600px;
top:0;
}
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
}
My HTML:
<div class="topbar-container">
<div class="topbar">
</div>
</div>
<div class="body-container">
</div>
As you can tell by the picture, the div with the red border is being pushed up to the top of the page, where i thought by using position:relative would have fixed the problem.
Could someone please take a look for me?
Thanks in advance
http://www.dumpt.com/img/viewer.php?file=d96p2ywgzqs5bmnkac7q.png
Setting position: fixed or position: absolute will remove the element from the page flow. You now need to explicitly set the top property for .body-container to make it appear under the .topbar-container:
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
top: 72px; /* must be >= the height of .topbar-container */
}
I am facing problem while centering a div of fixed width & height and placing two divs side by side inside it. What i want to achieve, at later point of time, is the slide to left effect on the second div (on top of first div) based on some event. Below is what i tried:
HTML:
<div id="center">
<div id="firstel"></div>
<div id="secondel"></div>
</div>
CSS:
#center{
position:absolute;
border:1px solid black;
width:200px;
height:100px;
overflow:hidden;
top:50%;
left:50%;
}
#firstel{
background-color:red;
}
#secondel{
background-color:blue;
}
#firstel,#secondel{
position:relative;
width:200px;
height:100px;
display:inline-block;
float:left;
}
JSFIDDLE: link
Any help is appreciated!
#center{
position:absolute;
border:1px solid black;
width:100%; //change this
overflow:hidden;
top:50%;
left:50%;
}
Demo here
#center and #firstel,#secondel ID's were of same width(200px), If you need to show side by side eitherof the ids values have to be changed
You can try like this: Demo
#firstel,#secondel{
width:50%; /* changed value in % or you can use 100px too as per your need */
height:100px;
display:inline-block;
float:left;
}
if u want the two divs side by side
change the widths of the divs
change the divs width that shoild be less than the parent div width
#firstel,#secondel{
position:relative;
width:100px;
height:100px;
display:inline-block;
float:left;
}
I have two divs, .div1 & .div2, each with a width of 20%. I also have a another div .bar inside of .div1. This .bar div has a positioning of absolute left 100%.
I want .bar (blue div) to remain at same point at different screen sizes.
What would be the procedure to keep the blue bar and gray div in same point with different screen size?
HTML
<div class="div1">
<div class="bar">
This is a Bar
</div>
</div>
<div class="div2">
this is Div 2
</div>
CSS
.div1{
background:red;
}
.div2{
background:#ccc;
margin-top:25px !important;
}
.div1,.div2{
position:relative;
width:20%;
float:left;
margin:0px 10px;
height:180px;
}
.bar{
background:blue;
position:absolute;
left:100%;
top:0px;
width:130px;
z-index:10;
}
Fiddle
here you go
http://jsfiddle.net/97s283he/2/
.div2{
background:#ccc;
left: 100px;
margin-left: 0px;
}
.div1,.div2{
position:relative;
width:20%;
float:left;
height:180px;
}
I have a #slider div with an image. After that, I have a #content div which has text. I have tried position:relative so I think it should come after the previous div, I mean #slider but here it is not coming that way.
What is the problem here? How to overcome it?
HTML
<div id="slider">
<img src="http://oi43.tinypic.com/25k319l.jpg"/>
</div>
<div id="content">
<div id="text">
sample text
</div>
</div>
CSS
#slider {
position:absolute;
left:0;
height:400px;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#content #text {
position:relative;
width:950px;
height:215px;
color:red;
}
JSFIDDLE
You have set #slider as absolute, which means that it "is positioned relative to the nearest positioned ancestor" (confusing, right?). Meanwhile, #content div is placed relative, which means "relative to its normal position". So the position of the 2 divs is not related.
You can read about CSS positioning here
If you set both to relative, the divs will be one after the other, as shown here:
#slider {
position:relative;
left:0;
height:400px;
border-style:solid;
border-width:5px;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#content #text {
position:relative;
width:950px;
height:215px;
color:red;
}
http://jsfiddle.net/uorgj4e1/
what about changing the position: relative on your #content #text div to position: absolute
#content #text {
position:absolute;
width:950px;
height:215px;
color:red;
}
http://jsfiddle.net/CaZY7/12/
then you can use the css properties left and top to position within the #content div
I want to put a div Element constantly on the bottom of his parant div.
This should work with
position:relative;
bottom:0px;
Anyway it doesnt, the only think i can to is to margin top until it fits, but i dont like that. Can you find a reason in my code why the rlative position wont work?
#charset "utf-8";
/* CSS Document */
body {
background-color:#999;
}
#wrapper {
height:40em;
max-height:45em;
min-height:40em;
width:80%;
max-width:60em;
min-width:30em;
margin-left:auto;
margin-right:auto;
background-color:#333;
border:#000 solid;
border-width:thin;
}
#header {
width:100%;
height:70px;
background-color:#009900;
border-bot:#000 solid;
border-width:thin;
}
#content {
position:relative;
bottom:0px;
top:auto;
width:100%;
height:30em;
background-color:#FFFFFF;
border-top:#000 solid;
border-width:thin;
}
Content and Header are both parents of wrapper. So i want to put content on the bottom of wrapper.
Set the position #wrapper to relative, then set #content's position to absolute and bottom to zero.
the parent element should have a position:relative and the one sticking to the bottom
position:absolute;
bottom:0px;
hope this helps.