When I use a div block with float:left and another with relative position, the second block behaves unexpectedly - the text goes beyond the box and its background color. What is happening here?
https://jsbin.com/merehowoxa/1/edit?html,output
#first-section{
color:black;
background-color:pink;
width:100px;
float:left;
}
#second-section{
color:purple;
background-color:yellow;
width:100px;
height:100px;
position:relative;
left:500px;
top:200px;
}
Whenever you use Float: left, It needs to be cleared.
Add this between both your div's
<div id="first-section">
<p>Text1</p>
<p>Text2</p>
</div>
<div style="clear:both">
<div id="second-section">
Related
Im trying to overlap an element with a absolute position .tools outside of its uppermost parent element #canvas_area which has an overflow:scroll, however this doesn't seem to work, but it does work if you remove the overflow:scroll attribute.
HTML:
<div id="canvas_area">
<div class="container">
<div class="blocks">
<div class="tools">
x
</div>
</div>
<div class="blocks">
<div class="tools">
x
</div>
</div>
</div>
</div>
CSS:
#canvas_area{
overflow:scroll; // remove this and it works
height:400px;
width:400px;
background-color:black;
margin: 0 auto
}
.container{
position:relative;
}
.blocks{
overflow:hidden;
width:200px;
height:100px;
background-color:white;
margin-bottom:10px;
}
.tools{
position:absolute;
color:green;
left:-40px;
}
I need #canvas_area to have a scroll, is their a way around this?
here is the jsfiddle: https://jsfiddle.net/2exn6oq5/
remove overflow:scroll from #canvas_area and you will see the green x outside the body, which is what I want it to do.
I had three divs inside a main div with id main_div and has css already as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
</div>
I just want to insert three divs in the main div as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
So i want the div format to display the text like
breadcrumb_text dropdownlist Pagination
I tried with different css by using position attribute and various css options but could n't able to align them in a horizontal line with one div as left , one div as center and other div to right.
So can anyone let me know me know the css to place them in an horizontal line ?
This maybe help you Fiddle
#main_div > div {
width: 33%;
float: left;
}
I have modified your code little bit with spacing equally for each div and removed Position in the Main div.
Sometimes position will overlap with other div (position) based on z-index value. so if you really need use position unless not required.
#main_div{
height:10px; line-height:50px; margin-top:1px;
box-sizing:border-box;
}
#main_div > div{
width:31.1%;
float:left;
box-sizing:border-box;
border:1px solid grey;
margin-right: 10px;
display:inline-block;
}
#main_div > div:first-child{
margin-left:10px;}
<div id="main_div">
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
I think this is what you are asking for
JSFiddle
CSS
body
{
margin:0%;
}
.main_div
{
display:block;
margin:0% 5%;
width:90%;/*Just random, modify as per your requirement*/
height:300px; /*Just random, modify as per your requirement*/
background:#eee;
position:relatve;
}
.left-div, .center-div, .right-div
{
display:inline-block;
height:100%;
position:relative;
float:left;
width:33%;
border:1px solid #000;
text-align:center;
padding-top:5px;
}
HTML
<div class="main_div">
<div class="left-div">
Div One should be Left(breadcrumb_text)
</div>
<div class="center-div">
Div Two should be Center(dropdownlist)
</div>
<div class="right-div">
Div Three should be Right(Pagination)
</div>
</div>
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;
How to display a div as overlay which is hovered by a div which is inside another div.
This is the sample code which I tried to display the div as overlay box
CSS
/*This is container Div */
#one{
position:absolute;
background-color:#999;
width:200px;
height:200px;
z-index:1;
}
/*This is Hovering Div which is inside container Div:*/
#oneone
{
position:absolute;
background-color:#fff;
width:50px;
height:50px;
left:100px;
top:90px;
z-index:5;
}
/*This is the Overlay Div*/
#two{
position:absolute;
background-color:#000;
width:200px;
height:200px;
left:200px;
top:290px;
z-index:20;
display:none;
}
/*This is the Div displays after Hovering*/
#oneone:hover #two{
display:block;
}
HTML
<div id="one">
<div id="oneone"></div>
</div>
<div id="two">
</div>
Pls help.. thanks in advance.
The Jfiddle : http://jsfiddle.net/stylerkishore/DySxJ/
i created a jsfiddle for you
i modified a bit the html, so that #oneone and #two to be at least siblings in the same container
<div id="one">
<div id="oneone"></div>
<div id="two"></div>
</div>
also i changed the css selector
#oneone:hover + #two {
display:block;
}
Try following code -
<div id="one">
<div id="oneone" onmouseover="javascript:var mydiv = document.createElement('two'); "><div id="two"></div>
</div>
You will need to edit #two in css to show it's proper position
JSFIDDLE
I simply want a div that is absolutely positioned to sit at its current offset top positioning, but im realizing that if any element above it in the DOM is floated (even if that element is inside an element that isnt floated) it will snap to the top of the relative parent. as soon as I remove the above floats the absolutley positioned div snaps to the top. any help is greatly appreciated. here is a fiddle http://jsfiddle.net/hPA3M/2/
Here is my Html:
<div class="parent">
<div class="child1">
<div class="baby1">
<p>Baby</p>
</div>
<div class="baby1">
<p>Baby</p>
</div>
<div class="baby1">
<p>Baby</p>
</div>
</div>
<div class="child2">
</div>
</div>
Here is my css:
.parent {
position:relative;
height:800px;
width:400px;
background:#ff0000;
padding:20px;
}
.child1 {
width:100%;
background-color:#00ff00;
margin-bottom:10px;
}
.baby1 {
background:#e1e1e1;
/*
toggling float on and off has very different effects
*/
float:left;
width:30%;
}
.child2 {
position:absolute;
width:100%;
height:100px;
background-color:#0000ff;
}
Add overflow: hidden for .child1 selector:
.child1 {
width:100%;
background-color:#00ff00;
margin-bottom:10px;
}
Demo
DEMO
When dealing with floating elements is useful to have a clear:both below them.
In this case i addedd <div class="clear"></div> below child1.
CSS for .clear is
.clear {
clear:both;
}