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/
Related
I've seen working examples of middle-aligning a single line of text next to an image, like so:
<div>
<img style="vertical-align:middle" src="testImage.png" />
<span style="">This works</span>
</div>
But I need to align two spans, one above the other, because they will eventually need to have different styles, and the following results in the second span being rendered beneath the image:
<div>
<img style="vertical-align:middle;" src="testImage.png" />
<span>This doesn't work</span><br />
<span>I'm annoyed</span>
</div>
NOTE: I did experiment with using float:left; for the image, which does work to a degree, but fails when the text is long enough that it requires the div to expand (it does not factor in the width of the image and produces an undesired text-wrap)
EDIT: This is an example of the solution that worked for me, based on the answer given by aje, containing a small tweak of adding vertical-align: middle; to the div tag. I've included this as an edit, rather than add my own answer, because I'd like to credit aje with the answer that helped me:
<div style="border: solid 2px green;">
<img style="border: solid 2px black; vertical-align: middle; width: 32px; height: 32px;" src="https://dummyimage.com/300.png/09f/fff" />
<div style="vertical-align: middle; display: inline-block">
<span>This now works properly.</span><br />
<span>Thanks for the help!</span>
</div>
</div>
Wrap span under a div below is a snippet
<div>
<img style="vertical-align:middle;" src="https://dummyimage.com/300.png/09f/fff" />
<div style="display:inline-block"><span>This doesn't work</span><br />
<span>I'm annoyed</span>
</div>
</div>
div {
display:table;
}
div img {
float:left;
margin-right: 10px;
width: 200px;
}
div p {
display:table-cell;
vertical-align:middle;
}
div span {
display: block;
}
div:after { /* it's always good practice to clear floats */
content: '';
display: block;
clear: both;
}
<div>
<img style="vertical-align:middle;" src="http://lorempixel.com/output/animals-q-c-640-480-8.jpg" />
<p>
<span>This doesn't work</span>
<span>I'm annoyed</span>
</p>
</div>
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 just started to design a small Webpage to present some designs.
It's a page with 2 columns, with a picture and some text for each.
The problem I have right now: when I add more text to one column, the picture of the other column moves.
Check out my fiddle:
http://jsfiddle.net/JannikS/tMY57
My HTML markup:
<div id="designrow">
<div class="design">
<img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" />
<h3>Title </h3>
<p>Short description of our design..</p>
</div>
<div class="design">
<img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" />
<h3>Title </h3>
<p>Short description of our design..<br /> but with some more text!</p>
</div>
</div>
and CSS:
.designrow {
float: left; }
.design {
width: 300px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
display: inline-block;
}
.design img{
width: 100%;
height: 100%;
}
you're giving your columns display:inline-block, remove that and float:left instead
heres the fiddle: http://jsfiddle.net/tMY57/3/
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>
It should be very simple, but I am, so it's not ...
The first thing on the page, right after <body>, I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page.
Can you do that without knowing the width og the image?
Yes, put image in one div, and text in another, define "float: right" property for the div with the image, and "float: left" for div with the text in CSS
<div class="div1"><img src=...></div>
<div class="div2">text</div>
<style type="text/css">
.div1 {
float: right;
}
.div2 {
float: left;
}
</style>
<div id="banner">
<div style="float: left; width: 50%;">
left - just put your text here
</div>
<div style="float: right; width: 50%;">
right - just put your image here
</div>
</div>
You may also want to use a clearfix (google it) technique to ensure the banner div always has height no matter how big the image is.
Here's a fiddle : http://jsfiddle.net/KaHjd/1/
I've assumed that you want the image right aligned as well.
#header {
overflow:auto;
}
#branding {
float: left;
padding: 10px;
background: #00AA00;
}
#logo {
float:right;
padding: 10px;
background: #aa0000;
overflow:auto;
}
#logo img {
float:right;
}
<div id='header'>
<div id='branding'>
some text
</div>
<div id='logo'>
<img src='http://placekitten.com/200/100'>
</div>
</div>
Of course we can. But your image must be small enough in order for your text not to overflow the banner.
HTML
<div class="banner">
<span>Text goes here</span>
<img src="" alt="" />
</div>
CSS
.banner { overflow: hidden; width: 100%; }
.banner span { float: left; }
.banner img { float: right; }