Totally stumped here. I’ve isolated the problem but don’t have a clue why it’s happening. Here’s the CSS (this is for a printed document - that’s why I’m using inches):
[INDENT]#printList {
padding:1.5in;
}
#printList ul {
margin-left:.3in;
margin-bottom:.5in;
list-style:none;
}
If you leave the list-style:none in the ul, it wipes out the margins on both the ul and the h4. If you put it in a browser, you can see it visually with the last h4 (Tuesday, July 9, 2013). If you remove the list-style:none, the margins behave the way I wanted them do. My questions are:
What’s causing this?
How would I fix it, given that I want both the list-style:none and some space between the bottom of the ul and the top of the next h4?
Even assuming there’s an easy fix for my code, is there a better way to accomplish this? (Had I continued the code, there would be separate uls for each date and the user could choose as many dates as they want - maybe even a whole year. I’m not sure the way I have it is the best idea. For example, would this whole thing be better as one long nested list and I could put my h4s in an li with extra padding? Or something else?
I’m basically just wanting a 2-column list - or I may decide on a 3-column list - and didn’t want to use tables so I thought floats would keep the margins straight. I’m open to other ideas.
I made this into a fiddle and now I see even more problems because unless you expand the window showing the results, the 2 floated span columns overlap. Here’s the fiddle:
Maybe I should just start from scratch and ask - what’s the best way to do a 3-column layout with CSS? I had Googled it and this solution is what came up first so I used it - obviously not a good choice.
Thanks so much, Paul. I posted my fiddle post before I saw your reply. I had tried adding display:block and also clear:both to the lis themselves, but it never occurred to me that where I needed those styles to take effect was AFTER the li. Thanks so much for helping me learn. : )
What’s the zoom setting for? And is this the best way to do a 2 or 3-column layout or are there better ways?
That’s for forcing haslayout in IE7 and ie6 because in haslayout mode elements will automatically contain their floated children. IE6 and 7 don’t understand the pseudo class :after and therefore will do nothing with it.
And is this the best way to do a 2 or 3-column layout or are there better ways?
It’s all about context?
If as I suspect you are creating a “tabular data table” then a table with the correct number of cells would be the appropriate element to use.
If the data is not tabular then you can float the elements into columns as you have done but again we would really need to know if there is a relationship between columns or not. If there is no relationship between columns you could then just float two whole columns ( say column1 and column2) and then stack all the column1 stuff inside column1 (non floated) and the same for column2. That’s the way you would usually create columns for laying out a page but it looks like your task is more specific and looks like tabular data.
It’s hard to give a one answer fits al because it all depends on context and what happens next. There are many ways of doing things in CSS but usually there is a right way to do it and that depends on the task in hand.
If you float multiple items then you must make sure that each row is cleared (which the code I gave you will do) or when an item is of unequal height the next float will snag on the tallest when it wraps. Sometimes it is better to use display:inline-block instead of floats to avoid snagging (also needs another a hack for ie7 and under) but inline-block takwes note of white-space in the html and can upset pixel precision if space is tight.
