PDA

View Full Version : Make float do what I want, not what I code

wac
09-08-2004, 06:53 PM
I've got a bunch of content (separate DIVs) that's arranged horizontally, and should float to the next 'line' when the page width is adjusted. E.G. they should automagically adjust so the right amount fits on each line. The style I have is specified as '.myclass' below. Things basically work except there's an annoying problem when the DIV heights are not the same.

.myclass
{
float: left;
width:125;
margin: 0 25 0 0 ;
cursor: pointer;
cursor: hand
}

Example. If I've got 6 DIV's of varying heights like below, so that they all
might fit horizontally (the dots are space so that I could line things up)

A......B......C......D......E......F
A......B......C......D......E......F
A..............C
................C

When the page is resized (down, say), so that only 4 can fit horizontally, I want

A......B......C......D
A......B......C......D
A..............C
................C

E......F
E......F

Instead, what I get is
A......B......C......D
A......B......C......D
A..............C
................C......E
........................E
F
F

How can I use CSS to get what I really want???
mcdougals4all
09-08-2004, 06:59 PM
Personally, I'm having a hard time visualizing what you described without the code.

You say the problem happens when the divs are different heights? Are you defining the heights or letting the content set the height?
wac
09-08-2004, 07:08 PM
There is no code, its all HTML and CSS. The content of the DIV sets the height. The problem is that shorter DIVs that are towards the right float next to the taller DIV instead of floating all the way to the left margin. The only way I know to fix this is to force the heights to be all the same, which doesn't look right when the contents are of widely varying heights, unless I clip the contents (ala overflow:hidden)
wac
09-08-2004, 07:23 PM
Argh! Now I understand even less, even though I can demonstrate a solution to my problem!!! :confused:
Here's an example of the issue... In the stuff below, try it as currently specified to see that the wrapping/floating behaves funky. Now swap .myfloat and .xmyfloat and that's the behavior I really want. Now that I've found what I want (Thanx... sometimes making things simpler helps), why doesn't what I had before work??? I need to actually understand this stuff.

<HTML>
<head>

<style type="text/css">
.myfloat
{
display:inline;
vertical-align:top;
flow:left;
width:150 ;
border:solid thin black;
}
.xmyfloat
{
float: left;
width:150;
margin: 0 25 0 0 ;
border:solid thin black;
}

</style>

</head>
<body>
<DIV CLASS='myfloat'>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </DIV>
<DIV CLASS='myfloat'>2. Praesent blandit venenatis purus. Integer massa libero,
vehicula id, consequat sed, tincidunt nec, purus. Class </DIV>
<DIV CLASS='myfloat'>3. adipiscing quis, semper non, dictum a, nunc. Curabitur
ut sem. Pellentesque a est id neque hendrerit ultrices.
Donec vulputate tincidunt turpis. Curabitur dignissim </DIV>
<DIV CLASS='myfloat'>4. aptent taciti sociosqu ad litora torquent per conubia nostra,</DIV>
<DIV CLASS='myfloat'>5. per inceptos hymenaeos. Suspendisse potenti. Nunc</DIV>
<DIV CLASS='myfloat'>6. vulputate magna non magna. Aenean lorem eros,</DIV>
<DIV CLASS='myfloat'>7. vestibulum nunc. Aliquam felis lorem, ultrices sit amet,</DIV>
<DIV CLASS='myfloat'>8. convallis a, accumsan vel, ante. Proin aliquam turpis sed</DIV>
<DIV CLASS='myfloat'>9. augue. In pellentesque, magna a pulvinar adipiscing, est </DIV>
<DIV CLASS='myfloat'>10. orci adipiscing felis, sed laoreet urna magna quis neque.</DIV>
<DIV CLASS='myfloat'>11. Proin facilisis aliquet urna.</DIV>
</body>

</HTML>
wac
09-08-2004, 07:38 PM
argh!!! Problem solved...talk about embarrasing... OK, in my haste to provide a markup example, I mistyped float and put flow in the style. When the css didn't work as expected, I slapped in the display:inline (because I didn't know what else to do). Apparently that is what I should have done initially, instead of float. So, apparently float doesn't do what I thought it would. Does anyone have a decent description of what float does so that I can understand this in the future? I only have one more foot to shoot.
bradyj
09-08-2004, 08:17 PM
Ok, first I have to say:
"There is no code, its all HTML and CSS." Is kinda' backwards don't you think:)? I thought HTML and CSS was code!

