Hi - i am doing a site at http://www.a-bweddingcars.co.uk/cars.html - the problem i am having is laying out those pesky car images with the car image on the left and the text on the right - i did try it with floats but the image floated outside and looked bad - and my clear float didnt seem to work - the surrounding box collapsed to the hieght of the text.

I am having a bit of a head crisis today and i should be able to do this - but its just one of those days when my brain has stopped working!

I wonder if anyone could help me out to make this look the way i had envisiged and tell me where i am going wrong!

I have even resorted to tables but then couldnt get the text to align at the top! Something is missing / not right with this and any help would be greatly appreciated.

The relevant HTML changes:

<div class="boxout">
    <div class="boxoutfill">
               
                 <h2>Bentley T1</h2>
                 
           
               <img src="cars_files/bentley_t1.jpg" alt="Bentley T1" class="imgbord" width="200" height="181">
                <p>The 1973 <span class="bold">Bentley T1</span> the status symbol of its day.</p> 
              <p> Our Bentley T1 is in Silver with Cream Leather interior - just the car to arrive in style and comfort.</p>
                            <br class="brclear" />

                 
                
               
               
              </div>
            </div>
            
            
            <div class="boxout">
                <div class="boxoutfill">
                <h2>Rolls Royce Silver Spirit</h2><img src="cars_files/rolls_royce_ss.jpg" alt="Bentley T1" class="imgbord" width="200" height="160">
                   <p>The <span class="bold">Rolls Royce</span>
silver spirit from the grill to its white wall tyres a truly impressive
car with class to spare in white with black leather interior great for
photographs or just sit back and enjoy</p>
<br class="brclear" />
                </div>
            </div>

And the CSS changes:

.imgbord {float:left;
            padding: 5px;
            border:1px solid #999;
            background-color:#fff;
            margin:5px;}

.brclear {margin:0; padding:0; line-height:0; clear:both;}

That should fix you right up.

tim

thanks for that serandfae i will have a shot at that tonight when i get home hopefully i might be a bit more compus mentus than i was yesterday !

Hi, I have a bit of an issude with a box not expanding in my css . im probabally missing something - but i cant seem to get the background to extend to the picture end ;
the page is here : http://www.a-bweddingcars.co.uk/cars.html

The car picture is floated , but the surrounding content does not extend.

The HTML code is as follows:
<div class="boxout">
<div class="boxoutfill">
<h2>Bentley T1</h2>

<img src="img/bentley_t1.jpg" alt="Bentley T1" class="imgbord" width="200" height="181">
<p>The 1973 <span class="bold">Bentley T1- </span> the status symbol of its day.</p>
<p> Our Bentley T1 is in Silver with Cream Leather interior - just the car to arrive in style and comfort.</p>
<br class="brclear" />
</div>
</div>

The CSS is : .imgbord {float:left;
padding: 5px;
border:1px solid #999;
background-color:#fff;
margin:5px;}

.brclear {margin:0; padding:0; line-height:0; clear:both;}

I cant seem to work out why this is not having the desired effect

Sorry , missed some of the css:
#maintextFull .boxout { display:block;
padding: 8px;
border: 1px solid #CCC;
margin: 10px 0;}
#maintextFull .boxoutfill {
background-color:#eae7cc;
padding: 5px;
}

So you don't want the white around the picture? Set the margin and padding on .imgbord to zero. Or am I misunderstanding what you're wanting?

tim

I did want the white around the picture, thanks , but the box behind the picture ( the .boxout & .boxoutFill) collapse so the picture sits half on half off if you get my drift - what i wanted was the pic niceley in the centre with the surrounding beige box extending all round the pic.
I could ahceve this i suppose with a few empty paragraphs - but thats sort of cheating! Cheers

I think your clearing break is in the wrong place. Try moving it to just after the </div> for boxoutFill

many thanks - ill give that a try