I have a table that represents a calendar month. That is, each row is a week, and each cell is a day. I'd like to display the date number in the top left of each cell, like it is on most calendars (e.g., here), while still allowing other content, of an arbitrary number of words/lines, to be in the cell, but I can't get it to align. Any ideas on some CSS (or changes to the HTML structure, if needed) that can make this work? Here's some example code.
Thanks!
You can easily do this by setting the parent element (the td) with a position:relative which causes the child elements to be absolutely positioned relative to the element in question, because any absolutely positioned element is positioned according to it's closest positioned - absolute, relative, or fixed - parent. As correctly noted by Gaby aka G. Petrioli the spec I linked to does not define behavior of how table-cells should funciton when set to position:relative however all browser implementations do consistently implement this none the less and in a case like this I believe it appropriate to use this property.
So all you need in the end is have .day be position:relative and .date_num_container be set to position:absolute; top:0px; left:0px; and it starts working as you can see here:
http://cssdesk.com/ERpLC
try this
td.day {position: relative;}
.date_num_container {position:absolute; top:0; left:0;}
No need for absolute positioning
td.day
{
height:15%;
width:14%;
background:#ccc;
padding:0;
vertical-align:top;
}
div.date_num_container{
text-align:center;
}
Demo at http://cssdesk.com/WMFrA
I don't see the need for absolute positionning in your case.
You can take it simple:
div.date_num_container {
height:100%;
//remove absolute positionning
}
.other_stuff {
margin-top:25px;
text-align:center
}
Related
My html is as follows:
<html>
<head></head>
<body>
<div id="board">
<div class="person"></div>
</div>
</body>
</html>
Now here is my css:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#board{
position:relative;
height:500px;
width:500px;
background:yellow;
top:5rem;
left:8rem;
}
.person{
position:absolute;
top:34rem;
left:20px;
padding:1rem;
background-color:blue;
}
Now my question is why does the div with .person not positioned absolute to the div with #board? I feel like it should work since the parent element is positioned relative and then the child should position itself absolute to that parent element because of that. When I give .person div a crazy top, it still manages to break out of the parent div. Why is that? Thanks for any feedback.
I checked your code and it seems to be working fine, it's just on the .person you have top:34rem;
If you set .person top:0rem; and change the #board's top:#rem to any other rem value, you will see the .person moving with the #board
Also, using absolute position removes that element from the document workflow, so you can place it anywhere you like on the page. Negative values work as well. The only thing is, it looks for the first non-static element (the default position for elements) as a place to start, so you can use that one as a marker instead of the window itself. If you didn't put relative on the #person and had no other non-static elements surrounding it, it would go to the outermost element and basically use the webpage as the marker for its initial positioning. Since you used relative it starts its absolute positioning there because it is the first non-static element. You can still move it anywhere, it just starts there though.
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
See my case is, i have to center a div [DivFirst] inside another div [DivSecond].
and i had done it by setting the following css given below,
#DivFirst
{
width:500px;
height:500px;
position:relative;
}
#DivSecond
{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
after that, for a reason i had changed the DivSecond's position from absolute to relative,
as a result the design got collapsed, that is, the DivFirst's height got changed and the
inner div [DivSecond] was not centered properly.
I can go with the position absolute for the inner div, but i just need to know why this is
happening.? by the way if i am doing anything wrongly, kindly direct me in the right path.
[Note: Run the demo by setting both absolute and relative position for the inner div]
DEMO
In this case the negative top margin is pulling #DivFirst with it. You can stop this behavior by adding overflow: auto to #DivFirst.
Since you know the size of the divs involved you may want to consider just manually positioning them without trying to nudge them into place with negative margins http://jsfiddle.net/DDcfD/ :
CSS:
#DivFirst
{
width:500px;
height:500px;
position:relative;
background-color:red;
}
#DivSecond
{
position:relative;
background-color:yellow;
width:200px;
height:200px;
top:150px;
left: 150px;
}
That happens, because when you give #DivSecond position: absolute;, you position your target element relatively to its first positioned ancestor element, as long as it is not static positioned.
When you give your #DivSecond position property a relative value, you no longer position it relatively to it's ancestor element, but relatively to it's normal position, where it would be by default, which in your case means, you add 50% to the left and 'top' of it's normal position.
You can see examples here.
This is how i designed the layout for my header
<div id="DivHeader">
<div id="DivTop">
</div>
<div id="DivBottom">
</div>
</div>
Initially i had set the top property for the DivBottom as 35px.At that time i did not have DivTop. So now, after adding it, the top for the DivBottom has been calculated from the new child(DivTop) as DivTop's height + DivBottom's top. As a result the layout got collapsed like this. I need to place DivTop without affecting the DivBottom's Top, Any ideas.?
[Note : I did not use absolute positioning for my divs, Because in that case margin:0 auto wont work.]
You're using relative positioning, for which this is the expected behavior. See the W3 on relative positioning:
Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning.
So if you insert something above a relatively positioned element, it will first position according to the "normal flow", and then be repositioned according to your CSS.
You'll need to change the position to another value if you want the behavior you specified.
You would need to use absolute positioning:
#first
{
position:absolute;
left:50%;
margin-left:-5px; /* half the width value */
width:10px;
height:10px;
background-color:yellow;
}
http://jsfiddle.net/3u3gz/1/
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.