Pink and green layout are parent layout. When gray layout is clicked blue layout will be created. I want blue layout overlay the parent layout (pink and green) and comes to top.
But the blue layout is overlay by pink layout. I need help on it.
div{
display:block;
}
#content{
height:400px;
width:100%;
background-color:green;
}
.center{
width:100px;
height:100px;
background-color:#808080;
text-align: center;
margin:auto;
}
#foo{
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
}
<div id="content">
<div id="d" class="center">
<div class="center">
Click here to create new blue element
</div>
</div>
<div style="background-color:pink;width:100%;height:20px;"></div>
</div>
Check JSFiddle
Add some positioning and a z-index...
#foo{
position: relative;
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
z-index: 1;
}
DEMO
You need to adjust the z-index. z-index needs to be positioned to work correctly. See jsfiddle.
#foo{
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
position:relative;
z-index:100;
}
Can I suggest absolute positioning?
#foo{
position:absolute; // <-- here is the change
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
}
This, of course, is if I understand your question correctly...
What you need to do is to use a z-index. According to http://www.w3schools.com/cssref/pr_pos_z-index.asp specifies the stack order of an element. Please note you will have to make the div's relative Please see code
http://jsfiddle.net/wbfTq/16/
div{
display:block;
}
#content{
position: relative;
height:400px;
width:100%;
background-color:green;
}
.center{
width:100px;
height:100px;
background-color:#808080;
text-align: center;
margin:auto;
}
#foo{
position: relative;
background-color:#2060ff;
z-index:1px;
border: 1px solid #000;
width:50px;
height:50px;
}
Do let me know if this answers your question!
Related
Im trying to center a box 200 by 200. I have tried using left:50% top:50% etc., but this is somehow not really working.
I created a fiddle to recreate my problem: https://jsfiddle.net/8k9o9Lvv/2/
I also tried to center the text from the top as well, with text-align:center and this is also not working.
Any ideas why this is not working?
HTML
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
CSS
#container{
width:100%;
}
.slider-text {
text-align:center;
position:relative;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
right:50%;
}
Just margin:0px auto; is enough
#container {
width: 100%;
}
.slider-text {
text-align: center;
margin:0px auto;
height: 200px;
width: 200px;
border-left: 1px solid red;
border-right: 1px solid red;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
<div id="container">
<div class="slider-text">
<h2>Test
</h2>
</div>
</div>
Give the below code a try, centering the #container div horizontally, and the .slider-text div horizontally and vertically within #container.
#container{
width:100%;
}
.slider-text {
text-align:center;
position:relative;
height:200px;
width: 200px;
border:1px solid red; /* Creates a border around entire element */
margin: auto; /* Centers horizontally */
}
/* This is to center the text vertically within its parent, */
/* remove it if you don't want to do that */
.slider-text h2 {
text-align:center;
position: absolute; /* position: relative; works too */
width: 100%;
top: 30%;
left: 0%;
}
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
Let me know if it helps.
* {
margin: 0;
padding: 0;
}
#container{
position:relative;
width:100%;
height: 100vh;
}
.slider-text {
position: absolute;
text-align:center;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
right:50%;
display: flex;
align-items: center;
justify-content: center;
}
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
You need to set the height of the container. In this case I used 100vh which is equal to 1 viewport height. transform: translateX(-50%) translateY(-50%); with top: 50%; left: 50% will make your .slider-text on center.
To center your text. You can use flexbox. Using display: flex will enable you to use align-items and justify-content. With value of center, it will allow your text to flow on center of its parent.
Your HTML
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
Modified CSS
#container{
width:100%;
}
.slider-text {
position:relative;
height:200px;
width: 200px;
border:1px solid red;
margin: 0 auto;
}
.slider-text h2 {
width: 100%;
text-align: center;
}
#container{
width:100%;
position: relative;
}
.slider-text {
text-align:center;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
position: relative;
}
/*since slider-text has a fixed height and width, a simple math would do*/
.slider-text h2 {
margin-top: 90px;
}
<div id ="container">
<div class="slider-text"><h2>Test
</h2></div>
</div>
Just a simple calculation would do
You should set height:100% to all elements down to your container. That means:
html, body, #container
{
height:100%;
}
Then to center horizontaly and verically a known-size div inside your #container, you just need to set for that div:
left:50%;
top:50%;
and
margin-left:(MINUS whatever is the half of your div width)
margin-top:(MINUS whatever is the half of your div height)
UPDATED FIDDLE (sorry forgot to "update" it)
edit: i assumed you want to center it to the whole screen.
Assuming you want to center it both X and Y, you're right so far, however there are a few changes. Use this for your .slider-text class:
.slider-text {
text-align:center;
position:absolute; /* Relative was wrong */
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
Relative positioning was incorrect in this instance. absolute is correct. Relative would make it move X amount of pixels from its natural position, whereas absolute will position it in a specific place, relative to the closest parent with position: relative on it.
The transform basically does the same as negative margins, but you don't need to change the margin if the size of the box changes :)
Let me know if you have any questions.
Here is the css code:
.slider-text {
text-align:center;
position:absolute;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
margin-left:-(div width)/2;
margin-top:-(div height)/2;
I have two divs inside a div. One of the two is floated to the left and it has some links in it. It has a width of 200px The second of the two has a value of overflow:hidden and it has a width of rest to the right. It has some content in it which makes its height longer than first div.
I want first div to expand to parent's or the second div's height according to the increment of the second div's height
<div id ="main">
<div id ="first">
Link
Link
Link
Link
</div>
<div id ="second">
Link
Link
Link
Link
Link
Link
Link
Link
</div>
</div>
.
#main{
overflow:hidden;
border:1px solid black;
}
#first{
border:1px solid black;
width:200px;
float:left;
}
a{
display:block;
padding:10px;
}
#second{
border:1px solid black;
overflow:hidden;
}
JSFiddle
The solution for your problem is: first you have to give a height to the parent div and then set the height of the child, #first to min-height: 100%, the code would be like this:
#main {
overflow:hidden;
border:1px solid black;
height: 400px;
}
#first {
border:1px solid black;
width:200px;
float:left;
min-height: 100%;
}
You can use display: table; applied to the #main container and display:table-row; and display:table-cell; applied to #first and #second to make the first child container take the height of its sibling container #second. Remember to add overflow:auto; to allow the first container to make it expand its height until the bottom.
CSS
#main{
overflow:hidden;
border:1px solid black;
display:table;
width:100%;
}
#first{
border:1px solid black;
width:200px;
float:left;
display:table-row;
overflow:auto;
height:100%;
}
a{
display:block;
padding:10px;
}
#second{
border:1px solid black;
overflow:hidden;
height:400px;
display:table-cell;
width:100%;
}
DEMO http://jsfiddle.net/a_incarnati/djobkh7t/7/
I've removed the floats and changed the display types on your divs to fix the problem. See example CSS + fiddle:
#main{
border: 1px solid black;
display: table;
width: 500px;
}
#first{
border: 1px solid black;
width: 25%;
display: table-cell;
}
#second{
border: 1px solid black;
width: 75%;
display: table-cell;
}
http://jsfiddle.net/djobkh7t/13/
You can set the display type of 'table' on the parent div, then 'table-cell' on the child div's.
Not sure how to describe it, so here's a pic:
This is what I've tried so far, but the span is not visible.
.border{
border-bottom: 1px solid #666;
width:400px;
position:relative;
}
.border span{
border-bottom:4px solid red;
display:inline-block;
width:50px;
position:absolute;
left:48%;
bottom:-4px;
}
Ok, try this:
HTML:
<div class="border"></div>
CSS:
.border{
width:400px;
height: 1px; /* instead of border */
background: #666;
position:relative;
}
/* pseudo-element instead of span for cleaner HTML */
.border:before {
content: '';
border-bottom:4px solid red;
display:inline-block;
width:50px;
position:absolute;
left:48%;
top:-2px; /* instead of bottom, go top by half the height */
}
Replace bottom by margin :
.border span{
border-bottom:4px solid red;
display:inline-block;
width:50px;
position:absolute;
left:48%;
margin-bottom:-2px;
}
try this
css
div.container{border-top:solid 1px red;padding:0px;}
div.inside{height:100%;width:100%;border-top:2px solid red;margin:0px;}
html
content
i havent tested but it should work
I'm really sorry to post this. I've read dozens of posts on this same issue, but I just can't solve this. How do I place the blue and green boxes side-by-side? I've got plenty of space in my wrapping div, and I think that I am dealing with float correctly, but still incorrect results. What gives?
<div class="titleframe" >
<div class="image" >
<img id="thief" src="thief.png">
</div>
<div class="titletext">
<h1>My Title</h1>
<p>Line1<br>Line2<br>Line3</p>
</div>
</div>
.titleframe {
margin:0 auto;
width:750px;
clear:left;
height:300px;
border: 1px solid red;
}
.image {
width:100px;
height:250px;
border: 1px solid blue;
}
.titletext{
position:relative;
float:left;
padding-left:25px;
padding-top:0px;
height:150px;
width:250px;
border: 1px solid green;
}
Add float:left; to your .image class. Here is a fiddle: http://jsfiddle.net/36KP5/
.image {
width:100px;
height:250px;
border: 1px solid blue;
float:left;
}
Fiddle
You can either float the first one left, and add margin-left to the second one:
.titleframe {
margin:0 auto;
width:750px;
clear:left;
height:300px;
border: 1px solid red;
}
.image {
width:100px;
height:250px;
border: 1px solid blue;
float:left;
}
.titletext{
position:relative;
margin-left: 101px;
padding-left:25px;
padding-top:0px;
height:150px;
width:250px;
border: 1px solid green;
}
Or you can float them both left.
We can centering content of div block like this:
<div class="parent">
<form> <input type="text"/> </form>
</div>
css-style:
.parent{
display:table-cell;
text-align:center;
vertical-align:middle;
width:500px;
height:500px;
border: 1px solid #dd0;
background: #ffa;
}
It's ok to centering form here. JSFIDDLE. But if we add some margin to div.parent we lost vertical centering form. JSFIDDLE. Please explain me why it's occuring?
If you want to add a margin to your cell, try this code:
.parent{
display:table-cell;
text-align:center;
vertical-align:middle;
width:500px;
height:500px;
border: 1px solid #dd0;
background: #ffa;
}
input[type=text] {
margin: 20px;
position: absolute;
}
http://jsfiddle.net/markom/ZLLVu/3/
Remove position: absolute; and it works fine!
JSFiddle
Remove: position: absolute;
This is because position:absolute; forces display:block; and that is not what you want. you want it to remain display: table-cell;
If you want to center your container horizontally and vertically take a look here: http://jsfiddle.net/g4xfx/3/show/
.parent is also centered if you resize the browser window. The content, in your case the
form, is also horizontally and vertically centered within the parent container.
.parent {
position: absolute;
margin-top:-250px;
margin-left:-250px;
top:50%;
left:50%;
width:500px;
height:500px;
border: 1px solid #dd0;
background: #ffa;
display:table;
}
.parent form {
width:100%;
height:100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}