Float does what you're talking of -- it just works differently with other CSS declarations. If you want objects to lay next to each other comfortably without a fixed size, display: inline; is your man. These elements will rest next to each other as needed, because they are inline elements -- no hard return after them.
If you give something a float via CSS and it's a display: block; element, my understanding is that you need to define a width for that to work properly (wether it be a percentage or pixels, or whatever).

Now, from the code that you have there, this should not be divs at all -- it should be a list -- since that's what it is, right? It's a list that's numbered -- so then it should be an ordered list ( <ol> ) instead of an unordered list <ul>.


<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>
<li>Praesent blandit venenatis purus. Integer massa libero,
vehicula id, consequat sed, tincidunt nec, purus. Class </li>
<li>adipiscing quis, semper non, dictum a, nunc. Curabitur
ut sem. Pellentesque a est id neque hendrerit ultrices.
Donec vulputate tincidunt turpis. Curabitur dignissim </li>
<li>aptent taciti sociosqu ad litora torquent per conubia nostra,</li>
<li>per inceptos hymenaeos. Suspendisse potenti. Nunc</li>
<li>vulputate magna non magna. Aenean lorem eros,</li>
<li>vestibulum nunc. Aliquam felis lorem, ultrices sit amet,</li>
<li>convallis a, accumsan vel, ante. Proin aliquam turpis sed</li>
<li>augue. In pellentesque, magna a pulvinar adipiscing, est </li>
<li>orci adipiscing felis, sed laoreet urna magna quis neque.</li>
<li>Proin facilisis aliquet urna.</li>
</ol>


Then your CSS would just be:

li {
list-style-type: decimal;
display: inline;
}


There are a million and one variations, probably best shown on this website:
http://css.maxdesign.com.au/listamatic/
wac
09-08-2004, 08:33 PM
Yeah, I think of HTML and CSS as markup, not code.... potAto potato, oh well. I just put the numbers there to keep track of where things moved to when I resized the page. My confusion wasn't with the items resting next to each other, but what happened when I resized the page. With float, they arranged differently that with display:inline. Clearly I didn't understand the difference. Thanx to you guys, I'm beginning to get the picture.

If there's no real numbering, do you still suggest using a list instead of DIVs?
I was looking at the display as more like independent blocks that are arranged inline, but it could be logically viewed as a list of objects also. I'm not following why one method might be preferred over another. The subtles are what's killing me.
bradyj
09-08-2004, 09:29 PM
I would still recommend lists, but don't use an <ol> since that's an ordered list, use a <ul> -- since the order of your list is not a necessity, it's just a list.

I know, subtlities still get me. The point of it is that a div is nothing but a divider of information, it really is not 'semantic', meaning it doesn't have any logical reason to be in a document -- it means nothing. This is important for handicap users that just view text or have text being read to them, and it is important to google when it indexes your site so that it knows what each element of your page is and what's important.

So since this is a list of information, like a menu is a list of links, a list would be better to use here so that it reads properly for everyone. If you want to make it look completely different, then you can change it with CSS to look nothing at all like a list.

Semantic building is becoming an important part of web design, so keep it in mind. I'll use one of my websites as an example because I know the code better:
http://www.dotfive.com/sitemap.php

If you check out the code, you'll see that h1 is the name dotfive, h2 is the sub title of that page (sitemap & accessibility), then there are two other headers that are under that. An h3 sitemap with a list of links for that sitemap, then an h3 accessibility with a definition list of terms and their buttons (definition lists are like lists -- but you get a little more benefit. Right under the list, dl, you get the definition term, dt, and then it's definition description, dd. You can use this for information that's a list, but needs headers with sub information, kinda' like a caption. http://www.dotfive.com/profile.php has each of our names as a dt and then their title as a dd.)

None of this is set in gold, you'll find times that you like a dl for some, a ul for others -- you can use your discretion, but it's good to make an attempt.

What would probably help is for you to see how it looks in a handheld device, since that's pretty much how google sees everything, just text.

http://www.opera.com/ is a free browser (if you don't already have it) and it has a cool feature that allows you to view your webpage as it would in one of these devices. Download and install it, once you've launched it, visit a website that would be a good example (some of the semantic ones are like simplebits.com and others) -- then go to the menu and select view > small screen. It'll show you how it looks and why it's helpful for text browsers and google. That make sense?