I have two divs with two images:
<div id="div1">
<div id="div2">
<img src="img1" />
</div>
<img src="img2" />
</div>
Second one is some smaller than first. How can I put second image on first image without using
#div2{
position: absolute;
}
I need to get similar result but without using position absolute property;
The main issue is that there are a lot of other elements, in parent div, not only div2.
Negative margins
You can do lots with negative margins. I've created an example with just two images without any divs.
img {
display: block;
}
.small {
margin: -202px 0 0 0;
border: 1px solid #fff;
}
.small.top {
position: relative;
margin: 0 0 -202px 0;
}
<img src="http://www.lorempixel.com/300/300">
<img class="small" src="http://www.lorempixel.com/200/200">
And some text
<img class="small top" src="http://www.lorempixel.com/200/200">
<img src="http://www.lorempixel.com/300/300">
And some more text
My question to you is why must you do this WITHOUT
#div2 {
position: absolute;
}
If the problem you are encountering is because it's absolute to the page and not the div then make sure #div1 has the following:
#div1 {
position:relative;
}
Its not a good approach to use negative margins. Especially when email templating, gmail reject negative margin and positions. So another way is
<div class='wrapDiv' style='width: 255px;'>
<div class='divToComeUp' style='
float: left;
margin-top: 149px; width:100%;'>This text comes above the .innerDiv
according to the amount of margin-top that you give</div>
<div class='innerDiv' style='width:100%; height:600px'>
Inner div Content
</div>
</div>
You could nest div2 inside div1:
<div id="div1">
<img src="\img1.png" />
<div id="div2">
<img src="\img1.png" />
</div>
</div>
Related
Why in the following code the height of the div is bigger than the height of the img ? There is a gap below the image, but it doesn't seems to be a padding/margin.
What is the gap or extra space below image?
#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}
<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.
There is space below that line for the descenders you find on letters like g, j, p and q.
You can:
adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
change the display so it isn't inline.
div {
border: solid black 1px;
margin-bottom: 10px;
}
#align-middle img {
vertical-align: middle;
}
#align-base img {
vertical-align: bottom;
}
#display img {
display: block;
}
<div id="default">
<h1>Default</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
<div id="align-middle">
<h1>vertical-align: middle</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="align-base">
<h1>vertical-align: bottom</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="display">
<h1>display: block</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
The included image is public domain and sourced from Wikimedia Commons
Another option suggested in this blog post is setting the style of the image as style="display: block;"
Quick fix:
To remove the gap under the image, you can:
Set the vertical-align property of the image to vertical-align: bottom; vertical-align: top; or vertical-align: middle;
Set the display property of the image to display:block;
See the following code for a live demo:
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
Explanation: why is there a gap under the image?
The gap or extra space under the image isn't a bug or issue, it is the default behaviour. The root cause is that images are replaced elements (see MDN replaced elements). This allows them to "act like image" and have their own intrinsic dimensions, aspect ratio....
Browsers compute their display property to inline but they give them a special behaviour which makes them closer to inline-block elements (as you can vertical align them, give them a height, top/bottom margin and padding, transforms ...).
This also means that:
<img> has no baseline, so when images are used in an inline formatting
context with vertical-align: baseline, the bottom of the image will be
placed on the text baseline.
(source: MDN, emphasis mine)
As browsers by default compute the vertical-align property to baseline, this is the default behaviour. The following image shows where the baseline is located on text:
(Image source)
Baseline aligned elements need to keep space for the descenders that extend below the baseline (like j, p, g ...) as you can see in the above image. In this configuration, the bottom of the image is aligned on the baseline as you can see in this example:
div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>
This is why the default behaviour of the <img> tag creates a gap at the bottom of it's container and why changing the vertical-align property or the display property removes it as in the following demo:
div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}
.block img{
display:block;
}
.bottom img{
vertical-align:bottom;
}
<p>Default:</p>
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
One can also nullify parent's line height:
#wrapper {
line-height: 0;
}
All fixes: http://jsfiddle.net/FaPFv/
All you have to do is assign this property:
img {
display: block;
}
The images by default have this property:
img {
display: inline;
}
You can use several methods for this issue like
Using line-height
#wrapper { line-height: 0px; }
Using display: flex
#wrapper { display: flex; }
#wrapper { display: inline-flex; }
Using display: block, table, flex and inherit
#wrapper img { display: block; }
#wrapper img { display: table; }
#wrapper img { display: flex; }
#wrapper img { display: inherit; }
I used line-height:0 and it works fine for me.
I found it works great using display:block; on the image and vertical-align:top; on the text.
.imagebox {
width:200px;
float:left;
height:88px;
position:relative;
background-color: #999;
}
.container {
width:600px;
height:176px;
background-color: #666;
position:relative;
overflow:hidden;
}
.text {
color: #000;
font-size: 11px;
font-family: robotomeduim, sans-serif;
vertical-align:top;
}
.imagebox img{ display:block;}
<div class="container">
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
</div>
or you can edit the code a JS FIDDLE
I just added float:left to div and it worked
You can also set overflow: hidden; for the container, and increase the height of the image to > 100%. height: 100%;
Why in the following code the height of the div is bigger than the height of the img ? There is a gap below the image, but it doesn't seems to be a padding/margin.
What is the gap or extra space below image?
#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}
<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.
There is space below that line for the descenders you find on letters like g, j, p and q.
You can:
adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
change the display so it isn't inline.
div {
border: solid black 1px;
margin-bottom: 10px;
}
#align-middle img {
vertical-align: middle;
}
#align-base img {
vertical-align: bottom;
}
#display img {
display: block;
}
<div id="default">
<h1>Default</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
<div id="align-middle">
<h1>vertical-align: middle</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="align-base">
<h1>vertical-align: bottom</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="display">
<h1>display: block</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
The included image is public domain and sourced from Wikimedia Commons
Another option suggested in this blog post is setting the style of the image as style="display: block;"
Quick fix:
To remove the gap under the image, you can:
Set the vertical-align property of the image to vertical-align: bottom; vertical-align: top; or vertical-align: middle;
Set the display property of the image to display:block;
See the following code for a live demo:
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
Explanation: why is there a gap under the image?
The gap or extra space under the image isn't a bug or issue, it is the default behaviour. The root cause is that images are replaced elements (see MDN replaced elements). This allows them to "act like image" and have their own intrinsic dimensions, aspect ratio....
Browsers compute their display property to inline but they give them a special behaviour which makes them closer to inline-block elements (as you can vertical align them, give them a height, top/bottom margin and padding, transforms ...).
This also means that:
<img> has no baseline, so when images are used in an inline formatting
context with vertical-align: baseline, the bottom of the image will be
placed on the text baseline.
(source: MDN, emphasis mine)
As browsers by default compute the vertical-align property to baseline, this is the default behaviour. The following image shows where the baseline is located on text:
(Image source)
Baseline aligned elements need to keep space for the descenders that extend below the baseline (like j, p, g ...) as you can see in the above image. In this configuration, the bottom of the image is aligned on the baseline as you can see in this example:
div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>
This is why the default behaviour of the <img> tag creates a gap at the bottom of it's container and why changing the vertical-align property or the display property removes it as in the following demo:
div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}
.block img{
display:block;
}
.bottom img{
vertical-align:bottom;
}
<p>Default:</p>
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
One can also nullify parent's line height:
#wrapper {
line-height: 0;
}
All fixes: http://jsfiddle.net/FaPFv/
All you have to do is assign this property:
img {
display: block;
}
The images by default have this property:
img {
display: inline;
}
You can use several methods for this issue like
Using line-height
#wrapper { line-height: 0px; }
Using display: flex
#wrapper { display: flex; }
#wrapper { display: inline-flex; }
Using display: block, table, flex and inherit
#wrapper img { display: block; }
#wrapper img { display: table; }
#wrapper img { display: flex; }
#wrapper img { display: inherit; }
I used line-height:0 and it works fine for me.
I found it works great using display:block; on the image and vertical-align:top; on the text.
.imagebox {
width:200px;
float:left;
height:88px;
position:relative;
background-color: #999;
}
.container {
width:600px;
height:176px;
background-color: #666;
position:relative;
overflow:hidden;
}
.text {
color: #000;
font-size: 11px;
font-family: robotomeduim, sans-serif;
vertical-align:top;
}
.imagebox img{ display:block;}
<div class="container">
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
</div>
or you can edit the code a JS FIDDLE
I just added float:left to div and it worked
You can also set overflow: hidden; for the container, and increase the height of the image to > 100%. height: 100%;
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}
I have three images numbered 1, 2 and 3.
I want to display them using CSS like demonstrated here.
I currently have them inside a <span> and have tried various combinations of position and float. I can get them to be display consecutively but I cannot get image 2 to be position above image 3. Here's my code:
<img src="1.gif" style="padding-right: 4px;"/>
<span>
<img src="2.gif" style="float: top;">
<img src="3.gif" style="float: bottom;">
</span>
There's no such things as float top or bottom.
To achieve a visual like your example try this:
<div style="float;left">
<img src="1.gif" style="padding-right: 4px;"/>
</div>
<div style="float:right">
<img src="2.gif" style="display:block;">
<img src="3.gif" style="display:block;">
</div>
You want to set the images to display: block (so they'll end up on top of one another), and float the first image to the left.
CSS:
.stack img {
display: block;
}
.leftside {
padding-right: 4px;
float: left;
}
HTML:
<img src="http://placekitten.com/100/100" class="leftside"/>
<div class="stack">
<img src="http://placekitten.com/50/50">
<img src="http://placekitten.com/g/50/50">
</div>
See this in action here: http://codepen.io/paulroub/pen/zFEjH
Change your css to this:
img {
float:left;
margin-right: 4px;
}
span img {
float: left;
margin: 0;
}
span img:last-child {
margin-top: 50px;
margin-left: -50px;
}
Fiddle: http://jsfiddle.net/FLTU7/
I'm stuck again with css positioning. I would like to create a page which shows one in the middle, surrounded by 10 other ones. Of course, it should look the same on every resolution (mobiles excluded).
But as i change the screensize, the site keeps on changing its look.
HTML
<div class="wrapper" id="wrapper">
<div class="element" id="element-1">Lorem1</div>
<div class="element" id="element-2">Ipsum2</div>
<div class="element" id="element-3">Lorem3</div>
<div class="element" id="element-4">Ipsum4</div>
<div class="element" id="element-5">Lorem5</div>
<span class="break"></span>
<div class="background" id="background"><span>Neologizmo</span></div>
<div class="element" id="element-8">Ipsum8</div>
<div class="element" id="element-9">Lorem9</div>
<span class="break"></span>
<div class="element" id="element-10">M10</div>
<div class="element" id="element-11">M11</div>
<div class="element" id="element-12">12</div>
</div>
CSS
http://nopaste.info/f6d200c414.html
Oups, already accepted an answer :$
Well anyway, since I was working on it, here is a generic solution. The idea is that you always have numberOfsquares/2 -1 squares at the top and bottom, and always one square on the left and one square on the right.
here is a fiddle: http://jsfiddle.net/PyU87/
It will display depending on the wrapper size which depends on the browser size. So this would also work on smartphones.
How does this work? You said you didn't want layouts to change as the screen changes size so I made it use fixed widths and be inside a wrapper so that can't happen.
DEMO
#wrapper {
width: 450px;
height: auto;
padding: 10px;
}
div {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
margin: 5px;
}
#background {
width: 212px;
padding: 0;
}