What is the workaround to allow scrollable overflow with elements positioned negatively from left and top?
Like here in example (jsFiddle), only 3 of the red squares are visible and scroll is not toggled. Although there are 6 of the squares, 3 of them positioned negative of top.
The only way I can think of is to wrap the squares in a div the same height as them and use JQuery's scrollTop() method: http://www.w3schools.com/jquery/css_scrolltop.asp but this will also force a horizontal scrollbar beneath the wrapper div... short answer: no CSS-only solution, and positioning them absolutely obviates the scroll for this solution - try floating left and clearing each row if you want to use this method.
I had the same problem and the only solution I could find is setting min-height & min-width using JavaScript (I wasn't using jQuery at all on this project).
You need to wrap it another div and give it overflow property.
http://jsfiddle.net/pb4bh/1/
Related
I'm building a website with fluid layout and I want avoid things like setting dimensions. I'm having success in almost everything, but I have a div that doesn't work as expected. See this link: http://cssdesk.com/Bshqe.
I expect that "div_botao_comecar_convite_cadastro_b" were placed to the right of "div_descricao_curta_convite_cadastro_b", but it was placed below this div. I want that the div be placed at left.
As I say, I don't want set a width for anyone div. Sorry for bad english. Thanks in advance.
If you don't want to set a specific width but want the children elements aligned horizontally, use css3 flexboxes -
apply display:flex to #div_elementos_convite_cadastro_b and adjust the other css accordingly....
demo
more about flexboxes # CSSTricks
I have a div with horizontal overflow that I can scroll horizontally.
I want that the content of this div is already scrolled all to the right and that you have to scroll to the other direction instead. Is there anything possible to do with CSS? Relative positioning wouldn't be that comfortable because the length of the div's content varies.
Use text-direction:rtl Simple demo
With position: absolute, you place an element by defining one of it's corners (often using the top and left properties). Is it possible to place it by defining it's center? (without knowing it's width/height?).
I have answered a similar question with this jsFiddle link
Link to the similar question with my answer: Position the center of an image using css
You can then use top/left coordinates using pixels, and it will use the center of your object no matter which width/height and this may be dynamic fit to content. One problem may be you need to set some z-indexes and styles so the other wrapper divs won't bother the rest of your content, this may be a drawback to use this approach.
The solution lies in the fact to use a wrapper div, with the real positions, and within that another wrapper div containing styles: position: relative;padding-top: 25%;margin-top: -100%;margin-left: -100%;. The margin-left style will apply easily, but the margin-top needs the padding, hence the extra wrapper div.
If you want another approach, you will have to use Javascript I suppose.
I have made a simple website and am happy witht he fact that I have had minimal use of div elements. I cannot explain why I do not like using divs, I just dont. That being said I have 2 elements side by side and when the browser shrinks the elements collapse one under the other (it's a paragraph with an image next to it, for ease of picturing).
Other than using position relative and adjusting pixels or wrapping the elements in divs is there a way to prevent two floated elements from changing position when the browser screen shrinks?
you could have a min-width on the container of those two elements. and if they aren't in a div, remember that <body> can also have this min-width
Try to give a width on the container for exampleboth the elements for example say
< class="element-container"> in order to seperate both the elements overlaying on each other.
Is there a way to target html elements that I don't want to affect the width of the page?
In other words, those elements wouldn't trigger the horizontal scrollbar, if they were to leave the browser box.
You could use the CSS overflow: hidden to keep them from affecting your layout.
You can use overflow:hidden on the elements you don't want the scrollbar on.
You can also use overflow-x:hidden or overflow-y:hidden Reference
Checking other sites structures, the solution seems to be pretty simple:
Wrapping everything in a relative positioned container(with overflow:hidden) lets the container grow with the contents of the page, while not letting the elements show out of it's borders.
Example:
http://jsfiddle.net/LnNQJ/1/