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.
Related
http://216.194.172.101/~culinare/index.php/terms-conditions-and-policies
The problem I'm having is pretty clear. The DIV that shows the gray box with the T&C stretches beyond the parent DIV that contains it. I've tried a number of variations in the CSS, and none of it seems to work. What am I missing?
Floating elements doesn't affect the size of the parent element. You can however make the parent contains the floating elements also, by using the overflow style:
.body_content { overflow: hidden; }
As the parent element doesn't have a specific height, the overflow style won't actually hide anything, it will just have the effect on the floating elements inside it.
The div with the class .body_wrapper has left: right.
So you have to do the next:
.body_content {
/* other styles */
display: table;
}
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 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.
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;
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/ :)