I am using a Navigation design from the site - CSSDECK.
I have done some modification and this is my code.
DOUBTS:
Why #siteNav and #siteNav ul not wrapping around lis. I have used height:auto in #siteNav and #siteNav ul. What I know is auto means browser will decide the height accordingly. But this isn't happening. WHY?
If I do overflow:auto or hidden in any of #siteNav or #siteNav ul. Then that block wrap itself around the lis. Why using overflow doing this?
This is because your lis are floated. When you don't have overflow: hidden;, then the lis are in a different context than the ul, so the ul doesn't wrap around them.
overflow: hidden; is a generic, known fix for containers to resize to fit their floated contents, but there are other methods -- for an extensive reference, see this.
just apply overflow: hidden; to your #siteNav ul
#siteNav ul {
overflow: hidden;
}
Because you establish a new Block Formatting Context when using overflow with anything ofther then visible (link to the w3.org specs). by- ChristopheD
read this
This is happening because lis are floated. Any wrapper containing floated elements will not wrap the contents unless overflow: hidden is applied to the wrapper.This is a common browser issue with floated elements. Also, overflow:hidden does not fix this issue in all browsers. Search for "clearfix" to see cross browser fix for this issue.
BTW, you don't need the height:auto there, block elements by default have width and height auto. If there was no floated element inside, then you would see the expected behavior.
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
Applying padding to child elements is making the child draw over the boundaries of its containing parent. Can you please explain the size consideration in margin, padding and content width.
If we increase the padding why don't the parent also resize to the accumulative size of all the children considering the child's padding also?
http://jsfiddle.net/NkXUW/4/
<div>
<ul>
<li><a>srikanth</a>
</li>
<li><a>sunkist</a>
</li>
<li><a>sunday</a>
</li>
</ul>
</div>
div {
margin-top:90px;
margin-left:90px;
background-color:#676896;
}
ul {
list-style-type:none;
}
ul li {
display:inline-block;
}
a {
background-color:#c34567;
padding:10px 10px 10px 10px;
}
What are coding practices that we need to consider to over come this problem.?
Ok guys I got lot answers that do work. Can anybody explain the parent size calculation based on child elements. what are characteristics of the child that are considered while calculating the encompassing parent's size. when the whole padding is considered when it not considered ?
the reason the child was overdrawing the boundaries of the parent is because the child is a tag of type <a> which by default is display:inline (you can see if that you go in chrome developer tools and see under computed style). an inline element displays like a line of text.. so the way it treats width and height and all that is very different than a block (a div for example is a block by default).
that being said, if you change the display setting of a to display:inline-block you get to keep the inline properties of <a> but at the same time also get the block properties, namely having a padding and width and height that is recognised by its parent node, which will then expand to accommodate it.
So there aren't any best practices about this. The only best practice is to understand what each display property mean (ie inline vs block vs inline-block) and put it to its proper use.
Use display:inline-block;
a {
background-color: #C34567;
display: inline-block;
padding: 10px;
}
SEE DEMO
An inline element has no line break before or after it, and it tolerates HTML elements next to it.
A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.
An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
http://www.w3schools.com/cssref/pr_class_display.asp
Can be solved without making any change in a tag. Just add overflow: hidden; property to div element.
div {
margin-top:90px;
margin-left:90px;
background-color:#676896;
overflow: hidden; /*expends its height if not fixed*/
}
Updated fiddle here: http://jsfiddle.net/NkXUW/52/
You must do add display: block; to <a> element to expand parent as you need.
See this fiddle
about different between margin and padding please read this maybe it help you
I don't think this is correct float your div wrapper
working demo
div {
float:left;
margin-top:90px;
margin-left:90px;
background-color:#676896;
}
hope this help you..
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.
In the code presented on the gist : https://gist.github.com/1341600
I am trying to use ul/li elements for grouping together some search form elements (instead of table).
When inspecting the output in the browser (Chrome 15/FF 7 with firebug) the ul element seems to have height 0 and the li elements are displayed outside of it. When I am commenting out the
float: left; statement from ul.search-inputs li CSS declaration then the height of the ul element is displayed correctly.
Could anybody point me to a solution in order to see correctly the height of the ul element?
That's not a bug, it's a feature!
The container of a floated element is shrunken so that other inline elements will flow around it (as per specs).
The 3 options in this case are to:
Use a known height value and apply it to the ul element.
ul { height: 150px; }
Use the overflow property on the ul element to force the browser to recalculate its height along with all the elements inside of it.
ul { overflow: hidden; } /* hidden is preferred as it never adds scrollbars */
Float the container itself. As there is no need to shrink it if it floats by itself.
ul { float: left; }
Add following css:
ul.search-inputs {
overflow: hidden;
}
Also see this jsfiddle.
This behavior complies to W3C spec. It's deliberately, but can be a bit confusing first time. Container of the floated content must be shrunken to allow another inline content to flow around it's own one.
E.g. if you have a
<p>
<img class="float" height="1000">
sometext
</p>
<p>
sometext
</p>
you probably would expect that some text from the second p flow image.
If you need a container with width and height you can either specify them manually, or apply css overflow:auto or float:left to 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.