View Full Version : CSS Coding Problem - HELP!!

07-19-2007, 10:25 PM
I thought I new CSS well, but I'm in a real mess now. I am creating a new photo album for my website and the css isn't working correctly. I'm using the float command. However, when I have multiple images on a page and only want three to a line it causes some lines to only have one. This probably doesn't make much sense. Could someone PLEASE take a look at this example of my problem and toss me some ideas!!!


07-20-2007, 10:29 AM
invalid URL. maybe post some code. In the mean time google for clear.

07-20-2007, 03:50 PM
invalid URL. maybe post some code. In the mean time google for clear.


Have a look at this. It may give you some ideas. It's not my work but was done for me and I adapted it.



07-20-2007, 04:04 PM
Sorry, I forgat the code.:eek:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<title>Picture Menu 1</title>
<style type="text/css">
* { margin: 0; padding: 0; }

html, body {
margin: 0px;
padding: 0px;
display: inline-block;
background-color: #bbb;

.wrapper {
text-align: center;
background-color: #bbb;

.wrapper p {
display: inline;
.wrapper span {
margin: 1em;
vertical-align: top;
width: 140px;
height: 150px;

display: inline-block;
.wrapper p span {
vertical-align: bottom;
.wrapper p img {
margin-bottom: 0px;
border: none;
margin-top: 0px;

.wrapper a {
text-decoration: none;
color: #000;




<a href="index.html"><img alt="Home page." src="home.jpg" width="85" height="42" /></a>
<div class="wrapper">

<p><span><a href="Mum.html"><img src="nan.jpg" alt="3" width="120" height="150"> Grandma, Madge Taylor.</a></span></p>
<p><span><a href="Steve3.html"><img src="steve-01.jpg" alt="4" width="120" height="150"> <br >Young Steven.</a></span></p>
<p><span><a href="Grandad.html"><img src="Grandad.jpg" alt="1" width="150" height="150"> Granddad, Sidney Taylor.</a></span></p>

<p><span><a href="FSIn.html"><img src="EdPortrait2.jpg" alt="5" width="120" height="150"> <br >Sister - Edna.</a></span></p>
<p><span><a href="web19large.html"><img src="web19.jpg" alt="6" width="120" height="150"> <br > Frank - 45 years ago.</a></span></p>

<p><span><a href="Steven2.html"><img src="steve-02.jpg" alt="0" width="150" height="120"> Steven when a young lad.</a></span></p>

<p><span><a href="HonW.html"><img src="clocktower.jpg" alt="1" width="150" height="120"> Hay-on-Wye.</a></span></p>
<p><span><a href="Glider.html"><img src="Glider.jpg" alt="2" width="150" height="120"> Frank, in a glider.</a></span></p>

<p><span><a href="bsgroup.html"><img src="Bettyandstevetr.jpg" alt="7" width="150" height="120"> Betty and young Steven.</a></span></p>

<p><span><a href="103c.html"><img src="Webpiano.jpg" alt="5" width="150" height="120"> Frank's 'Clavinova' electronic keyboard.</a></span></p>
<p><span><a href="SteveandPhil.html"><img src="SteveandPhil.jpg" alt="6" width="150" height="120"> Steven and Philip.</a></span></p>
<p><span><a href="famgroup.html"><img src="SteveBetFrank.jpg" alt="7" width="150" height="120"> Steven, Betty abd Frank.</a></span></p>


07-24-2007, 02:14 PM
I think the problem is using the inline boxes. If you wanted to force 3 items per row you could try using tables?