I am trying to align the div vertically using position. its works well in all browsers except Internet Explorer. In internet explorer the .nav-group aligned left. How can i solve this.
JS Fiddle
HTML:
<div class="container">
<div class="nav-group">// Content</div>
</div>
CSS:
.container
{
width: 100%;
position: relative;
}
.nav-group
{
display: table;
background-color: red;
margin: auto;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:0;
right:0;
}
change the display:table to display:inline.
.nav-group { display:inline}
Demo
Hope this will help you Link
css:
.container {
width: 100%;
display:table;
}
.nav-group {
display: table-cell;
background-color: red;
margin: auto;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:0;
right:0;
}
The fact that your are using absolute positioning is affecting your layout. You have options to either change the absolute positioning and use margin:0 auto. or change the display you are giving the element.
Fiddle
change display:table; to display:block;
OR
removing display:table; work also
SEE DEMO
.nav-group
{
display: block;
background-color: red;
margin: auto;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:0;
right:0;
}
You are using Position:absolute and margin:auto for the same div where it might not work. so I modified like this: Updated Demo
.container {
width: 100%;
text-align:center;
}
.nav-group {
display:table;
background-color: red;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:50%;
margin-left:-100px;
right:0;
}
You can use display:table; here it don't affect anything..
I tested in IE 10, latest version of firefox and chrome.. Its working fine..
Related
All answers are not helping me.
Please see here: https://jsfiddle.net/prg5hc9m/1/
#main {
width: 300px;
height: 400px;
position: relative;
}
#main1 {
position: absolute;
float:left;
}
#main2 {
position: absolute;
overflow-y: scroll;
height: inherit;
float:left;
width: 50%;
}
I want main2 to be under main1.
Not very clear on what you need but you cant use absolute with float. If you remove the absolutes on both the scroll section appears under the other.
updated fiddle: https://jsfiddle.net/prg5hc9m/3/
#main {
top: 20px;
left: 20px;
width: 300px;
height: 400px;
position: relative;
display:block;
}
#main1 {
float:left;
}
#main2 {
clear:left;
overflow-y: scroll;
height: 300px;
float:left;
//top: 10%;
width: 50%;
}
By 'under', I'm assuming you mean 'behind'. In order to do that, you need to add a z-index. Z-indexes start at zero, so simply give your #main1 div a z-index of 1 to have it appear 'on top':
#main1 {
z-index: 1;
}
I've created an updated fiddle here.
Hope this helps! :)
Use inline-block.
#main {
top: 20px;
left: 20px;
width: 300px;
height: 400px;
position: relative;
display:block;
}
#main1 {
display: inline-block;
float:left;
height: 50px;
}
#main2 {
clear:left;
display: inline-block;
overflow-y: scroll;
height: 300px;
float:left;
//top: 10%;
width: 50%;
}
I'm really stuck on this and would appreciate any direction.
I need to code the following design using CMS and html but I have no idea how to get the center image to overlap the divs on the right and left of the image. I have been reading about relative position and z-indexes but everything that I have tried has failed. Generally when I line up three dives across I will use the float property and it works perfectly but it turns out z-indexes can only be used with positioned elements. If someone could get me started in the right direction I will probably be able to figure it out.
See the design I am trying to code here: https://cdn.shopify.com/s/files/1/0211/8026/files/Example.png?9982
This is the base framework but I don't know where to go from here...
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
height: 216px;
width: 288px;
float: left ; /* <-- This does not work */
border: 1px solid blue;
}
.image {
height: 250px;
width: 350px;
float: left ; /* <-- This does not work */
border: 1px solid grey;
}
.box2 {
height: 216px;
width: 288px;
float: left; /* <-- This does not work */
border: 1px solid red;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">-- Should I use a div for the image?</div>
<div class="box2"></div>
</div>
Try this it would have worked a bit more better if position:absolute is used but since you wanted float there will be re sizing problems Fiddle
Zoom out to get the effect
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
position: relative;
z-index: -1;
background: green;
height: 216px;
width: 288px;
float: left;
}
.image {
margin-left: -80px;
background: red;
float: left;
height: 250px;
width: 200px;
}
.image img {
width: 300px;
}
.box2 {
position: relative;
z-index: -1;
float: left;
background: blue;
height: 216px;
width: 288px;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">
<img src="http://placekitten.com/300/301" />
</div>
<div class="box2"></div>
</div>
You can do it without floats using position: (colors added for emphasis)
fiddle
.row-container {
width:900px;
height:300px;
margin:auto;
text-align: center;
border:2px solid black;
background-color:blue;
position:relative;
}
.box1 {
height:216px;
width: 288px;
left:0px;
position:absolute;
z-index:10;
}
.image {
height:250px;
width: 350px;
position:absolute;
top:20px;
left:275px;
z-index:100;
background-color:red;
}
.box2 {
height:216px;
width: 288px;
right:0px;
position:absolute;
z-index:10;
}
div{
background-color:green;
}
You can use z-index on position: relative, so add that to your inner elements and set the z-index.
To create the overlap you can use a negative margin-left on the second and third elements.
I am trying to vertically align a div inside another div. The problem occurs because both have percentage heights. Here is my jsfiddle: http://jsfiddle.net/QeF23/1/
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#outerdiv {
height: 50%;
width: 100%;
background-color: #000000;
}
#innerdiv {
height: 90%;
background-color: red;
float: right;
}
This would be very easy to solve if I didn't want percentage heights.
I have tried using the display: table-cell method, but haven't gotten that to work. May be that I was implementing it wrong though.
Any help, much appreciated.
Your JS fiddle looks correct - if you are trying to align it in the middle maybe try adding
#outerdiv {
height: 50%;
width: 100%;
background-color: #000000;
position:absolute;
top:25%;
}
EDIT - if you want the red div centered in the black - use the same principle:
http://jsfiddle.net/QeF23/30/
#outerdiv {
height: 50%;
width: 100%;
background-color: #000000;
position:absolute;
top:25%;
}
#innerdiv {;
position:absolute;
width: 100%;
top:5%;
height: 90%;
background-color: red;
}
Have a read at this article http://css-tricks.com/centering-in-the-unknown/.
At the end of the article, he's explaining about a trick using ghost element. I tried that before and it's working perfectly for me.
This problem bothering me very long, and I try to figure the solution, but I just can get it.
I have background image on div tag, and on that image I have part with text, which I want to select to be a link.
So I try it this way #signUp is a a element which is positioned in div #main_text:
#signUp {
display:block;
width:137px;
height:100px;
position:absolute;
left:31px;
top:289px;
}
#main_text {
width: 840px;
height: 335px;
background-color: white;
margin: auto;
position: relative;
}
The problem is that this code works fine in all browsers excepting the IE, on IE signUP is not clickable, any solutions, thanks.
This is html part :
<div id="main_text">
<?php if (function_exists("easing_slider")){ easing_slider(); }; ?>
</div>
see the mentioned below code its working on IE also IE8+
HTML
<div id="main_text">
Sign Up
</div>
CSS
#signUp {
display:inline-block;
width:137px;
height:100px;
position:absolute;
left:31px;
top:289px;
background:red;
color:black;
text-align:center;
}
#main_text {
width: 840px;
height: 335px;
background-color: green;
margin: auto;
position: relative;
}
DEMO
This should work in IE6, IE7 and newer. http://jsfiddle.net/uPeWh/
I think the problem was the z-index of the containers.
#signUp {
z-index: 20;
display: block;
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 50px;
background-color: red;
font: 1em Arial;
color: white;
}
#main_text {
z-index: 10;
width: 300px;
height: 200px;
margin: 0;
padding: 0;
position: relative;
background-color: grey;
}
<div id="main_text">
Click me
</div>
I have an element, which I have tried to place on top of another with this:
<div id="foo1"></div>
<div id="foo2"></div>
And this CSS:
#foo1 {
width: 600px;
height: 300px;
margin: 0;
}
#foo2 {
width: 600px;
height: 300px;
margin-top: -300px;
}
But now #foo2 is going underneath #foo1. How would I fix this?
Making them absolute instead of relative would do the job.
#foo1 {
width: 600px;
height: 300px;
margin: 0;
position:absolute;
z-index:100;
}
#foo2 {
width: 600px;
height: 300px;
margin-top: -300px;
position:absolute;
z-index:1000;
}
Just add position: relative; to each of the styles, as stated here: http://www.w3schools.com/cssref/pr_pos_z-index.asp
(They can both have relative positioning)
You can do it with positioning
#foo1 {
width: 600px;
height: 300px;
background-color:red;position:relative
}
#foo2 {
width: 600px;
height: 300px;
background-color:green; position:absolute; top:0; left:0
}
Demo here http://jsfiddle.net/fckrA/1/
You could place one div inside the other, and apply position: relative to parent and position: absolute to child. Child would appear above parent and aligned to top-left corner.