http://jsfiddle.net/waitinforatrain/DSSPb/2/
I want to arrange a bunch of <li> elements which represent images in a horizontal scrollable container, like in the example above.
The tricks I've seen so far set the width of the container to be the width of the <li>elements. However, I have no way of knowing what the width of the container will be because the content is dynamic.
Is there a way to do this with CSS without knowing the container width?
Something like this, perhaps? http://jsfiddle.net/mattball/5JRdZ/
change ul and li display to inline-block
remove li { float: left; }
add ul { white-space: nowrap; } so the <li>s don't wrap to the next line when the <ul> is too narrow
Now your problem is solving the li { height: 100%; margin: 4px } causing the <li>s to be taller than the <ul>. (Here's the solution: http://jsfiddle.net/mattball/avTgR/ :)
Related
I am able to center horizontal list with text-align:center, but I wonder how can I keep it centered inside container, but has rows aligned left.
My container has percent width, so I need it working when resizing window and blocks are reordering
Please check the sample image below to understand my problem:
UPDATE:
Please find JsFiddle as per request
I need to center my <ul> inside div.container
Use this:
ul {
margin: auto;
}
li {
float: left;
}
See this fiddle:
You already know to center the <ul> with margin: auto;
The key is to adjust the <li> within it.
You can do that by using float: left;
Alternatively: you can set display: inline-block;
Both have a similar effect, but aren't identical. Play w/it.
By providing margins & percentage widths, you can play w/size and separation of the elements.
Since these are all block-level elements, they'll stack up & wrap automatically.
By floating or changing display of the <li> you keep them left-aligned within their parent element (the <ul>).
Also, by using separate CSS classes instead of targeting the <li> element directly, you leave things flexible in case you want to have a right-aligned list, or some other options later.
Wrap your boxes within another div.
You can then center that div with display: block; margin: 0 auto;, while keeping the boxes left-aligned.
I'm quite annoyed by allways manualy enter fixed width till div depending on how many letters a li tag contains
<div>
<ul>
<li>Home</li>
<li>Information</li>
<li>Contact information example</li>
</ul>
</div>
div{
background:red;
}
div ul li{
float:left;
}
This div will have same height as the list itself however the width will be 0. My problem is that i have to manualy fill in static values in the css file to adjust the div after li This might be okey in some situations but when your navigation is dynamicly generated its quite annoying.
give your div:
display: inline-block;
and that's it :)
here's a DEMO
Add the following to your CSS:
div {
overflow: auto;
}
this will cause the parent div to contain all the floated child elements (block formatting context).
The div will have the height of the of the floated elements instead of collpasing to 0 due to no content in normal flow.
See reference: http://www.w3.org/TR/CSS21/visuren.html#block-formatting
Note: Using display: inline-block will cause the div to have a shrink-to-fit width based on the width of the floated child elements.
I am currently creating a navigation bar for my site, and I've looked everywhere and tried some stuff but I couldn't figure out what I've fudged up :P
Anyways, I've got some boxes I named 'nav-box' and they hold the navigation elements inside them. I have these displayed inline-block so that they look like nav elements.
2 things now, the text inside these boxes are stuck to the left of the box, I have to have them centered. Alongside this, the boxes seem really big. Do i have to set their width manually or can I have css make them fit?
Here is the JSFiddle i have created with my code. I've tried adding 'inline-block' to both the element and it's parent container, but neither of them work for this situation :(
This is what I've tried:
.nav > .nav-content > .nav-inner {
width: auto;
float: right;
text-align: center;
}
As you can see that is my parent element holding the nav-box element and I added the text-align: center;, but it still didn't do what I need.
http://jsfiddle.net/qhPwt/
The text inside the boxes are not aligned to center because there is a margin-right being applied to the content inside the boxes.
Check this FIDDLE
CSS changes
.nav > .nav-content > .nav-inner > .nav-box > .nav-link:last-child {
margin-right: 80px; // Remove this style
}
I'm creating a multiple column list using the directions from this article:
http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
In a nutshell, it says to do something along the lines of this:
HTML:
<div class='block'>
<ul>
<li>
Item1
</li>
<li>
Item2
</li>
<li>
Item3
</li>
</ul>
</div>
CSS:
.block {
border: 1px solid black;
padding: 10px;
}
.block ul {
width: 100%;
overflow: hidden;
}
.block ul li {
display: inline;
float: left;
width: 50%;
}
And it works wonderfully, but I was mind-boggled at the overflow:hidden CSS declaration.
Without it, my outer div collapses like so:
http://jsfiddle.net/alininja/KQ9Nm/1/
When it's included, the outer div behaves exactly as how I would want it to be:
http://jsfiddle.net/alininja/KQ9Nm/2/
I'm wondering why overflow: hidden is triggering this behaviour. I would expect it to cutoff the inner li items instead of forcing the outer div to expand to the necessary height.
Thank you for looking!
Anything inside that might be floating does not get clipped unless you have the overflow set to either hidden, scroll or auto. The real magic of the method is that without having given the element a set height, when you set overflow to hidden it takes on the height of the inner elements.
Here the div would not wrap around the img because the img is floating.
<div><img style="float:left;height:100px" /></div>
Here the div will actualize the height of the img now that is has a proper overflow.
<div style="overflow:hidden"><img style="float:left;height:100px" /></div>
If you were to give it a set height and then set overflow hidden it would chop anything that would otherwise have overflowed outwards.
<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div>
Note that in a lot of cases these techniques can be used to avoid clear:both type extra markup.
The overflow: hidden; is there to contain the floated lis. overflow: hidden; creates a new block formatting context - and that's what elements with their own block formatting contexts do - they contain floats.
I'll point to another answer here on StackOverflow that explains this a little bit more: Adding CSS border changes positioning in HTML5 webpage
With overflow:hidden, the contents do not drive/push the dimensions of the UL. The UL dimensions override and ignore whether or not the contents fit inside it.
Without overflow:hidden the content and their behavior may or may not drive the overall dimensions of the UL. This is mainly because the UL is is more of a container who's boundaries are set/influenced by its contents. With overflow hidden, the UL acts more as a view-port with overriding dimensions, not so much a container.
I have a div that encapsulates many unordered lists (ul). I have each ul set to "float:left". And I also have the parent div that contains them set to "overflow-x:scroll". What's happening is the ul's are wrapping when they hit the edge of the page and not staying side by side to take advantage of the scrolling property of the parent div (the scroll bars are there). Why? How can I fix this?
Thanks for any help.
you need to insert those uls in another div, to which you'll give width=[width of ul]*[number of uls]
http://jsfiddle.net/seler/gAGKh/
or count total width of uls
http://jsfiddle.net/seler/gAGKh/1/
You can set your list items to display: inline-block, then use white-space: nowrap. Works in most modern browsers.
http://jsfiddle.net/gAGKh/22/
Because you floated the ULs, they don't exist in the document flow anymore so they won't expand the parent div (hence the wrapping.)
Try setting an explicit width on the parent div that allows for all of them to exist side by side.
ALSO, if you aren't clearing the ULs in the parent div then you'll more than likely run into issues there too, vertical ones. Make sure you clear your floats :)
You need to:
Make the <li> also float.
Set fixed width to each <ul>.
Set fixed width to the containing <div>, enough to hold all the lists.
For example:
ul { width: 250px; }
li { margin-left: 5px; }
ul, li { float: left; }
div { overflow-x: scroll; width: 750px; }
Test case.