Considering I aim modern desktop and mobile browsers, is there any practical difference in which one of the following css rules to use? Are there any hidden caveats?
.modal-1{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}
.modal-2{
position:fixed;
width:100%;
height:100%;
}
.modal-3{
position:fixed;
min-width:100%;
min-height:100%;
}
And a sub-question: what if everything is the same, except position:absolute;, when I want to make a modal div inside another (relative or absolute positioned) div and not body, is there any difference in css rules then?
Based on your classes used with a div:
Using modal-1 seems not to add any margins at all and is fully responsive due to its nature.
modal-2 and modal-3 inherit parent margins in Firefox, not in Chrome though, body { margin: 0 0 0 0; } fixes it (in my test case body was the parent element.)
Using top, right, bottom, left appears to be the most fail-safe choice, in my opinion it's best used with #media (min-width:***px) query to help arrange the layers within the fixed container.
As for your sub-question, any child element (sub-modal) should best use position: relative and set itself within using top, left, width and height. You could also manipulate overflow in case of troubles.
I hope that answers your question(s).
your main container dive should have position:relative and if you want full screen width:100% and height:100% with display:block ...
for position children div inside parent they should have absolute position
Related
An element is positioned absolutely and is made to full width using the left and the right properties set to 0
The problem is, when the window is zoomed, the element is made full width only to viewport. The below images explain the problem in detail
Is there any CSS hack to fix this issue.
JSfiddle to test: http://jsfiddle.net/vaakash/kdgJp/
You can do the following:
body {
position:relative;
float:left;
}
#header {
width:100%;
}
http://jsfiddle.net/PNaSz/
This will make sure the absolute element orients against the body in width (because its positioned relative), float:left will make sure the body is as wide as the content.
Is there a reason you can't use width: 100%;?
I have a container div, conteining 3 divs, a sidebar, a content and a header while all the elements inside are rendered as they should (they are positioned as "relative" if this may influence in my problem), the sidebar and the content render min-height: 100% as I need, the div containing them won't adapt to those 3 elements, acting like overflow: visible, while I don't want the content to overflow, I want the whole page to scroll and the div to adapt to the content size...
I tried to put my code here : http://jsfiddle.net/vhZV6/
I also cut out some of the graphical tweeks wich should not influence at all... here is a screen of my problem too:
I don't need old broweser integration on this matter (as IE 5/6).
Try adding overflow:auto; to your .container div.
I would try this. 'height: auto' is no longer set once any of the height elements are messed with.
min-height:100% !important;
height:auto !important;
It's a very simple problem: your inner divs are floating. The solution is very simple, just add to your css the following (this is the best solution whenever you have floating divs):
.container:before {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
I have some questions regarding the following css that I found:
html, body {
height:100%;
min-width:100%;
position:absolute;
}
html {
background: none repeat scroll 0 0 #fff;
color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:15px;
}
is it necessary to have height and min-width to 100% on the html and body? What's the benefit?
what is the reason for using position absolute?
why did they set the background/color/font on the html and not the body? Is there a difference? Or is it just preference?
It's usually unnecessary. However, there are a few times where you may need it. For example, maybe your base/site-wide website css file specifies the size to be different (you know those sites where the sides are just borders, usually blogs? Those widths have been resized down). Note that when you have percent it's of the parent container. So Div A may have width: 100% but if it's parent container has width: 500px Div A will have 100% of 500px.
There is no reason for position: absolute on the html + body that I can think of. One side effect of absolute positioning is that the element nolonger "floats inline" with the rest of the elements (not sure how you would describe/word this).
For example, position: relative ignores absolutely positioned elements. So if you had Image A (absolute) and Image B (relative) and B had left: 10px;, Image B would be offset from the left of the parent, instead of where A would have been. Hopefully I'm making sense here.
So sometimes I just set "position: absolute" whenever I have a background image. If it's the first child, it everything will show up on top of it (since the new elements are "added on top" and ignore the absolute-positioned element).
The body will inherit those properties, and so yes it's just preference.
Setting the width or height of an element to 100% only works when its parent element is also at 100% of that dimension. Which means that if the body or even html tag isn't, for some reason, at 100% of either height or width, an element inside it with those properties will have 0 height or width.
For example: http://jsfiddle.net/KZaum/
I’m trying to achieve a specific layout which I’ve tried to show here: http://tmp.grytoyr.net/layout/
Basically I am trying to have multiple absolutely positioned elements with their own scrollbars. The challenge is to get the height of the elements correct, so that the scrollbars look natural. Another requirement is that left and right should always occupy 50% of the main content area.
In Chrome and Safari on Mac it works as expected, but in Firefox the scrollbars for the scrollable elements that have been pushed down by the headers (menu, left, right) extend below the viewport.
I am guessing this is because Firefox interprets height: 100% on an absolutely positioned element with some content above it a little differently than Webkit browsers do.
Is there any way to achieve the desired layout in all modern browsers?
Edit: I’ll answer my own question since I just figured it out.
I had added "box-sizing: border-box" which I thought Firefox supported by now, but it turns out I needed to add "-moz-box-sizing: border-box" too.
Edit2: But be sure to check out the answer by rgthree, since that is a much better way to achieve the layout I wanted.
Yes, you cannot use height of 100% in this case, as that will be the height of the container and you have additional elements/padding/offset that is contributing to your overflow.
For instance, if a container's height is set to 500px, and you have a child content element with a height of 100%, its height will also be 500px. But if you start that child element under another element that is 50px (say, like a header in your example), then the total height is 550px (50px header + 500px "100%" content).
What you can do for your example, since everything is layed out absolutely, is use top/right/bottom/left. Here's the concept:
/* The container -- height/width doesn't matter */
.container {position:relative; height:500px; width:500px;}
/* A 50px tall header -- notice no width is set, but left/right is set to 0 */
.container > .header {
position:absolute;
top:0px;
left:0px;
right:0px;
height:50px;
}
/* The content under the header -- notice no height or width is set */
.container > .content {
position:absolute;
top:50px; /* 50px top to be below the header */
left:0px;
right:0px;
bottom:0px; /* Bottom is 0 so it will stretch the rest of the height */
overflow:auto;
}
Now, just apply this technique to all your nested items and you'll be in business.
I'm trying to understand CSS positioning and I'm having trouble figuring out why a simple change that apparently should have no effect on the layout is causing a very disruptive change. I'm obviously missing something.
The initial objective was to place an inner div
vertically and horizontally within another div. That was fairly simple:
html, body {
margin:0;
padding:0;
height:100%;
}
div#container {
position:relative;
background:#4444ff;
margin: 0 auto; /* center, not in IE5 */
height:80%;
min-height:80%;
}
div#childDiv {
position:absolute;
background:#ff5555;
/* next we center it vertically and horizontally */
width:900px;
height:600px;
top:50%;
margin-top:-300px;
left:50%;
margin-left:-450px;
}
...and in the HTML page I used:
<body>
<div id=container>
<div id=childDiv>
test
</div>
</div>
</body>
which worked fine.
The curious part is what happens when I change the position attribute of the #childDiv div from absolute to relative.
My understanding is that first is should not affect the #container div at all since I'm changing only the position of the child element, and second that it should not change the layout since it is the only child element, its parent uses relative position and third I have not specified any offsets (tp, left, etc).
Instead, when I make this change, the parent #container is messed up (shows only up to the half of the viewport instead of 80% height as previously), and the position of #childDiv changes accordingly (also upwards, half outside the viewport).
My questions is: why does that happen? What concepts I'm not taking into account and why was the parent div affected by a change in the children's position setting?
If I remove #childDiv from within #container and place it inside body, then #container is no longer affected by that change so it seems something is propagating up in the DOM, which is odd to me. I've seen the same in firefox, opera, IE and chrome.
I have read W3C's spec on this topic but I haven't been able to figure this one out so far...
UPDATE: I created examples in JS fiddle to show the problem. You can see the original is here: jsfiddle.net/7Pr9y/1 and the affected one is here: jsfiddle.net/7Pr9y/3
Thank you!
Eduardo
When something is absolutely positioned, it is taken out of normal flow so its size, margins, etc. do not affect the things around it.
When something is relatively positioned, it is placed in normal flow (so its size, margins, etc. do affect the things around it) and layout is initially handled as if it were position: static, then it is moved according to the left, right, top and bottom properties.
It looks like your CSS got complex quickly because as soon as you positioned the child div absolutely, your container div would have disappeared, and putting percentage-based widths and heights on it wouldn't work.
The reason for this is that once you position something absolutely, it's taken out of the document flow, so your container div is now acting as if it contains nothing. If it contains nothing, unless you give it absolute dimensions (say, in pixels), you're saying "size yourself to a certain percentage of your container", which in this case, is the body element, which also acts as if it contains nothing.
When you start tossing heights and widths and min-heights on every element to compensate, especially when they are relative values, the results can become unpredictable very quickly. My advice would be to check out this reference on the box model by Chris Coyier: http://css-tricks.com/the-css-box-model/
It's super straightforward and uses some great diagrams to help visualize the different aspects of CSS positioning.
OK, I figured out why it becomes smaller when I change the size to relative.
Happens that because I have set the margins of the #childDiv to a negative value in order to center it, when I change it to relative that negative margin is taken into account when calculating the height of #container, resulting in a smaller #container.
I'm obviously a beginner in this, but seriously, it looks like CSS made it as complicated as possible to lay things out. No surprise most folks coming from table layouts start frustrated. :(
You don't need all these negative margin settings. Do the following:
html, body {
margin:0;
padding:0;
height:100%;
}
div#container {
background:#4444ff;
margin: 0 auto; /* center, not in IE5 */
text-align: center;
height:80%;
min-height:80%;
}
div#container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
div#childDiv {
display: inline-block;
text-align: left;
vertical-align: middle;
background:#ff5555;
width:500px;
height:200px;
}
I have used your code you provided and changed it around a little, to make the ghost spacer (the div#container:before) work.