[xml]

I'm tryna perfect a design, but i'm having issues with float divs overlapping.

Heres an example

As you can see some of the results look funky. I know tables would sort out this problem, but that I hope is a last resort.

[mike_m]

4th pic down yeah? having the exact same problem myself today - sure it's something simple, but am drawing a blank at the minute...

[xml]

[gray]

clear: both; ?

[xml]

Due to the mixture of Divs "clear: both" just fucks it up further.

I'm just gonna have to go with TABLES *gasp*

[mike_m]

same here, due to the layout being dependant on floats, clearing them makes a mess of the whole thing..

[smallbeer]

what are we meant to be looking at?

[mike_m]

this: http://www.feedsfarm.com/s/s-20-iraq...o.com&z=-86400

but he seems to have fixed it - will have a look through the code tomorrow

edit: oh dear, resorted to tables

[xml]

Sorry bout that, had to change it for the users.

Luckily Opera cached it from when I was checking the layout in that browser.

Heres what it looks like using divs (the problem is the overlaps):

http://images.feedsfarm.com/screeny-old.png

Heres the desired effect which I've got using the undesirable table elements :

http://images.feedsfarm.com/screeny-new.png

Its a search engine, and I'm an XML developer so I want to use DIVs because:

*) Usability
*) Standards
*) Less HTML required, less TCP/IP packets, less data to serve to users.

[Twistmedia]

If you add another line of text to the text on the caption above where the float is breaking should sort it out, but not the ideal asnwer, or for now you can put a padding in the stylesheet with reference to the <p>paragraphs of text</p> add a 20 or so padding on bottom (this is a quick quess without looking at your code ans css) So hold the flames

Having a pigs year with floats also.

[mike_m]

Yeah i just added some padding to the bottom of the paragraph, which isn't ideal, but will do for the moment..

[finbarr]

this might point you in the right direction:link

[mike_m]

that almost worked, but not quite, here:

original page: http://www.joh.cam.ac.uk/testing/admissions/

with the above method : http://www.joh.cam.ac.uk/testing/admissions2/

I'm a little closer, but still completely baffled.

[Denver]

http://www.456bereastreet.com/archiv..._in_body_text/
That link worked great for me. Try it.

[Transmogrify]

My personal opinion is that is tabular data anyway, so I can't see any issues using tables in that instance.

[smallbeer]

no it's not tabular data.

there's a million and ten ways of doing it. I'd probably use definition lists.

I've used percentages as you're going for a fluid layout.

css

dl {
	width: 70%;
	clear: both;
}
	
dt {
	float: right;
	width: 80%;
}
	
dd {
	float: right;
	width: 80%;
	margin: 0;
}
	
dt.image {
	float: left;
	width: 20%;
}
	
dt.image img {
	display: block;
}

xhtml

<dl>
<dt class="image"><img width="108" height="162" border="0" src="http://www.joh.cam.ac.uk/cms_misc/images/admissions/students.jpg" alt="St John's Students" title="St John's Students" /></dt>
<dt><a href="http://www.joh.cam.ac.uk/admissions/undergraduate/">Undergraduate</a></dt>
<dd>
<p>
In this section we aim to provide a wealth of information for
prospective applicants, current applicants, teachers and
parents.&nbsp;&nbsp;You will find sections on the admissions process,
subjects available, student life, options for visiting the College,
Open Days, Fees and Charges and much, much more besides! We cannot,
however, anticipate all your individual queries, so if you cannot find
the answers to your questions on this site we warmly invite you to 
<a href="http://www.joh.cam.ac.uk/admissions/undergraduate/contact/">contact us</a> directly, and we will be pleased to assist in any way we can.
</p>
</dd>
</dl>

<dl>
<dt class="image"><img width="108" height="166" src="http://www.joh.cam.ac.uk/cms_misc/images/admissions/On-Bridge-3.2.3-A.jpg" alt="On the Bridge of Sighs (by Nigel Luckhurst)" title="On the Bridge of Sighs (by Nigel Luckhurst)" /></dt>
<dt><a href="http://www.joh.cam.ac.uk/admissions/graduate_admissions/">Graduate</a></dt>
<dd>
<p>This section provides information about life as a Graduate Student
at St. John's College and on how to apply to the University for a
graduate course.</p>
</dd>
</dl>

[Transmogrify]

How is it not tabular data?

[pgo]

Where's the rows and columns? There's no cross-referencing possible...it's not tabular.

[finbarr]

Originally Posted by smallbeer

no it's not tabular data.

there's a million and ten ways of doing it. I'd probably use definition lists.

Interesting never thought of doing that!

[Transmogrify]

fair enough