Lists side by side Options

[Terminator]

I am making a site map at the bottom of the page, I was thinking of doing the links as unordered lists but I want them to appear side by side, and then on top of each other when resized to Mobile portrait view.

Kind of like this site map at bottom, except I wont use the plus/minus links when resized since I dont have that many links:

http://www.midas.com/newyork/store.aspx?sh...&dmanum=620

Is it best to wrap these within DIV's? Each unordered list within its own DIV? And then should I wrap all 3 or 4 of the div/lists in their own DIV Container tag, or just within their own section?

Also would these be displayed as inline block and float left?

And should I not use unordered lists? I was going to do those because they seems easy to style to look like that Midas site map with left aligned lists.

I styled the site map section with a background color and borders like this site does.

thanks

This post has been edited by Terminator: Nov 27 2015, 06:58 PM

[pandy]

appear side by side, and then on top of each other when resized

Float them.

[Christian J]

Float, display inline and inline-block should all work. It depends a little on what else you want to do with them.

[pandy]

Inline-block, but not inline.

[Terminator]

thanks this is what I originally tried, but the issue was that when I added float: left and display: inline-block; to the unordered lists they displayed below the sitemap section, so they were displaying below the sitemap background color.

So to fix this I added the following code to the sitemap section that contains the unordered lists:

CODE

display: inline-block;
width: 100%;

I guess I just need to learn when it is correct to add display: inline-block; or display: block; I asked this last week in class but my instructor really didn't have an answer to that.

[Frederiek]

See https://css-tricks.com/almanac/properties/d/display/ .

Ans http://quirksmode.org/css/css2/display.html .

This post has been edited by Frederiek: Nov 28 2015, 04:12 PM

[Christian J]

I guess I just need to learn when it is correct to add display: inline-block; or display: block;

Block elements are not affected at all by floats (unless you use the "clear" property), it's just the inline content of the block element that flows around the float, as shown in this picture: http://www.w3.org/TR/CSS21/visuren.html#img-float2p (note how the floated IMG hovers in front of the first P element).

Inline-block elements are boxes with width and height that otherwise behave like inline elements, so they'll flow around a float just like inline content. If an inline-block appears next to a float or below it depends on the former's width, just like with long words (and if other content above it pushes it down, of course).

[pandy]

thanks this is what I originally tried, but the issue was that when I added float: left and display: inline-block; to the unordered lists they displayed below the sitemap section, so they were displaying below the sitemap background color.

So to fix this I added the following code to the sitemap section that contains the unordered lists:

CODE

display: inline-block;
width: 100%;

I guess I just need to learn when it is correct to add display: inline-block; or display: block; I asked this last week in class but my instructor really didn't have an answer to that.

Inline-block on the container is one of the ways to clear a float. Clearing a float makes the containing box stretch to include the float. Without clearing the float may hang out of the container, as it did for you.
http://css-discuss.incutio.com/wiki/Clearing_Space

It isn't about block or inline-block, but about what method you use to clear a float and to know when it's needed and when it's not.

[Terminator]

Thanks guys, I understand it better now after seeing those links.