It is definitely my age - I've got three images, 200 px wide to fit in a wrapper of 1200 px
What is my best method of marking up the CSS please. I've tried float, display inline and other stuff. My memory of what to do is gone and a look at W£ Schools has blown my mind.
Sorry to bother such clever people with a simple request.
Tony

In my possibly simplistic, inelegant way, I would just put the images in individual <span> tags, one after the other, and then finetune the positioning with some padding, either in-line (as below) or in an external style sheet:

<span style="padding:...."><img src=... /></span>
<span style="padding:...."><img src=... /></span>
<span style="padding:...."><img src=... /></span>

To update that, span tags are basically frowned on with today's coding situation. You should definitely be using CSS instead of inline span tags for sure. I'm not that great at CSS but I'll give it an attempt to get you started and hopefully Inger or someone with more CSS experience will chime in and correct my mistakes lol.

You need to set each image to float left and give it a right margin of 10 to 20 px for space between them. I would also make sure they aren't directly within the main site wrapper and that they are within a div so it would be something similar (but maybe not exactly) to:

csselementtagnamehere img
{
float: left;
margin-left: 15px;
}

you may need to add:

display: inline-block;

to that too, but that's what I would try to start with. I know it sounds like you already tried this, but maybe it's just the way you're trying to apply it? Without seeing what you have already it's kind of hard to know what to tell you. Do you have a link to the page and css we can see? Or can you post the code you've been trying?

Also if you apply a float to any div you will need to add clear:left; to the div that is directly under the div you floated to the left.

Sirage, I'm really just getting familiar with CSS but why do you have to use a clear left? I have stacked links and just used the float property like JoAnn's example.

Here is what it looks like if we just apply a float:left; and no clear:left or clear:both on the following tag.
http://dl.dropbox.com/u/46490478/floatleft.JPG

Here is what it looks like if we apply a clear:left; or what I like to use is clear:both; to the following p tag.

http://dl.dropbox.com/u/46490478/clearboth.JPG

If you float any div or type selector, then what you are saying is float this div to the very left hand side of the container it is stored in. What that means is if you float a inline item to the left, it will float to the edge of the container and the text to the right of it will wrap around it. And anything that comes after it depending on Screen size will wrap to the right of a left floated div or type selector.

If you need more detail, I can go into it more.

Tony,

I saw your post yesterday, but I was so busy testing the coming version of the Editor, that I didn't find time to reply.

Why make it complicated? Just insert your three images one by one next to each other. You don't need to float them, unless you want to have text wrapping around them, as Sirage's first picture shows.

If the text is not supposed to wrap around the images, I would insert them like this:

In your style sheet you could give the class pics and the img some styling, like e.g.

or any margin and padding and other styling you want.

Thank you, Inger, for this implicit support of the 'KISS' -philosophy!

All great examples but from what I see we really don't know what the user actually wants.
Back to you Tonethemoan.

Thanks everyone, for taking the trouble to respond. It's been a few days since I was here, but haven't forgotten that I started all this.
I find the easiest way to clear the decks is simply:
<div id="divclear">
That SEEMS to work.
I then took my three images and in the CSS:
.imgone {
float: left;
and some margin/padding etc
}
This repeated for all three.
What I originally tried was float left (1st image), then float right for second and third!!!!!! How dumb!

Then I changed the idea for the whole page and my images became "boxes of text" and just before I floated, I got interested in the nw BOXFLEX stuff and it sort of works EXCEPT IN GOOD OLD IE!
Because HTML Editor won;t let me preview in IE or Safari for some reason, I have put the incomplete and non-validated site on S Drive, so I can test it with browsers.
The beauty is no floating stuff, but it is clearly not ready for all browsers.
Take a look here while while you have the chance, and the CSS is below:
scotweb.coffeecup.com
/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */




body {
margin: 0;
padding: 0;
background-color: #6F6475;
font: small verdana, arial, sans-serif;
}
#wrapper {
width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 30px;
background-color: #000000;
color: #ffffff;
}
.logo {
margin-left: 25px;
margin-top: 20px;
margin-right: 25px;
float: left;
}
.toptext {
color: #FFFFFF;
font-size: 3.1em;
font-style: italic;
padding-top: 60px;
}
.thanks {
width: 500px;
font-size: 1.4em;
margin-left: 35px;
margin-bottom: 25px;
}
.mainnav {
margin-bottom: 65px;
}
.intro {
width: 550px;
float: right;
font-size: 1.4em;
color: #FFFF00;
font-style: italic;
margin-right: 35px;
margin-top: -25px;
}
h1 {
color: #FFFFFF;
font-size: 2.1em;
border: 1px solid #DDE456;
margin-left: 30px;
margin-right: 30px;
padding-left: 10px;
padding-top: 6px;
padding-bottom: 6px;
}
h2 {
text-align: center;
color: #FFFF00;
font-style: italic;
}
#container {
width: 1200px;
display: -webkit-box;
display: -moz-box;
display: box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
}
#container div {
width: 320px;
margin: 0 10px 10px 10px;
padding: 20px;
}
#yel {
background-color: #F9F197;
color: #114209;
border-radius: 15px 15px 15px 15px;
-ms-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
-khtml-border-radius: 15px 15px 15px 15px;
}
#grn {
background-color: #AA7D22;
color: #FFFFFF;
font-size: 1.2em;
text-align: center;
font-weight: bold;
border-radius: 15px 15px 15px 15px;
-ms-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
-khtml-border-radius: 15px 15px 15px 15px;
}
#blu {
background-color: #95D5F7;
color: #114209;
border-radius: 15px 15px 15px 15px;
-ms-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
-khtml-border-radius: 15px 15px 15px 15px;
}
#footer {
background-color: #FFFFFF;
color: #008040;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
}
It's a pity, but it looks as though "box" cannot be used until all the browsers catch up, so I shall probably go back to "float"

Off now to find out why Ican't get to IE and Safari preview in HTML Editor - ver odd.
Tony