I have two elements on a page that are aligned side by side to each other. The element on the left is fixed. My default screen resolution is 1280x800. As the screen resolution decreases to 1024x* or less, the left and right containers tend to overlap each other. Is there a fix to this problem? How do I do it?
-----------------------------------------------------------Edit-----------------------------------------------------------
Actually, the element to the right is assigned a pre-defined width and is set to margin:0 auto to keep it oriented to the center of the screen. The element to the right left is a vertical menu, and hence, I want it to stay fixed even when the user scrolls the page. Hence I've specified position:fixed for it.
You could do this client side, shrinking the containers appropriately in a window.onresize event handler.
If they're colliding because the screen isn't big enough to hold both of them, try setting the width of the elements to a percentage: <tag style="width: 80%;" />.
Related
I am working with panel sliding effects and stuck with situation like,
I have panel of width 150px with some content inside it, at some point if I reduce it's size by 70px for which I need to add sliding effect to that panel.
I wrote a code for this as,
VerticalPanel myPanel=new VerticalPanel();
myPanel.setWidth(150+"px");
// here I do some operations
myPanel.addStyleName("animated slideOutLeft");
myPanel.setWidth(80+"px");
when I reduce it's size it should automatically inherit "animated slideOutLeft" style with the inner content shown as it is. But in my case, "slideOutLeft" gets applied but inner contents doesn't remain visible and myPanel slidesOut.
It should slide out partially i.e. from 150px to 80px should be visible which is not currently taking place, instead it is sliding out full.
What is wrong in this.? How can I solve this issue.?
you can refer an example in https://agileui.com/demo/monarch/demo/admin-angular/index.html#/ where I want that same logoSliding at upper left corner effect which slidesIn and slidesOut.
When you reduce the width of a panel, children elements within that panel will reflow within the new width.
The example you point to hides some children elements when the panel's width is reduced.
So your code will work if the panel always contained children that fit within a smaller width. Alternatively, you can try setting overflow: hidden on your panel and settings children's width explicitly.
Long time ago I asked something similar. I would suggest you this topic in which you could find a possible solution combining percentage width and px min-width.
I've looked for hours on how to do this and have tried numerous experiments which get me some, but not all of the features I need on my landing page. Once I get the final piece of the puzzle in place, it seems to break other pieces I already have working. So it seems I can solve the problem in pieces, but I fail when I try to combine the pieces. Perhaps there's a conflict between them that can't be resolved? I'm pretty sure this is something that can be accomplished.
Let me attempt to explain what I'm trying to do:
I need two divs that sit side-by-side on my landing page when it's in a wide format (wider than 320px), but I want the two divs to stack on top of each other when the web page is not wide (< 320px). This is easy enough to accomplish by using: style="display:inline-block;float:left;" on each div and the two behave as I want. However, this breaks down when I try for other needed features, such as:
The contents of the left div (which is also the top div when 'stacked' due to a narrow browser window) need to be centered both horizontally and vertically within that left div in both the wide (>320px) and narrow (<320px) page formats.
The contents of the right div will be fixed at 320px wide and 420px high in both page formats as I'm using a facebook plugin to post status updates.
The left div size should scale dynamically with the browser window size as follows:
When the page width is > 320px, I want the left div to be the same height as the right div (420px) so that the contents in the left div will be centered vertically with respect to the contents of the right div.
When the page width is < 320px, I want the left div (which is now stacked on top) to only be 50px high, and the right div (now stacked on bottom) to remain fixed at 420px high.
The contents of the left div should always stay horizontally and vertically centered within that div no matter the width or height of the left div.
Can it be done with pure .css, or is a javascript hack necessary?
Hopefully I've explained it well enough that someone can help me out - it would be greatly appreciated and will allow me to move on with coding the rest of the page.
Thanks
My html page has some text, a search bar, a results pane, a navigation bar, and several other elements which i want to stay in the same position relative to each other.
My thoughts were to make absolutely positioned divs inside a relatively positioned container div, and then give them all min/max pixel values.
If i gave them min/max pixel values they wouldnt change size/positioning when the window was resized, correct?
But if i did this then wouldnt they not fit on monitors with smaller screens?
Forgive any inaccuracies in my statements, im still in the learning process.
If you set the height and width to a percent, then set a min-height and min-width, the divs will flex to the size of the parent div (which is dependent on the size of the parent window). The problem with that solution is that with smaller screen size windows, the absolute positioning for the elements won't allow you them to nudge down if the content of an individual div needs to wrap. You might be able to position your internal divs using the default browser settings and adjusting the margin values, and use float: left or float: right to position elements that need to be adjacent.
I'm working on a jquery slider, except instead of using a fixed-width container, I'm using the whole browser window. I've got jQuery set up to fix the margins to make sure it's centered correctly (although I just made them 500 pixels in the demo to keep it simple), but the problem is when I try to add more divs, it puts them on a second line instead of putting them beyond the edge of the browser. Here is my code: http://jsfiddle.net/JsPZT/
Eventually, I'll change the overflow so that they are hidden when they are beyond the edge of the browser, but for now, I just want to know that they are on the same line and not being pushed onto the second.
So my question is what should I change in the CSS to make sure the divs are always on the same line, even if it means pushing them beyond the edge of the window?
To get divs to stay on the same line when they are off of the screen, you have several options. Here's what I can think of off the top of my head.
Make the parent container always large enough to hold the divs you want to float. Theoretically, they shouldn't jump down to the next line that way, but I haven't tried it myself.
Another option is to use a combination of display:table and display:table-cell on the parent and children divs respectively. You just have to make sure you are supporting the browsers you want to support.
My last idea is to set each div with position:absolute. Then, just adjust the left attribute to 100% * x to place the div off the screen to the left or right. Depending on what you are trying to do, when they are off the viewable area you could just leave them at left:-100% or 100%. The same should work for the top attribute if you want the div to be off the screen above or below the viewable area.
Try white-space: nowrap;
If that doesn't work, you will probably need an inner div with a width that's the sum of all contained divs.
You need to add a width to your #track CSS. That is your wrapper, and without a width on that, the items will just overflow and drop to the next line. You'll probably have to add another div to set the overflow and get everything positioned correctly.
Please reference the following example:
In it, an outer div 200px wide is meant to establish our page width. It contains an inner div 400px wide, but with left/right negative margins of -100px.
My intended end result is that the browser register total content width at 200px, not 400px, but horizontal scrollbars show up as soon as the window is resized to less than 400px. What is going on here?
Negative margins don't adjust the width of the div. A negative left margin will move the div to the left of it's position in the flow of the page, and a negative right margin will allow other elements to overlap the right hand side of the div by the amount of the margin.
You can hopefully see what I mean in this jsFiddle.
From your question it sounds like you need overflow: hidden to contain a large div within a smaller one without spilling out of its boundaries.
Gareth's answer is correct. Even with negative margin, the div is still part of the standard page flow and will not be ignored with respect to layout. Genuine page content cannot be ignored for scrolling purposes.
However, if you're doing this for an aesthetic, such as having a shadow down the sides of the page that extends beyond your max width, this can be achieved with a background - this question should help.
as Gareth already mentioned, margins do not affect the box size. The solution is rather simple. The outer container needs to be 400px, this is what is going to trigger the horizontal scroll bars. The inner container needs to be 200px with 100px left and right margins. When you resize the window, the scroll bars appear as soon as you have gotten smaller than the outer container.
http://jsfiddle.net/58VFB/
Try adding this to your CSS...
body {
overflow-y: scroll;
overflow: -moz-scrollbars-vertical;
}