CSS Float problem

[gaptrast]

Hello,

I have, lets say 6 divs floated to left. If the container is too tiny it would be like this:


If the divs not have the same height it would be like this:



The problem is that the divs starts on a new line. I want it to be more like this:



Do you understand my problem? Do I need to do something else than float?

Thanks

[descalzo]

Do you always want three columns? In that case just make 3 "vertical" divs and place the divs inside of them. (assumes all your divs are the same width).

If you want it "fluid", in that you might have 1-4 columns, depending on the width of the page (ie, no horizontal scrolling or excessive whitespace), I guess you can hook into the window "resize" event and use jQuery to rearrange things (step 1, remove containing divs, step 2. create new parent divs 3. attach child (display) divs ).

[vv.bbcc19]

Yes we got you.
That can be done using CSS Fluid liquid and elastic containers.
There is secret of using liquid layouts.Liquid layouts are easy to achieve if you follow some basic rules.
I think if you follow the following link this may help you.
http://www.maxdesign.com.au/articles/liquid/

Regs,
VVBB

Hello,

I have, lets say 6 divs floated to left. If the container is to tiny it would be like this:


If the divs not have the same height it would be like this:



The problem is that the divs starts on a new line. I want it to be more like this:



Do you understand my problem? Do I need to do something else than float?

Thanks

[misson]

Note that if the source order of the elements requires placing them left-to-right, then top-to-bottom when laid out (as in the second illustration of floats of varying height, where the 2nd element is the top center), then you're limited to positioning each one by hand, using absolute positioning.



Multi-column layouts will work if you can (and it makes sense to) change the source order of the elements so the elements run top-to-bottom, left-to-right (the second element in the illustration would be the green box in the left column).



Read the CSS 2.1 visual formatting model for details.

[bidzey75]

I never did understand why people left tables for layout... but anyways, if it's not an issue and you don't care about the code as long as it works, use tables for your 3 X 2 cell layout.

If you must use CSS for layout...

make sure you specify the width, height (might be tricky), and use "display: block". You might have to write up a javascript to figure out the height of the cell that is the longest and then put that as a min-height for the rest of the cells... tables will do all that automatically for you.
Or just statically put a minimum height that is in the safe range.

[misson]

I never did understand why people left tables for layout...

Because HTML defines document structure, not presentation. Computers have no intelligence, which doesn't just mean they're stupid: it means they are mindless automatons incapable of understanding. HTML is written for programs, not people, and an author should always write to shkler audience. By defining the structure of a document using semantic tags, we can make up for computers' lack of intelligence so they can process data without understanding it. Presentation is for people.

• "Why tables for layout is stupid"
• "Why avoiding tables (for layout) is important"
• Semantics, HTML, XHTML, and Structure

[bidzey75]

The reasons given are full of CSS evangelism. The biggest companies like Microsoft still use tables in some of their products like Sharepoint 2010 for one example. Gee... I wonder why? Understand the difference between dressing up your page, wich CSS is awsome, and layout where tables if used correctly will make your life alot easier. The first link you gave "Why tables for layout is stupid" must of been written by someone really naive. quote: "Tables is for tablature content only" I want to slap the academic moron that invented that false vision into millions of minds, and probably had very little experience designing Websites. Witch brings me to the subject of semantics, there are no semantics beyond the way a table is rendered. A table as no feelings, you said it yourself, computers have no intelligence, your post actually contradicts itself. A table couldn't care less if you use it for layout or my so favorite argument that tables are used for tablature content. Tables don't care, but behave exactly how you use them, it doesn't care how you use them any more than a shot glass would care if you use it for liquide or to hold a candle in it. As for tables being limited in anyway, this is again probably invented by someone that doesn't know how to use them. What you can do for layout on the X,Y axis I'll be able to do with tables with alot less coding.

I could go on and on, but I don't want to write a book here. This is a very old argument and I don't want to start one if I didn't already. It's easy to give out links to accommodate your theory. I could do the same too. The funniest one I seen in those links is where it says tables are slow. That is so false and also irrelevant. CSS too often asks for the assistance of including files, javascript, and a few "IF" statements to accomodate the proper layout, and they say tables are stupid? OK!! whatever... This reminds me on this very site, I can't remember the link, I really wish I did though, the case was you were at a page where http and https link content where both included. I got that popup that asks to OK both content, I pressed the button that did not OK it by mistake, and obviously it must of been the CSS file that was being included, and when I said "No: don't include it, I got the page all in white with black text on it. If look hard enough X10 will be able to reproduce this experience. This would not happen in tables, you would lose the dressing, but not the layout.

[misson]

@bidzey75: to avoid derailng this thread, I've responded to your post in a new thread.

There is one point relevant to this thread I'd like to make: a table is unsuitable for gaptrast's design because table cell borders are aligned, and gaptrast doesn't want the horizontal borders to align (which would cause extra space in some of the cells). He could force the borders to unalign by manually setting a row span for each cell, but changing the cell content would require partially (if not totally) redoing the row spanning scheme. Even changing cell content presentation could require this.

[morbid_leathal92]

thanks but such problems often occurs due to different browsers standard.

[bidzey75]

thanks but such problems often occurs due to different browsers standard.

that's another thing that is not an issue with tables because tables existed along with the first browser and all browsers were compliant except for very minor details such like borders, where CSS you need to include different versions to accommodate every browser if your running a serious or popular Website. Let me clear up my position if any rookies are reading this.... I am not saying to use tables all the time, learn the current trends and stay up to date on the markup. I'm only saying I never saw any REAL LIFE avantage and saw too many disavantages since tables were made more or less evil... This will be my last statement on this subject. Like misson said.. not to derail.