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.
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%;
If I am having two divs in a parent div and and all three divs have float left. What I have to do is to align center the two child divs without removing float left.
Use display: inline-block instead of float: left on child divs and you can give text-align: center to the parent div.
Let me see if i have understood,so you have something like this:
<div id="parent" style="float:left;">
<div id="child1" style="float:left;"></div>
<div id="child2" style="float:left;"></div>
</div>
And if im right you want the two div childs to be aligned in the center of the parent div but without removing the left float of none of them.Then i think this might work:
<div id="parent" style="float:left;position:absolute;">
<div id="child1" style="float:left; position:relative; left: 100px"></div>
<div id="child2" style="float:left; position:relative; left: 100px"></div>
</div>
So in the div style,try to center it by assigning a value in percentage or pixels to left:
It should work.I also advice you to use percentage,but first use pixels to understand how it works.And another advice is to not use css in html tags,i just showed you what to do,but it's recommended to have another file (style.css) to include in your html file.
This layout may help you:
HTML
<div class="div-p">
<div class="div-1"></div>
<div class="div-2"></div>
</div>
CSS - DEMO
.div-p{background-color:#eee;width:640px;height:400px;float:left;}
.div-1{background-color:#f00;width:300px;height:300px;float:left;margin:10px;}
.div-2{background-color:#0f0;width:300px;height:300px;float:left;margin:10px;}
If you want to center the parent div then use margin:0 auto; and remove the float:left;
CSS - DEMO
.div-p{background-color:#eee;width:640px;height:400px;margin:0 auto;}
.div-1{background-color:#f00;width:300px;height:300px;float:left;margin:10px;}
.div-2{background-color:#0f0;width:300px;height:300px;float:left;margin:10px;}
#parent{width:100%;}
#child1,#child2{width:90%;margin:0px 5%;}
set your child width in percentage with margin.
it will align both child div in center
you need set these styles for 2 child divs :
{ width:50%; text-align:center; float:left; height:50px;}
and the parent div :
{ width:100%; margin: 0 auto; float:left; height:50px;}
Note: height style is optional.
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 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
On this page there's a #container div that has a white background. This white background doesn't appear behind the 5 floated boxes (with titles "Latest", Music Festivals, Alerts, etc.) even though those boxes are children of #container and don't specify a background colour of their own, why?
The parent container does not expand to fit floated elements. You need a way to "clear" the float to end the floating after the child elements. See this page:
http://www.quirksmode.org/css/clearing.html
you should add an <div style="clear:both"></div> after last floated element, so that your floated elements affect on increasing your #container block's height. otherwise they "fall out" from your container box.
You just need to clear your floats after using your .box class:
.box {
float: left;
width: 30%;
text-align: justify;
margin-right: 25px;
}
Here's the simplest way possible:
<div id="main">
<div class="box"></div>
<div class="box"></div>
<br style="clear: both; display: block;" />
</div>