PDA

View Full Version : problem with placing images evenly


dobbies
05-24-2011, 10:42 AM
I am trying to place four images evenly apart: 2 on the top and 2 on the bottom of my page.

If I just have 2 images side by side I can set the left hand image to float left and the right hand image to float right, then manipulate them into place with with padding. However when I add the two bottom images and give them same rule, it doesn't work. The fourth image seems to jump out of the container.

Would somebody be kind enough to try this code and explain what it is I'm doing wrong?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Page</title>
<style type="text/css">

body {
background-color: #000;
margin-top: 0px;
padding-top: 0px;
}
#container {
width: 1000px;
margin-right: auto;
margin-left: auto;
background-color: #CCC;
}
#Oobj77 {
float: left;
}
#Oobj78 {
float: right;
}
#Oobj79 {
float: left;
}
#Oobj80 {
}float: right
</style>
</head>
<body><div id="container">
<div id="Oobj77">
<img name="strike" src="" width="447" height="275" alt="" />
</div>
<div id="Oobj78">
<img name="strike" src="" width="447" height="275" alt="" />
</div>
<div id="Oobj79">
<img name="strike" src="" width="447" height="275" alt="" />
</div>
<div id="Oobj80">
<img name="strike" src="" width="447" height="275" alt="" />
</div>
</div><!-- End of Container -->
</body>
</html>

gentleone
05-24-2011, 12:26 PM
put float: right between the brackets.

#Oobj80 {
}float: right

domedia
05-24-2011, 01:03 PM
You could also simplify the CSS a bit
<style type="text/css">
body {
background-color: #000;
margin-top: 0px;
padding-top: 0px;
}
#container {
width: 1000px;
margin-right: auto;
margin-left: auto;
background-color: #CCC;
}
#container div {
float: left;
display: block;
margin: 30px 10px 10px 30px;
}
</style>

dobbies
05-24-2011, 01:11 PM
Thank you for your reply.

You wrote: "put float: right between the brackets" but your sample showed it outside the brackets. Anyway I did as your sample and nothing changed apart from a green line appeared underneath the css code and whilst hovering the mouse it indicated "error parsing styles".

Much appreciated.

gentleone
05-24-2011, 01:26 PM
You wrote: "put float: right between the brackets" but your sample showed it outside the brackets.
Yes that's right, because I just copied it from your CSS styles to show you how you have it. So again... put it between the brackets.

dobbies
05-24-2011, 03:39 PM
Yes that's right, because I just copied it from your CSS styles to show you how you have it. So again... put it between the brackets.

Sorry "gentleone" you are correct and it was a typo error on my part. The actual code I have that should have been published is:-

#Oobj80 {
float: right
}

and it doesn't work.

However "domedia" I have inserted your css rule and it does seem to be a sort of work around but I don't know why. Perhaps you could explain what's going on. I thought what I'm trying to do would be so simple.

Cheers

mangofreak
05-24-2011, 04:12 PM
here is another option:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Page</title>
<style type="text/css">

body {
background-color: #000;
margin-top: 0px;
padding-top: 0px;
}
#container {
width: 1000px;
margin-right: auto;
margin-left: auto;
background-color: #CCC;
}
.left {
float: left;
}
.right{
float: right;margin-bottom:1px;}

.clear{clear:both;margin-bottom:1px;}


</style>
</head>
<body>
<div id="container">

<img src="" alt="" name="strike" width="447" height="275" class="left" />
<img src="" alt="" name="strike" width="447" height="275" class="right" />
<img src="" alt="" name="strike" width="447" height="275" class="left" />
<img src="" alt="" name="strike" width="447" height="275" class="right" />
<br / class="clear">

</div>
<!-- End of Container -->
</body>
</html>

This allows you to use the floats in more elements that just your divs. I find it a bit more flexible. the only catch is to remember to add "clear"

I must say CSS is a pain but when it works it's so much fun ;)

dobbies
05-24-2011, 05:02 PM
here is another option:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Page</title>
<style type="text/css">

body {
background-color: #000;
margin-top: 0px;
padding-top: 0px;
}
#container {
width: 1000px;
margin-right: auto;
margin-left: auto;
background-color: #CCC;
}
.left {
float: left;
}
.right{
float: right;margin-bottom:1px;}

.clear{clear:both;margin-bottom:1px;}


</style>
</head>
<body>
<div id="container">

<img src="" alt="" name="strike" width="447" height="275" class="left" />
<img src="" alt="" name="strike" width="447" height="275" class="right" />
<img src="" alt="" name="strike" width="447" height="275" class="left" />
<img src="" alt="" name="strike" width="447" height="275" class="right" />
<br / class="clear">

</div>
<!-- End of Container -->
</body>
</html>

This allows you to use the floats in more elements that just your divs. I find it a bit more flexible. the only catch is to remember to add "clear"

I must say CSS is a pain but when it works it's so much fun ;)

Thank you mangofreak this has done the job and I've learned quite a bit from your post. Just one thing though; what does the "<br / class="clear"> do?

Again many thanks.

mangofreak
05-24-2011, 05:06 PM
from w3schools:

The "clear" property specifies which sides of an element where other floating elements are not allowed.

It works sort of like a page break where your floating elements stay within the container you want, consequently you can add more elements below the assigned "clear" ... hahaha that's why I'm not a writer... I hope it helps

dobbies
05-24-2011, 05:57 PM
Great stuff mangofreak, you've been a great help. I've been playing round with this conundrum now for the best part of a week under my own steam and got no where, I would never have sorted it without your help.

Thank you

mangofreak
05-24-2011, 06:47 PM
I have been in the same situation to know that a little help goes a long way. Keep at it.