I have this http://jsbin.com/AKUtEYu/1/edit.
Here, I want to show an image inside the div1 and below this div1, i also want to show a submit button inside the div2. The problem I have here is that the second div appears underneath of the first div.
P.S 1: I need to use position:absolute in the first div. I know if i remove it, the problem seems to be fixed, but i am looking for a way with it.
P.S 2: I used solid borders to see what is going on.
As stated slightly ahead of me, move your submit button inside the #container parent block:
<div id="container">
<img src="http://31.media.tumblr.com/tumblr_m50exyThDb1r4kc3co1_500.jpg" />
<div id="footerSubmit">
<input type="submit" alt="Submit" id="SubmitSelections" name="Submit">
</div>
</div>
Otherwise, you will have to set a height on #container and absolute or relative position on the #footerSubmit, which is a lot more work...
What if you put the second div inside the first? After all, the divs are just containers - the important thing is for the button to be placed under the picture.
If you know height of your absolutde element/div then you can use it's height to position your relative element. for example change your div2 css as
#footerSubmit{
position:relative;
top:350px;
float:right;
border: 10px solid;
color:red;
}
Otherwise put your div2 inside div1 and position it as bottom:0; and float:right;
Related
I'm trying to display a div over a image. When user enters the image the division must display, means on hover effect. But what happens is when I hover the mouse over main division the div displayed under the image.
My code is :
<div class="bgimg">
<img width="100%" height="100%" data-id="1" src="data:image/jpeg;">
<div id="changeBackPicture" style="display: none;">
<a id="ChangeBAKPicture" href="javascript:void(0)">Change BackGround Picture</a>
</div> <-- This division need to display above the image --->
<div class="primg"></div>
<div id="uname">xyz </div>
</div>
css code :
#changeBackPicture
{
float:right;
margin-top:-70px;
margin-right:500px;
width:270px;
height:35px;
margin-left:-3px;
margin-right:-3px;
}
Below picture shows how the division now displaying. I need to display the division over the image...
Please anyone tell me how to do this stuff........ Thanks. ...
z-index is a CSS property that sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order.
In order for the element to use z-index, it must have be positioned absolute, relative, or fixed.
#changeBackPicture { position: relative; z-index: 9999;}
resource: http://www.w3schools.com/cssref/pr_pos_z-index.asp
It really isn't all that complicated, you should have a look at the Z Index CSS Property as that does exactly what you require.
Make sure you set the Z index for both the image you are trying to cover and the div you are covering it with!
have you tried adding a z-index to your overlay div?
give it a z-index of 50 and see if that works.
You can also give it absolute positioning and just place it ontop of the image div.
I have a number of divs with the same class, that I want to align vertically inside their container div.
The html part looks like this example:
<div id="container">
<div class="element">
........
</div>
<div class="element">
........
</div>
<div class="element">
........
</div>
</div>
I have floated the elements (divs with .element class) 'left' so they are all on one row. So far so good no problem yet.
The contents of the .element div vary. Now by default, they are aligned top, and I want to align them to the bottom using this css:
#container {position:relative;}
#container .element {position:absolute;bottom:0;}
Works and does align them to the bottom, but unfortunately it also sticks them together and they all look like they are in one place as one div, the one on top of the other.
Trying to set width, margin, padding etc.. to the .element div does nothing, they just act as one div.
What do I need to do to separate them ? I believe giving each div a separate class is not the right solution.
I also would not like to use table solutions, unless there is absolutely no other way.
I have tried vertical-align:bottom which for some reason does nothing.
I kept searching for long about this but nothing related comes up on the net, so if it's a duplicate I apologize.
Thanks in advance.
Well this is what the position:absolute is all about. I don't see why you use it.
If I understand right you want to vertical align the divs to the bottom and have them appear next to each other / beside each other ? Then most likely you have to modify the display css attribute of your divs to display:inline-block; or even use span tags instead.
You could wrap the #container div with another div, set its position to relative, and set the position of #container to absolute and it's bottom to bottom: 0
See my example
I have a link that I want to always be at the bottom right of the cell it is in. Right now the link is in a < p > element. I tried doing both absolutely and relative positioning but I can get the effect I am looking for.
I have a row with 4 cells, when attempting to apply the absolute position it takes the element to the very last cell on the right... instead of just placing it within the cell it is in. I tried various methods but not sure if I am sure tired or trying to do the impossible.
I am very new to css tables so I could be thinking about this all wrong.
Here is an example:
http://jsfiddle.net/56H5x/1/
The "Learn more" link to the very right should be at the bottom right of the first cell.
Thanks in advance.
While setting position:absolute on child element <p> set position:relative on parent element <div> having <p> element.
So the child element will be relative to its parent element.
EDITED:
Working JS Fiddle
in Chrome, Safari, Opera and IE
But not compatible in Firefox, because Firefox does not obey position:relative on display:table-cell elements.
See the reference:
Edited: Sorry..!! Missed it :). As said by ahsaan, Add position relative to .layout-cell and modify your HTML as below.
.layout-cell {
display: table-cell;
vertical-align: top;
position: relative;
}
.layout-cell div{
position:absolute;
bottom:0;
right:0;
}
<div class="layout-cell columnBody-wrapper curvedBottom">
<p>Column 3</p>
<div><a class="button button" href="#">Learn More</a></div>
</div>
Expanding on Ahsan Rathod's answer to solve this issue in firefox wrap your content inside a div and set your properties on this div rather than the div set as display table-cell
.cell-div {display:table-cell}
.relative-div {position:relative; width:100%}
.absolute-el {position:absolute}
<div class="cell-div">
<div class="relative-div">
<div class="absolute-el">
<img ... >
</div>
</div>
</div>
I am trying to make a shopping cart layout and am having a hard time getting the checkboxes to appear at the right spot. The code here:
http://jsfiddle.net/35Hkj/1/
renders wrong on jsfiddle itself and internet explorer/firefox... It looks right in expression web 4 and chromium. Should be a checkbox beside each color.
If I position one check box with absolute in a relative container it works on all browsers perfectly but loses the flow meaning it doesn't expand the div container dynamically.
Is there a way to position absolute (relative to the parent) without losing the flow??
I'm guessing slicing up the image with css and positioning a checkbox beside each sliced part wouldn't be correct or easy.
Position absolute will allways "lose the flow".
However, you can position the divs absolutely, if they are in the same container as the image. Just change the left value accordingly. The container will be strechted to image's height as the image will remain in the flow.
Wrap the texts beside checkboxes in a label. More semantic + container divs will have enough height to not lose the flow so that you can absolutely position the checkboxes within.
An element with position:absolute is always taken out of the regular flow of relative elements.
What you could do is use a sprite for the background image. Place your checkboxes and your image in float:left and float:right divs or float both of them left and keep a margin between them and modify the background position of the sprite. If you wanted to, you could also use images, though I feel that using a sprite would be faster. For eg.
<div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img1.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="skin" />skin
</div>
</div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img2.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="face" />face
</div>
</div>
</div>
.item{
float:left;
width:auto;
}
.image{
float:left;
width:auto;
}
.checkbox{
float:right;
width:auto;
}
If you wanted to use sprites, you could give each div an id and define a background position, depending on the image-checkbox pairing.
I am destroying my mind trying to get this styling done right. I have a fixed size image with an unpredictable height div of text to the right of it. I want the top of the text to line up with the top of the image but to NOT wrap around it. My markup is:
<img height='231px' width='132px' style='float:left' />
<div>Text</div>
I would like to find a solution that doesn't involve using a table, but at the moment I am drained and can't think about how to do it with css/divs
This should do the trick.
<div style="margin-left: 132px">Text</div>
To have space between the text and the image, make the margin larger or add a padding-left.
DanielB's answer nails it, but I just like giving alternative solutions; never know if it might come in handy. You could put the image and the div into a container with a fixed width, set a fixed width on the image and div that adds up to the container's width, and float the div as well.
<div id="container">
<img height='231px' width='123px' style='float:left' />
<div>Text</div>
</div>
#container div
{
float:left;
width: 123px;
}
#container {
width:246px;
}
http://jsfiddle.net/thomas4g/A7ZHg/3/