@Gingerbread You don't make a Codepen on the Forums itself. Go on Codepen and click New Pen at the top. Just type in your code and then save it, and share the link with us. Here's a tutorial if you need any help: Codepen Tutorial. Tell me if you need any help!
@Gingerbread Also, if you need to type code into the comment box on the forums, just use regular code tags or just click "Code" on top of the comment box.
Hello, thanks for the help!
It actually works if I restrict the size to the original box I had, too, but once I replace it with my li list it does the same thing!
Not quite, it doesn't work with my line items and still divides it in a strange way. I actually figured out now how to link to the original code I had, it's here:
@Gingerbread Yeah, this is what I have: http://codepen.io/anon/pen/GJjxc. I don't think this is possible with those dimensions because the ul needs more space to fit and also, if I try using overflow: scroll, it still needs more space (http://codepen.io/anon/pen/CymiH). So I think you need more space in order to successfully handle this.
The fact is that you have a couple of extraordinarily long list items there that just aren't going to fit inside the div you want unless a very small font-size is used.
@Gingerbread, Here's a pen showing different techniques. In each case I used the dimensions you gave above. The font-size used is going to vary depending on the font you specify (I left default san-serif).
The first is just a replica of your image. The reason for the spaces is that a float will not render higher than a previous float - so the long list items are creating the spaces.
The second shows two lists with an equal number of list items. But because the li are of different length, you'll wind up with different length lists. This assumes that the lists are dynamic - if you're hard coding them, you could alter the number of items each list has.
The third is a simple single full width list - might be the best option. It would need a slightly smaller font-size to fit everything however.
Note that in the future, or now if you want to use browser prefixes, you could use css columns to achieve your orginal desired look. The fourth example shows this (with prefixes)
Hello, just recently found this site. It's neat!
So, I have an annoying problem:
My lists add unwanted spacing in between the lines. I think it wants to 'equal it out' - Whatever it is, I want to get rid of it.
Orange is the background color for the
<
ul> list, on a yellow div background, so you can see better.
The HTML (look at source, I don't know how to make it appear as code, it automatically formats):
The CSS:
The Problem ( picture): http://imageshack.us/photo/my-images/9/67490038.png/
See the annoying space? Tried some things such as making the
<
ul> tags on the same line, didn't work.
It's on wordpress in the text edit tab for the page, in case that makes a difference.
@Gingerbread Can you make a Codepen so it's easier for us to see the problem?
@srig99, how do you do that? I clicked the 'code' button when I highlighted the html, but it formatted anyways.
@Gingerbread You don't make a Codepen on the Forums itself. Go on Codepen and click New Pen at the top. Just type in your code and then save it, and share the link with us. Here's a tutorial if you need any help: Codepen Tutorial. Tell me if you need any help!
@Gingerbread Also, if you need to type code into the comment box on the forums, just use regular code tags or just click "Code" on top of the comment box.
OK, thank you. The code tag seems to only work on the CSS for some reason, not the HTML. But that doesn't matter.
I made a codepen: http://cdpn.io/khsgF
Cool thing! Can you help?
@Gingerbread I just made this: http://codepen.io/srig99/pen/wdqpE using the tutorial that I found here: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/.
@srig99
Hello, thanks for the help! It actually works if I restrict the size to the original box I had, too, but once I replace it with my li list it does the same thing!
@Gingerbread So it works for you? All good? Anything else?
Not quite, it doesn't work with my line items and still divides it in a strange way. I actually figured out now how to link to the original code I had, it's here:
http://codepen.io/anon/pen/khsgF
I think it might have something to do with the 'strong' tags?
@Gingerbread Well, here's the one without strong tags: http://codepen.io/anon/pen/crifA and here's the one with: http://codepen.io/anon/pen/jApou. They look fine to me. What about you? Is this what you wanted?
@srig99 First of all, thank you for your patience. Second of all, the pages you linked claim there's nothing there. :(
@Gingerbread Try now. Sorry for that!
Hello, @srig99 Can you put it in a box with this size: width:395px; height: 140px;
It seems to be messing up with that size.
@Gingerbread Yeah, this is what I have: http://codepen.io/anon/pen/GJjxc. I don't think this is possible with those dimensions because the
ulneeds more space to fit and also, if I try usingoverflow: scroll, it still needs more space (http://codepen.io/anon/pen/CymiH). So I think you need more space in order to successfully handle this.Is there a workaround? Should I perhaps make two separate Divs and have a separate list for each? Those dimensions are important :(
Edit: unfortunately, it seems to not work.
The fact is that you have a couple of extraordinarily long list items there that just aren't going to fit inside the div you want unless a very small font-size is used.
@Gingerbread, would This... work for you?
@Gingerbread, Here's a pen showing different techniques. In each case I used the dimensions you gave above. The font-size used is going to vary depending on the font you specify (I left default san-serif).
The first is just a replica of your image. The reason for the spaces is that a float will not render higher than a previous float - so the long list items are creating the spaces.
The second shows two lists with an equal number of list items. But because the li are of different length, you'll wind up with different length lists. This assumes that the lists are dynamic - if you're hard coding them, you could alter the number of items each list has.
The third is a simple single full width list - might be the best option. It would need a slightly smaller font-size to fit everything however.
Note that in the future, or now if you want to use browser prefixes, you could use css columns to achieve your orginal desired look. The fourth example shows this (with prefixes)