Got even further now, and the problems with the pictures is resolved. I forgot that I needed to float the picture before writing the text so the text now flows around the picture.
I still have a couple of problems. Firstly, I cannot see why the section_contents div has a horizontal scroll bar. I'm assuming it's something to do you margins/padding. Also I have alternated the venues inside a div with a class of bg0 or bg1 to alternate the background colours however this seems to have no effect. Any ideas? Regards Pete -----Original Message----- From: Pete Home [mailto:[EMAIL PROTECTED] Sent: 23 October 2006 13:13 To: '[email protected]' Subject: RE: Div positioning OK, I've done a lot more work on this and have get the basis of the tabular layout, but I do not know why the pictures will not float right or left. As this page is dynamic, and uses AJAX, I have reproduced the page statically at www.themarjlebonejournal.com/newsite/o-gazetteer.asp Regards Pete -----Original Message----- From: Pete Home [mailto:[EMAIL PROTECTED] Sent: 22 October 2006 17:00 To: '[email protected]' Subject: Div positioning I'm trying to produce tabular type layout for venues and gigs using divs where I end up with something like this; ---------------------------------------------------------------------------- ---- VENU 1 ____________________________________________________________________________ ____ ____________________________________________________________________________ ____ VENU 1 DETAILS | ____________________________________________________________________________ ____ V1g1 DETAILS |v1g1 PICTURE ____________________________________________________________________________ ____ v1g2 PICTURE |v1g2 DETAILS ____________________________________________________________________________ ____ V1g3 DETAILS | ____________________________________________________________________________ ____ VENU 2 ____________________________________________________________________________ ____ ____________________________________________________________________________ ____ VENUE 2 DETAILS | ____________________________________________________________________________ ____ v2g1 DETAILS | ____________________________________________________________________________ ____ v2g2 DETAILS |v2g2 PICTURE ____________________________________________________________________________ ____ Etc You'll notice that some gigs have pictures and some don't, and the pictures are staggered left and right. A gig with a picture always starts a new 'row'. I thought I'd end up with something like; <DIV ID="venu1" class="venue">Venu1 name <div ID="venu1det" class="venudetails">venue 1 details</div> <div id="v1g1" class="gig">gig 1 details</div> <div id="v1g1pic" class="gigpic"><img src=v1g1.jpg></div> <div id="v1g2pic" class="gigpic"><img src=v1g2.jpg></div> <div id="v1g2" class="gig">gig 2 details</div> <div id="v1g3" class="gig">gig 3 details</div> </div> <div id="venu2" class="venue">Venu2 name <div ID="venu2det" class="venudetails">venue 2 details</div> <div id="v2g1" class="gig">gig 1 details</div> <div id="v2g2" class="gig">gig 2 details</div> <div id="v2g2pic" class="gigpic"><img src=v2g2.jpg></div> </div> All gigs and pictures will be 50% of the width What I wondered if there is some way of forcing this pattern of divs and ensuring they start a new 'row' when there is a pictures associated with the gig details. Regards Pete ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
