CODEWITHSUNDEEP
html
Yun Wong
Yun Wong

Reputation: 3

Pictures moving when window resized

On my website, im trying to get it so that these three images in a weird format.

I have a tall image that I want to go on the left side, then I have an image that I want to go next to it (right side), and then I want to have the last picture next to the tall one on the left side as well, but below the other image. The pictures need to be touching sides.

I found a solution to this problem, but it needs to all be one file, so I cannot use an external .css import file.

What I have now works when the screen is maximized, but once it is resized at all the two pictures next to the picture on the left jump down so they are no longer next to the tall image.

The code I have now is this - 

<html>
<head>
<style>
min-width:1024px;
</style>
</head>

<body>
<div id="wrap"> 
    <div style="float:left;"><img src="tall left image"></div>
        <img src="top right image">
            <img src="bottom right image">

                <div style="clear:both"></div>


</div>
</div>

Upvotes: 0

Views: 60

Answers (2)

Nicole McCoy
Nicole McCoy

Reputation: 358

There's several ways you can do this. Without knowing all of the specifics I would recommend something like this.

HTML:

<div id="wrap">
 <div id="left"><img src="#" /></div>
 <div id="right">
  <div id="top"><img src="#" /></div>
  <div id="bottom"><img src="#" /></div>
 </div>
</div>

CSS:

#wrap {min-width: 100px;}
#left { width: 50px; float: left;}
#right {width: 50px; float: left;}
#top { width: 50px; }
#bottom { width: 50px; }

Just make sure the min-width on your wrap div is at least as wide as your images side by side.

Working Fiddle: http://jsfiddle.net/6sFzk/2/

Upvotes: 1

Levans
Levans

Reputation: 14992

Currently, your images are moving because they go out of the screen when resizing.

You can force them to stay in place with something like : 

<img style="position: fixed; top: 0px; left: 0px;" src="tall left image" />
<img style="position: fixed; top: 0px; left: width-of-tall-image px"; src="top roght image" />
<img style="position: fixed; top: height-of-top-image px; left: width-of-tall-image px;" src="bottom right image" />

But you'll have to have the rest of your design with position: fixed; so that it stays in place too.

Upvotes: 0

Related Questions