PDA

View Full Version : positioning images in a liguid layout...


benjipie
02-03-2009, 10:10 AM
Hi,
Im have a site with liquid layout and was having trouble positioning my images. I was just 'playing' round with positioning it and think i might have cracked it, I simply gave it a 'float:left' value with a 10px padding, is this the correct way to position images in a liquid layout so that the image appears in the same place on all monitors / resolutions? if not what is the correct way? I have pasted the code below (HTML and CSS) the image is called girl. I also have a test url http://www.figureeight.us

Thanks for any help....


<div id="sideBar">
this is the sidebar
<img id="girl" src="girl.jpg" />
</div>





body {
font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
background-color:#D4D4D4;
text-align: center;

}

#wrapper {

width: 90%;
max-width: 1100px;
background-color: #fff;
padding: 10px;

text-align: left;

}

#sideBar {
float: left;
background-color: #CCCCCC;
width: 25%;
height: 220px;
max-width: 400px;

}

#girl {
position: relative;
left: 10px;
float:right;
padding-right: 10px;
}

coloeagle
02-04-2009, 02:34 PM
If this works for you then it is correct.

I am confused though about the position relative - left 10px parts. Don't see a need for these.

You also need to double check all your css. You have some max-width declarations that are wider than your wrapper. Also remember that IE does not understand max-width.