I have ul "boxes" that are floated left, so they appear next to each other, and fall under each other when the screen size is reduced, ensuring they are never off-screen. However, what I can't get is how to have the centered. They are always left-aligned.
I know if I give the div an absolute width, say 1200px, it'll be centered to the width. However, doing that prevents the ul's from shifting according to screen size. "width: 100%" doesn't work. Any suggestions? Or is this impossible? Thanks!
Nice try. But it's still not working. I don't want the text within the ul's to be center aligned, I want the "boxes" themselves to be center aligned.
As long as the white-space (margins...?) to both sides is unequal and/or the "boxes" don't realign themselves automatically with a smaller view port, it's not what I want.
Hello comport9,
Looks like you and Windbrand are in the same class?
Your ul's are left aligned because that's what you told them to do. You can't center them and float them left, not without some margin or padding to push them toward the center and then that messes up the layout when they drop.
Look at that solution for Windbrands question, or this -
Thanks man! I think this is actually working. No, I don't know who "Windbrand" is and I'm not in any class. Just seems to work out that way.
One small thing, the ul box with fewer list elements within isn't lined up exactly with the others, it's a little lower. Which throws everything off. Could you tell me why this is?
One small thing, the ul box with fewer list elements within isn't lined up exactly with the others, it's a little lower. Which throws everything off. Could you tell me why this is?
It's because of the different height, when those ul's break to the next line they take the next space available. The only way I know to fix that is to have all the uls be the same height.
But I've specified a height in the css for them... I'm sure I can simply write a bit of code that adds some extra empty li elements, but that feels kinda like a hack.
Edit: Adding a bit of code to include empty li elements worked. (Had to use html markup of a space). But if you have a CSS solution, I'd much prefer to use that.
Edit: Adding a bit of code to include empty li elements worked. (Had to use html markup of a space). But if you have a CSS solution, I'd much prefer to use that.
Overflow option didn't work... Edit: I'd put it to the wrong css... however, it doesn't exactly work as intended, as now each ul has a scroll bar in it. Although they are lined up now. lol.
Edit: Just read the "little trick" you mentioned. Pretty funny. Luckily I don't care to support out-dated browsers at all.
Overflow option didn't work... Edit: I'd put it to the wrong css... however, it doesn't exactly work as intended, as now each ul has a scroll bar in it.
Let's have a look at the most recent version of your code.
Alright, overflow "does" work on my test bed. However, using it on my site didn't work. After some testing I realized it's because I have a button whose borders I've put outside of the ul box. The portions of the button that are outside of the box are cut off, and then a scroll bar is made inside the box.
If you set your height and you have overflow, you get a scroll bar. You can always use overflow: hidden; to get rid of the scroll but you also lose the content.
The solution is to make sure your content fits in its container.
Before you post, read our: 
No, I don't know who "Windbrand" is and I'm not in any class. Just seems to work out that way. 
