I am trying to float to right this menu list that will be dynamicaly loaded from a database, so I can't use a fixed height to the div containing the list as the list may may be longer than expected.
I have tried height="auto" for the containing div but it dont work once you float the list.
here is the code http://jsbin.com/iyitom/1/edit
The CSS attribute overflow is your friend here. You'll want to add overflow: hidden; to .newscontent
Related
I have an unordered list held within a div tag.
I have a tree like structure of list elements containing additional lists e.g.
<ul>
<li>
<ul>
<li>
</li>
</ul>
<li>
</ul>
When i hover over a list element that contains a sublist the sublist displays as a popup within the containing div element. This list can be up to three layers deep which presents a problem. The width i have to display my containing div is limited (170px width/400px height)so i'd like the pop up list elements to extend beyond the containing div however I'm struggling to get this working.
Basically I'd like the vertical scroll bar to be present but the width scroll bar hidden. Overflow on the width should extend outside the containing div. I've tried variations on overflow-y/x but I can't seem to get a balance that does what I need. i also haven't been able to get the pop up elements to extend outside the containing dev.
jsfiddle below to provide an example. And an image of the issue below:
http://jsfiddle.net/sapatos/tvZUX/1/
The scroll effect is due to the following CSS code:
overflow-y: scroll;
If you take it out, the scroll will go away for the width.
The idea of putting a sub menu within a submenu, etc.. can be seen in this example.
You can also try this DEMO
I altered your code to reposition everything using margin-left. But to be honest, your code is extremely vast, I would suggest taking a portion of it and then working on it. My last thing I want to note is to not get too confused when you start going further into the sub menus.. it is definitely a complex thought process.
EDIT Here is the last example I can give you... I do want to caution you that this may not be exact in every browser and there may be some better way to positioning everything. Here it is:
DEMO
This does however become much harder when the contents inside of the li tags are different. An example of this is when you have only one line of text vs two lines of text, which will render the absolute positioning utterly useless. It may be easier to style these vertically than horizontally and there could be a better solution but that could entail using JavaScript or a derivative of that language.
I have a layout like this.
How can I align each div.product_image to the vertical middle of <li> items if I don't have fixed height of list item or image and in the same time be sure that images won't overlap each other?
A table may work, but you won't like it. Then JS may help. The "normal" way to do it would need to use min-height & min-width in <li>, then using 2 divs. 1st position: absolute; 1px*1px top:50%;left:50%;, 2nd a relative div left:-Xpx; top:-Ypx; width:2*X; height:2*Y; (<- that would be static), then just place whatever you want inside.
So, I am working on a fansite, and I can't figure out why my "content" class div will not stretch. It's supposed to be 100% min-height, but it's not doing that. Also, I can't get it to stretch to the "column2" div, which is seated inside of it. Sorry if this is a simple fix, I'm very new to this. I wouldn't know where to start as far as posting coding for you guys to reference, so if you want, just go to here and view the page source.
Actually, it does stretch to the bottom --- the bottom of the html element. The problem is that your right column is position: absolute. Whenever you set an element to absolute positioning, it is detached from the normal flow, and so its container will not strech to contain it (which is a desired effect in drop-down menus and such).
Instead, you should use the float: right property on the right column and then add an empty div at the bottom which is clear: both, to ensure that the div stretches correctly.
I'm developing a web page that has an outer floated left column and a regular right column.
The right column then contains a list of items where each item has a floated left column and a regular right column.
My problem is when a list item's right column isn't tall enough, the next list item is indented to be to the right of the previous item's left column.
Convoluted? Okay, well I've posted the basic layout online.
I then removed items from a sublist so that one list item's right column isn't tall enough.
Finally, I tried correcting the problem using clear:both. The problem is that this clears the very outer floating div.
Is there any way to clear a floated element without clearing another, outer floated element?
In addition to your clear: both style, add an overflow: hidden or overflow: auto style to .MainRightCol to give it its own block formatting context:
.MainRightCol {
background-color:#f5f5f5;
overflow:auto;
}
This prevents the clear: both from clearing the .MainLeftCol float, because
The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.
and the context which .MainLeftCol lives in is body's (or the viewport's, I'm not exactly sure), so that's outside of .MainRightCol's and its .ListItem children's, which you apply the clear to.
See the updated demo.
i have a that contains a HORIZONTAL menu. the menu consists of an unordered list.
i would like the div to get a horizontal scroller whenever the menu exceeds the width of the <div>.
i tried using these CSS definitions for my <div>:
position: absolute;
width: 380px;
overflow: auto;
overflow-y: hidden;
height: 30px;
but than realized that since the menu is LIST, the different list items break the line whenever they reach the width of the <div> and move on to the next line, thus the browser doesnt see the need for a horizontal scroller (it doesnt display a vertical one as well because of the overflow-y: hidden; line)
any ideas how i can create a 1 line horizontal menu which will scroll horizontally only?
thank you all so much.
You might be able to use the white-space property to prevent wrapping. It's hard to know if it's applicable in your case without more code.
For your div, try:
white-space: nowrap;
As far as I know, there's no CSS-based workaround for this. However, you can use Jquery to solve it.
I made a little test for you to see:
http://sotkra.com/stackoverflow/cssdilemma/cssdilemma.html
The first example has 6 or so li's which exceed the width of the container div which means you DON'T need a scrollbar.
The second example has 8-9 li's which DO exceed the width of the container div which means you DO NEED a scrollbar.
Basically, you use Jquery to count the number of li's inside your div using size(). If they exceed X number, in my example's case 6 (the limit before scroll is needed), then a class is added to the ul to extend its width (.longer) so that there's no line break and the horizontal scrollbar appears.
It also adds another class (.taller) that increases the height to accomodate the scrollbar itself.
Cheers
G.Campos
You need to put one massive horizontal div inside the parent div with overflow: auto;
This will allow the to float left without wrapping to the next line, and it will only scroll when the boundary of the parent div is crossed.