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
Related
Please take a look at this fiddle https://jsfiddle.net/t2w4yd8j/1/
I have a couple of questions about this:
1) There seems to be a padding between the .top div(red) and the browser if I use the relative position. However if I change the position of .top div(red) to absolute the padding goes off. Why is that?
2) The .next div(pink) should stack after the .main div(grey). But the main div seems to be taking a bit more extra space even though the height is set to auto and there is no children in the extra space. Why is that?
Thanks
CSS
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
position:relative;
top:0px;
left:0px;
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position:relative;
top:-25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
width:200px;
height:50px;
display: inline-block;
background-color:#0F0;
}
.bottom{
position:relative;
top:-50px;
left:0px;
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
HTML
<div class="main">
<div class="top"></div>
<div class="middle">
<div class="midfill"></div>
</div>
<div class="bottom"></div>
</div>
<div class="next"></div>
1) By placing it relative, it relates to it's parent, the body tag. Remove the padding and margin from the body and HTML tag, and it fits. When you place the div absolute, it's taking out of the document flow, making it relate to the viewport. That explains the difference.
html, body { margin: 0; padding: 0; }
2) you position the div's relative, and then move them around. But the place stays reserved in the parent div. I moved the divs a bit around.
html, body {
margin: 0;
padding: 0;
}
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position: absolute;
margin-top: -25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
display: inline-block;
width:200px;
height:50px;
background-color:#0F0;
}
.bottom{
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
Updated Fiddle
Solution for your both problem is following. By Default it takes extra margin by removing it from body solved your issue:
body{
padding:0;
margin:0;
}
Check Fiddle Here.
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 can't seem to centre align my div(title) which sits inside another div.
HTML
<div class="wrapper">
<div id="header">
<div class="title">Home</div>
</div>
</div>
CSS
#header {
position:relative;
width:1200px;
height:400px;
margin:auto;
border:1px solid red;
}
.title {
position:absolute;
width:1000px;
height:140px;
background-color:red;
margin:auto;
}
Remove position: absolute and it works perfectly.
Position: absolute is only necessary when you need very specific placement outside of the normal document flow. In this case, nothing special is needed apart from automatic left and right margins, which you already have.
you are mixing stuff.
Remove position absolute.
or if you want it to be absolute you can do this
.title {
position:absolute;
width:1000px;
height:140px;
left: 50%;
background-color:red;
margin-left:-500px;
}
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.
I've trouble centering my webpage using the css:
CSS code below:
#wrapper {
margin-left:auto;
margin-right:auto;
width: 100px;
}
#welcome {
position:absolute;
top:202px;
width:560px;
height:224px;
z-index:2;
}
#newsSection {
position:absolute;
left:576px;
top:209px;
width:380px;
height:600px;
z-index:2;
}
HTML:
<body>
<div id="wrapper">
<div id="welcome">
//content here
</div>
<div id="newsSection">
//content here
</div>
</div>
</body>
I can center the webpage except for the #newsSection div.
The reason why I put "left:576px" under #newsSection div is because I want it to place it right next to the #welcome div.(side by side) However, when I shrink my browser size, #newsSection div will move to the left a bit and overlap #welcome div.
If I remove "left:57px", then the #newsSection div will appear right on top of #welcome div...
Please help.
Thanks
This is probably because youre using absolute position on the child divs. Therefore, "the kids will run wild", as in, they don't care that the parent div#wrapper is center.
Some potential code:
#wrapper {
margin-left:auto;
margin-right:auto;
width: 100px;
}
#welcome {
float: left;
width:560px;
height:224px;
}
#newsSection {
float: left;
width:380px;
height:600px;
}
you should use relative positioning, ie, tagname.class {position:relative; top/right:? ;}
To center a webpage you can use this:
.container{
width: 100%;
max-width:80%;
margin: 0 auto;
}