I have a div and that div has a height of 200px. Inside the div there is text and I don't want the div to have scrollbars therefore I've set overflow:hidden.
Now, inside that div there is a also a list, acting as a dropdown box. When you click on the list/dropdown box, I want it to come on TOP of the main div.
Here is an example with the main div to overflow:hidden:
And this is an example without overflow:hidden. So I want the following but the text not overflowing.
jsFiddle: http://jsfiddle.net/w8kQA/
You could set the overflow:hidden on the element inside the box, instead of on the box itself:
http://jsfiddle.net/w8kQA/1/
In the comments above, you mention that you have 20 boxes inside a div.
If that is the case then I would wrap the #box and the .list inside of a holder div. That way you can achive your layout and still have multiple boxes in a div.
JSFiddle: http://jsfiddle.net/w8kQA/2/
You can also reduce the max-height of your list to fit into the div.
http://jsfiddle.net/etienne_carre/w8kQA/4/
You can do it like this: http://jsfiddle.net/w8kQA/7/
Related
This is live demo: http://jsfiddle.net/9Y7Cm/5/
Everything is fine with that, until the text width there is higher than the div width.
If you will add some text there, the line will break and the text will be displayed under of the image instead of next to the image (as you can see in my first fiddle).
Here you can see what happends, it text width is higher than div container width:
http://jsfiddle.net/9Y7Cm/12/
Is there a way to fix that?
Give your right side content a width and float it to the right, like so:
http://jsfiddle.net/9Y7Cm/14/
For a cleaner result, i suggest you separate both sides of your content, left and right, with a class and width and then float them to set them side by side.
Just remove display:inline-block; from the CSS for the span element (jsFiddle example).
More information on display:inline-block.
inline-block: This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
The problem is with display:inline-block for the span. Remove it, and the text will be on the same line
I am trying to be clever and position a FaceBook Like button iframe inside a sentence but it aligns oddly, see screengrab below.
I'm sure I'm being dense but without styling the iframe as a block element how do I re-position it?
I tried display:inline-block but it didn't respond to margin settings. I also tried increasing the paragraph's line-height to match the iframe but that didn't help.
Wrap it in a DIV and adjust margin-top on the DIV.
vertical-align:middle did the trick.
I have a div tag with fixed width. Now i want that if there is a condition of overflow then text should go to next line automatically. I used overflow:auto but its giving a horizontal scroll bar. There should not be any scroll bar, text should go to next line.
Any idea how to do it with css???
If you want a scrollbar to appear for when text fills more than the height of a div, you can try:
overflow-y:auto
You might also need word-wrap or white-space css attributes?
to add to the link David's pasted, if you want the vertical scrollbar to show up, then the height property of the div should be fixed.
Hi I have a simple sidebar inside a div which has height:100% and I need the sidebar to float as high as the container becomes. Since I have a content div, and the content div will change on each page, it's inside this parent div which ideally should change in height and thus the sidebar would run the entire height of this parent div.
http://mibsoftware.us/clients/weber/?page_id=2
However in the above link I'm unable to get that to work. What am I doing wrong here? Any help would be greatly appreciated!
See:
Equal Height Columns with Cross-Browser CSS
Get it to float BELOW the bottom of that div (possibly in a simillar div), and then set it's position to relative and top: -height_of_div px.
I have one div element at the top of my page that is set to overflow:visible. Immediately beneath it, I have the page content.
I do not want the top div to expand, because of aesthetic reasons, but I would like the content below to treat the overflow from above as it would a block element...by "clearing" it.
I know about CSS clear...but it doesn't seem to apply to overflow.
Is there a correct method to do this?
The overflow:visible doesn't really have anything to do with the issue, as it's the default.
Set the height of the top div, and put another floating div inside it for the content. The floating div will expand outside the top div, and you can use the clear style to get below it.
try
overflow: auto;
it will expand the div and should solve your problem