I have a div element inside a main div, which i wanted to put an image tag into it. The problem is, when i positioned the image to absolute, the image didn't show up and the container div didn't take any space on the main div. But when i remove the position:absolute the image is showing just fine. Any help how to show it without removing the position:absolute?
The code is something like this:
<div id="main">
<div id="image_wrapper">
<img style="width:100%; position:absolute; top:0px; left:0px;" src="image.png" />
</div>
</div>
html
<div id="main">
<div id="image_wrapper">
<img src="image.png" />
</div>
</div>
css
#image_wrapper {
position:relative;
}
#image_wrapper img {
width:100%;
position:absolute;
top:0px; left:0px;
}
try this maybe it help....
When you set an element to be absolute-positioned, it is removed from the flow of the document. In this case, it means the container <div> now has "nothing" inside it and therefore collapses to zero height.
Also note that you should almost always give the containing element position:relative to provide an origin for the absolute element.
The main problem, though, is the lack of height on the container. Fix that and your image should show up.
If it doesn't, then try also specifying the image's height.
Related
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
I have a page something like this
<div id="top">
</div>
<div id="bottom">
</div>
I want an output which displays bottom first then top..
How can i achieve this using CSS ??
If your question means, the following.. "You would want to place div#bottom on top of the other drawn DOM elements below". DOM ordering.
If you want #top and #bottom to be independent DOM elements.
div#top {
width:200px;
height:100px;
background-color:red;
}
div#bottom {
position:absolute;
width:100px;
height:50px;
background-color:blue;
top:10%;
left:4%;
}
The top and left values are values of your choice, the above example places the bottom inside the top.
positioning - Can be used to manipulate the same. You could use fixed element inside a huge encompassing div. But use fixed only if you are sure that the DOM contents is to be shown even on a overflow. 'relative' positioning might as well work when you are working reference is the body or the Root Node class or element.
If you want to control how DOM displays these elements. Then you might have to use javascript with CSS to achieve this. Like say
document.getElementById('bottom').style.display = 'block';
document.getElementById('top').style.display = 'none';
After a timeout
setTimeout(function() {
document.getElementById('top').style.display = 'block';
}, 200);
Since independent div's are not the best way to do this, would rather suggest you to try Something like this
<div id="top_div">
<div id="bottom_div">
</div>
</div>
with the help of "positions" u can achieve this..
The HTML page is rendered from Top to Bottom. Reverse your div tags as in :
<div id="bottom">
</div>
<div id="top">
</div>
unless you have a specific reason not to do so.
Using Position in css it should work o.w try below
<div id="bottom">
</div>
<div style="clear:both;"></div>
<div id="top">
</div>
I have some relatively positioned containers (that vary in height) and I want to display them under each other. What's happening is they are displaying on top of each other (see fiddle).
I am using position:relative on the containers because I want the child elements to have position:absolute and display relative to their container. I think there is probably a quick fix with a fixed height for example but that isn't very flexible, my containers (or their children) will vary in height.
Desired result - fiddle
Actual result - fiddle
Code:
<style type="text/css">
.outside
{
position:relative;
border:1px solid red;
}
.inside
{
position:absolute;
top:0;
left:0;
}
</style>
<div class="outside">
<div class="inside"><p>absolute 1</p></div>
</div>
<div class="outside">
<div class="inside"><p>absolute 2</p></div>
</div>
<div class="outside">
<div class="inside"><p>absolute 3</p></div>
</div>
When you position something absolute inside a relative element, this relative element won't take in consideration the width or height of the absolute element, so just add a height:30px; - DEMO -
If you do not wish to have a fixed height, then use at least a min-height. - DEMO -
The problem you are having is that your outside containers have no dimension because the inside divs are absolutely positioned.
Since you say these are variable height containers, I know of no way to fix this.
What's wrong with the 'desired result' fiddle? It seems that you are trying to recreate the default behavior of how boxes are rendered.
I'm trying to build an image slider (no problems with the js!):
<div id="wrapper">
<div id="inside">
<img src="pic1">
<img src="pic2">
<img src="pic3">
<img src="pic4">
</div>
</div>
with the following style:
#wrapper{position:relative; width:300px; overflow:hidden;}
#inside{position:relative;}
#inside img{width:140px;}
When the width of the images (pic1,2,3,4) is greater than the width of the #wrapper(i.e. 300px), the rest of the images are moved to another line, i.e, instead of
pic1 pic2 pic3 pic4
I get
pic1 pic2
pic3 pic4
How can I fix this.
Increase the size of your #inside div to the size of your images and just hide all that extra space with overflow:hidden in your #wrapper div.
So it will be something like this:
#wrapper{position:relative; width:300px; overflow:hidden; }
#inside{position:relative; width:500px; }
I don't understand - what's the point of the 300px wrapper if your images inside are bigger? Unless you absolutely position them, they're of course going to wrap if they're too wide.
Is it possible to float an object over an image using css? I want to place a form over an image (that isn't a background). Float doesn't work, but is there some variable that does provide this function?
When you float an object it pushes the text to either side of the object. What I am looking for is something that will not do this, that will just float without regard to what is underneath it.
What you are looking for is not what floating elements do. A floating element is still part of the document flow, and you want an element that isn't.
Use absolute positioning to take an element out of the document flow, that way it won't push other elements away and you can place it on top of other elements:
<div style="position:relative">
<img src="image.jpg" alt="" />
<div style="position:absolute;left:0;top:0;">
This text is on top of the image
</div>
</div>
The elements with position:relative acts as the origin for the absolutely positioned elements inside it, so that the text is placed on top of the image and not at the top left corner of the page.
If you make the image in question the background image for the div or (yes, I'm saying it) table used to format the form, then the form will "float" over the image.
If that is not sufficient for your needs, check out http://w3schools.com/css/css_positioning.asp
Try z-index property
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>