CODEWITHSUNDEEP
cssimagehtml
Chris Loonam
Chris Loonam

Reputation: 5745

HTML div with img in it displaying strangely

On the website I'm working on (this), I have a div with an img in it. This is the html

<div><overlay> <img class="img1" height="225" src="NYC/wtc1.JPG" width="225" /></overlay</div>

<div><overlay> <img class="img2" height="225" src="NYC/wtcmem.jpg" width="225" /></overlay></div>

<div><overlay> <img class="img3" height="225" src="NYC/sky.jpg" width="225" /></overlay></div>
<p>&nbsp;</p>

nothing too complicated. This is the CSS for the classes img1, img2, and img3. 

.img1
{
position:absolute;
left:12%;
}
.img2
{
display:block;
margin:auto;
}
.img3
{
position:absolute;
right:12%;
}

also pretty simple. But, if you look at the website, the 3rd image (at least for me on Safari) is much lower than the other two. Why would this happen? I don't see anything in the CSS or HTML that would cause this.

Upvotes: 0

Views: 96

Answers (3)

Yotam Omer
Yotam Omer

Reputation: 15356

I've tried to do the best I can with your code, the following will work for you:

<div class="container" style="overflow:hidden; text-align:center;">
<div style="display:inline-block; margin: 0px 80px;">
    <div class="overlay">
        <img class="img1" height="225" src="NYC/wtc1.JPG" width="225">
    </div>
</div>

<div style="display:inline-block; margin: 0px 80px;">
    <div class="overlay">
        <img class="img2" height="225" src="NYC/wtcmem.jpg" width="225">
    </div>
</div>

<div style="display:inline-block; margin: 0px 80px;">
    <div class="overlay">
        <img class="img3" height="225" src="NYC/sky.jpg" width="225">
    </div>
</div>
</div>

Note that <overlay> is not a valid HTML element. also I've seen on the page you used something like <margin>. It's not a good practice to invent HTML elements.. You can get all the functionality you need using regular <div>s (although I don't think this will break your page.. maybe only in older browsers..).

What I basically did:

  1. Wrapped the three <div>s with a container with text-align:center. This will make the three divs inside it aligned to the center.
  2. Added display:inline-block; to make all the divs follow the text-align.
  3. Added margins to the divs to space them

Note that I strongly recommend to replace your <overlay> with something like <div class="overlay">

Upvotes: 1

robertc
robertc

Reputation: 75707

If you have some markup like this:

<div class="wrapper">
    <div><img class="img1" height="225" src="http://rwzimage.com/albums/NYC/wtc1.JPG" width="225" /></div>
    <div><img class="img2" height="225" src="http://rwzimage.com/albums/NYC/wtcmem.jpg" width="225" /></div>
    <div><img class="img3" height="225" src="http://rwzimage.com/albums/NYC/sky.jpg" width="225" /></div>
</div>

Then I think this CSS will have approximately the effect you're after:

.wrapper {
    display: table;
    width: 960px;
}

.wrapper > div {
    display: table-cell;
    width: 33%;
    text-align: center;
}

.wrapper > div:hover img {
    opacity: 0.5;
}

Demo. I set width: 960px; so that it would force things to be wider than the JSFiddle window, but you could set width: 100%; for your page.

Upvotes: 1

Joshua Wilson
Joshua Wilson

Reputation: 2526

div tag naturally stack vertically. So you will need to add an id to each div or you could just put all the img in one div.

The block css attribute is effecting the layout. It is pushing the next img to the next line.

Upvotes: 0

Related Questions