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.
Related
Having trouble getting the black bar at the bottom of the slider to stretch full-width on the screen. It works on the left, but the right side is cut off at the container edge. Using Master Slider if that's relative info. Any tips on how I can get that black bar to stretch all the way across?
http://designatwork.net/51fifteen/
To fix the issue
Remove tranform property from the div having class ms-slide ms-sl-selected
Remove width property from the div having class ms-layer. As div is absolutely positioned, set left and right values to 0 to make it full width
Remove max-width and left from div with class ms-slide-layers also
Although I feel, structure is not proper, having relative positions within absolute creates problems. Still above fix can save you from re-write.
A few classes like ms-slide-layers, ms-inner-controls-cont and ms-layer have hardcoded values for left, width and, most limiting in this case, max-width.
I think this case would benefit from using the viewport width unit, vw by setting width: 100vw; you're telling it to be the width of the entire viewport.
Also, you don't need the padding and margin in 9999px. You can position: absolute the layer, have bottom: 0 and then use reasonable padding and align the text according to your needs to get a better, cleaner result.
First set a position (anything other than static) to its parent element. Then set the black bar's position to absolute. This way, it will be relative to its nearest parent element that contains a position. Next, stretch it out by either using height and width properties, or use directional positions (top, bottom, left, right). If youll use directional positions then use both left and right simultaneously and the black bar will expand across the screen.
I have a div, .instagram_grid which has margin-left and margin-right set to auto, is relatively positioned, and has a width which for browse sizes 900px >makes the div be centered nicely in the page.
when I have the simple structure in the context of the rest of the CSS for a single page, the no longer becomes centered at browser width >1684px. In the Fiddle that follows I only have two lines that modify the div as a whole (and one just sets the background to pink). There are no media queries present, which suggests that it is the effect of some unseen preceding div/element causing the behavior.
https://jsfiddle.net/ebbnormal/m561tpnL/6/
The behaviour is what is expected with that markup.
The element is centered, but then you use relative positioning to show it 500px to the right of where it actually would be.
The .calc-text div above the .instagram_grid div causes its parent to overflow by setting margin-left:auto while simultaneously setting left: to a negative value, which isn't valid CSS.
I have a problem regarding relative positioning. I want the body to have a background color of say, blue. Initially the page should be just of height 100% (that may vary from computer to laptop, of course, hence I can't specify a fixed height in pixels), thus the entire page should appear blue. In the middle of the page is an element, that has been set to that position by relative positioning (it can't be absolute, can it, in order to expand with its content). The element can expand vertically. If the height exceeds the boundary of the page, the page also should expand, the background of the expanded portion being still blue.
Now how do I achieve this? The only solution I can think of is to use relative positioning for the background element (which is blue and should remain blue on expansion). But for that, I must set it to the available height (relatively positioned elements cannot be assigned height through percentage value, so that rules out height: 100%). But the height itself will vary depending on the browser, viewport size, etc (and I can't use Javascript!). So how do I do this?
Is the height of the element in the middle known?
You might want to take a look at this http://css-tricks.com/centering-in-the-unknown/
A live demo that might help http://jsfiddle.net/thebabydino/7N4Xx/
The JavaScript is just for changing the height of the div in the middle.
I am attempting to make a fluid layout for an existing site. By changing the widths to percentages I have created an issue with my navigation where, when the screen size is adjusted, the child elements of the navigation also adjust. I'd like them to remain constant in relation to the parent element so that when the screen is adjusted, the nav adjusts while the children just scale to fit without changing position.
js fiddle here: http://jsfiddle.net/Xa99f/
Notice that when you adjust the screen width the child elements shrink/expand and even collapse under one another when the width is made very small.
Put another way, how would I create a fluid layout where I make the main element in question fluid (in this case nav) while keeping all descendants scaled relative to that without losing desired position?
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.