can we take this existing fiddle (solution) for a bar chart and apply different height values,
http://jsfiddle.net/RYBFF/1/
what actually happening is the bar items are anchored to top of ul container whereas it should be anchored to the bottom when we scale items.
li.different {
height: 80px !important;
}
for instance applying different class to one of the list items will demonstrate the problem.
change display mode to inline-block
remove float: left;
And eventually add some margin to the first item in the list.
vertical-align only applies to inline or inline-block elements. Your list items were block elements.
fiddle
Related
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
Why when overflow:hidden is added in .navbar it works and without it the left side is white and the text is on the right side? Also, how and what is the purpose of applying overflow here when this is what I read about the attribute:
Note: The overflow property only works for block elements with a
specified height.
It's all because of block formatting context
If you remove overflow: hidden everything for that element appears on left because children elements have float property and there is no place where float is cleared.
For block formatting context you can refer this answer Why does overflow hidden stop floating elements escaping their container?
Also please refer : Parent Height doesn't follow their float children
First of all, when you remove overflow:hidden from the navbar, it makes the menu items disappear because there is no background in .navbar at that time and both a and button tags has color: fff; which is same as page background color.
Now, why we need overflow:hidden; in .navbar
Its because all the child inside .navbar has float property associated with them and floated elements don't take any space in normal document flow. Now if the child elements are not taking any space then the height property for parent (.navbar) is 0.
To maintain the height property of parent class when child classes are floated, we use overflow: hidden; property
Hope it help
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 would like to position a list beside a floating box. The Problem ist, that the bullet points of the list items are displayed outside the principal block box. So the text of the items is aligned with the normal text, but not the bullet points.
Here's the code example: http://codepen.io/Juuro/pen/oelqm
If I use list-style-position: inside; it works as expected for items which are single-lined.
Another solution would be to put the whole list in a additional box or give it display: inline-block;. But then the list items would float around the box anymore.
My requirements are:
Bullet points beside the floating box should indent like without a floating box.
In multi-line items the bullet-point should stay "outside" of the text.
The list should still float.
Is that even possible?
Is this what you want? http://codepen.io/anon/pen/ueaiy
It seems your li in the stylesheet was inside the ul.
seeing your example and if not indented to decide what you can specify dimensions of the container tightly with a picture like this DEMO
.imagebox {
float: left;
margin: 0 10px 10px 0;
height: 200px;/**add**/
width: 170px; /**add**/
}
or in this class to the IMG tag to set a fixed size
I'm trying to add vertical space between some sections of a page by adding a bottom padding to the section containers, but I can't get it to work. I assume that it has something to do with the fact that I've got un-ordered lists inside the containers and that the list items are floating (using float: left;).
I have also tried with margins and what not, but to no avail.
Either float the containers left or set overflow to "auto." With either solution you will still need to set a margin to create the aforementioned spacing.
#developers, #contributors, #playtester {
overflow:auto;
}
Floating your containers left, as well, and then adding bottom margins should fix it
#developers, #contributors, #playtesters
{
float: left;
margin-bottom: 30px;
...
}
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.