I have a div[div1] that is surrounding other elements. Inside the elements I have an image that is positioned absolute. Div1 and the elements have float left on them and are showing no height. Is there a way to have this so the main overall div1 has a height so other elements like footers can be floated below it.
HTML
<div class="div1">
<div> <img src="image1.jpg" /> </div>
<div> <img src="image2.jpg" /> </div>
<div> <img src="image3.jpg" /> </div>
</div>
CSS
.div1{
width:100%;
height:auto;
overflow:auto;
float:left;
}
.div1 div{
width:100%;
height:auto;
overflow:auto;
float:left;
}
.div1 div img{
width:100%;
height:auto;
position:absolute;
display:block;
float:left;
}
If you want div1 to have a height, then remove the position absolute from the images
.div1 div img{
width: 100%;
display: block;
float: left;
}
Since all your elements are floating, the div1 will have a height. Your images were positioned absolutely so it is taken out of the content flow. This is the same as your divs not having any content inside of it, so you don't get a height.
http://jsfiddle.net/QDYYw/3/
Update :
Make the first image not positioned absolutely and the rest can be positioned absolutely, so they still have the stacking effect you want and the container will have a height since 1 of your images is in the content flow.
<div class="div1">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>
CSS
.div1 img:first-child {
position: static;
}
see http://jsfiddle.net/QDYYw/4/ for full code
That is because of the floats. A div is a block element, which always is 100%, so width: 100% is not needed. Also remove the display:block (div is block by default) and of you dont have a specific reason for the absolute, remove that too. And offcourse remove the floats.
If you want to keep everything, just give your divs position:relative;, absolute is always relative to the first relative element it finds
Related
how would I go about placing an image vertically between 2 section divs so that I can accomplish the following:
Set the exact width in which the image overlaps the section. Example - I want 30% of the height of the image to be part of the top div and 70% of the height of the image to be on the bottom div
Have consistency on all screen sizes/browsers for the above goal
Here's an example to illustrate what I mean:
From what I've read and seen, a lot of people just set margin to be a negative pixel amount or use top/bottom and set a pixel amount but i dont think this is compatible across screen sizes
thanks a lot for the help, it means a lot
Try this you can insert image in div having id img
#div1{width:400px;height:100px;background:red;}
#div2{position:relative;width:400px;height:100px;background:yellow;z-index:1;}
#image{width:40px;height:40px;background:green;position:relative;
margin-left:180px;margin-top:-20px;margin-bottom:-20px;z-index:2}
<div id="div1"></div>
<div id="image"></div>
<div id="div2"></div>
USING % FOR WIDTH
#div1{position:relative;width:50%;height:100px;background:red;z-index:2;}
#div2{position:relative;width:50%;height:100px;background:yellow;z-index:1;}
#image{position:absolute;bottom:-20%;/* 2/3=66.6 */
left:35%;z-index:4;
width:30%;
height:30%;background:green;
}
<div id="div1"> <div id="image"></div></div>
<div id="div2"></div>
You can add 2 parents around the image element, one with position:relative; and another (nested div) with position:absolute;. then for img tag, apply margin-top:-30%; to place it at desired position.
To center the image: we set left:50% to inner div (parent of image) and set margin-left:-50%; for image as shown here:
#div1 {background: #e0f0e0; padding: 1em;}
#div2 {background: #e0e0f0; padding: 1em;}
#divImg {position:relative; border:1px solid red; }
#divImg2 {position:absolute; border:1px solid blue; left:50% }
#divImg img { margin-left:-50%; margin-top:-30%; }
<div id="div1">Section 1<br/>Contents of div1 ...<br/><br/>123<br/>456<br/></div>
<div id="divImg">
<div id="divImg2">
<img src="http://triptopersia.com/wp-content/uploads/2016/04/Iranian-Cheetah-2.jpg" style="width:150px" />
</div>
</div>
<div id="div2">
Section 2<br/>Contents of div2 ...<br/>
<br/>
ABCD<br/>EFGH<br/>
123<br/>456<br/>
</div>
The red line indicates border of first position:relative div (divImg)
The blue line indicates border of second position:absolute div (divImg2)
The final position of img element is shifted relative to second div by margin-left:-50%; margin-top:-30%;
I want to create a div that's wider than its parent, and i found many solutions.
Almost all of them say something that looks like this:
position:absolute;
left:0;
right:0;
(for example: How to expand child <div> with 100% of body width?)
This is indeed a solution, but there is only one little problem.
situation:
(jsfiddle)
<style>
.parent
{
width:70%;
padding: 1%;
}
.fullwidth
{
position:absolute;
left:0;
right:0;
}
</style>
<div class="parent">
<div>
<h1>
This is a normal div.
This text is visible
</h1>
</div>
<div class="fullwidth">
<h1>
This is a full width div.
</h1>
</div>
<div class="normal-div">
<h1>
This is a normal div
This text is hiding behind fullwidth div
</h1>
</div>
</div>
In this example, the second normal div is hiding behind the fullwidth div, because the fullwidth is absolute positioned.
So, how can you do this without having the divs hide behind the fullwidth div?
You need to make two changes to the "normal div":
Position relative (the default is static)
Set z-index below that of the absolute positioned div
And one change to the absolute div (set its z-index below the "normal" div).
http://jsfiddle.net/gx4p2red/3/
.fullwidth
{
position:absolute;
left:0;
right:0;
/*Testing only*/
background-color: green;
z-index: 0;
}
/*Testing only*/
.normal-div
{
background-color:red;
position: relative;
z-index: 1;
}
Why does the parent div of the image have a few extra pixels at the bottom. How can I remove the pixels without hard code the parent div height.
http://jsfiddle.net/6x8Dm/
HTML
<div class="wrapper">
<div class="column">
<img src="http://www.lorempixel.com/200/200/" />
</div>
</div>
CSS
.wrapper {
width:200px;
margin:0 auto;
}
.column {
width:100%;
background:#cc0000;
}
img {
width:100%;
}
That space actually is a result of descender elements in fonts. You can get rid of it in a number of ways:
add a vertical-align:top rule to the image jsFiddle example
add font-size:0; to the containing div jsFiddle example
add display:block; to the image jsFiddle example
One way is by setting display:block on the img, causing it to fill the parent.
jsFiddle here - it works.
img {
width:100%;
display:block;
}
Alternatively, if you don't like that approach, you can also change the vertical alignment, as the default is baseline.
I have div container and five images inside it. I need to distribute them within the container (it has dynamic width) so that the spacing between the images is the same, and the left image is justified to the left, and the right image is justified to the right.
UPD:
Images must have fixed width (for example 100px), but container div is more than 500px.
Keep all the images in div's and then give width: 20%;, min-width:100px;,text-align: center and float:left /display: inline-block to those div elements. This should solve the problem.
div container
--> div (5)
--> images (5)
For your first child element, use :first-child pseudo class and for last child element, use :last-child pseudo class and then give text-align :left and text-aling: right respectively.
HTML
<div>
<div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
<div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
<div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
<div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
<div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
</div>
CSS
div>div {
width:20%;
float:left; /* display: inline-block; */
min-width:100px; /* equal to the width of the image */
text-align:center;
}
img{width:100px;}
div:first-child{text-align:left;}
div:last-child{text-align:right;}
Working Fiddle
Updated Fiddle (Using javascript)
Just use width:20%; and float;left;.
jsFiddle
img {
width:20%;
float:left;
box-sizing:border-box;
border:1px solid #000;
}
You can add box-sizing:border-box now and your padding and border sizes will be includes in your width so they won't overflow to the next line.
<div id="post">
<img src="image.png"/>
<div class="postbox">
some content here
</div>
</div>
How do i make `.postbox' expand it's width to the max possible with with respect to the width of the image or without the image?
#post{
width:569px;
overflow:hidden
}
#post img, #post .postbox{
float:left
}
I tried width:100% to .postbox but it's taking up the whole width.
http://jsfiddle.net/FTY4k/
.postbox { width:100% }
This will make the div the same width as the container
If it doesn't mess up your layout, you could float the image, but not the div.
#post{
width:569px;
overflow:hidden;
}
#post img{
float:left;
}
Using CSS float pulls the element out of the flow. In a sense, your img and div class="postbox" a no longer contained in the div id="post" even though it is still their parent in the DOM tree.
You can try setting those to inline-block instead of using float, or float them together withing an inner div and have a clear, all contained within id="post"
More details depends somewhat on your bigger picture of what you're trying to do in the layout.
For cases like these I like to use Nicole Sullivan's media object abstraction. Here's a fiddle (for reference).
HTML:
<div class="media">
<img src="http://placehold.it/100" alt="" />
<div class="bd">lorem dolor...</div>
</div>
CSS:
.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img {display:block;}
.media .imgExt {float:right; margin-left: 10px;}