Archive

Posts Tagged ‘top’

Div on top of another div using: position v.s. margin

October 11th, 2012 No comments

Following my last post, we can easily use CSS properties position + top | bottom | left | right or margin-top | -bottom | -left | -right to put an element on top of another. And we found that using margin is safer, but not for some cases when you want to ‘move’ a element with background, the background would not cover the element underneath. This causes problem especially for pop up menu.

In the example here, we want to move the yellow box ‘downward’ and cover the red box:

original:

Yellow
Red
<div class="yellow">Yellow</div>
<div class="red">Red</div>
.yellow{
    background:yellow;
    width:100px;
    height:100px;
    margin-bottom: -50px
}
.red{
    background:red;
    width:150px;
    height:150px;
    margin-left:50px;
}

margin-bottom:

Yellow
Red
.yellow{
    background:yellow;
    width:100px;
    height:100px;
    margin-bottom: -100px
}
.red{
    background:red;
    width:150px;
    height:150px;
    margin-left:50px;
}

as you see here, because margin actually deal with the ‘real’ element, the element after it would cover it by default. The z-index would not help because HTML see them as the same base element with adjacent each other

position+top:

Yellow
Red
.yellow{
    background:yellow;
    width:100px;
    height:100px;
    position: absolute;
    top: 0px;
}
.red{
    background:red;
    width:150px;
    height:150px;
    margin-left:50px;
}

as we discussed before, position + top | bottom | left | right only move a ‘image’ of the element, so the ‘image’ can easily cover the ‘base’ of the html. In most case, we would use wrapper with position:relative wrapping the boxes so the absolute properties would not causing the yellow float out of the wrapper:

<div class="wrapper">
    <div class="yellow">Yellow</div>
    <div class="red">Red</div>
</div>
.wrapper{position:relative}
.yellow{
    background:yellow;
    width:100px;
    height:100px;
    position: relative;
    top: 0px;
}
.red{
    background:red;
    width:150px;
    height:150px;
    margin-left:50px;
}

with the a:hover or li:hover, this has been greatly used for the CSS only drop down menu, where the yellow div is only displayed on top of other html base elements when the mouse is on top of the menu.

Text on top of table and bottom+position versus margin-top

October 9th, 2012 No comments

If we want to put some text(for example some comments or a text-watermark) on top of a table or a some another content, we can use either position+bottom or margin-top properties to move a div or a span upward and cover the table. You can also do the same to move left, right or downward.

position+bottom:

.floatingBox { 
	position:relative; 
	bottom: 450px; 
}

Move text using CSS position and bottom properties

Move text using CSS position and bottom properties


However, it leave the space of original div empty. It is because moving something with relative positioning doesn’t move the box at all, only a “picture” of the box. That’s why the “space” is still there.
It may not be a problem when browser the page, since it’s at the bottom or somewhere you can make sure the visitors not seeing. When the page are designed to be printed by printer, the space will be a disaster. Luckily, it can be easily fixed by the another method:

margin-top:

.floatingBox { 
	margin-top: -450px; 
}

Move text using CSS margin-top properties

Move text using CSS margin-top properties


Compare to position, margin is moving the actual element away from the border of the element (or ‘toward’ to the border for negative value). Using margins to push box content around is safer.

Vertically align a div at bottom inside another div

September 14th, 2012 No comments

Following my last post, I have to vertically align a text-filled div into at the bottom of another div or td.

Div is displayed on the top of it’s container by default. Even there’s a CSS property vertical-align, it cannot be done by itself.

In most cases, the easier way is to change the outer div to table and simple use valign=”bottom” for td.
If this cannot be done easily, then we can nail it in 2 ways, as I know:

  1. using absolute/relative position:
    <div style="height:200px; background:yellow; position:relative">
      <div style="background:red; position:absolute; bottom:0">
        blah blah blah
      </div>
    </div>
  2. using display:table-cell; vertical-align:bottom properties:
    <div style="height:200px; background:yellow; display:table-cell; vertical-align:bottom">
      <div style="background:red;">
        blah blah blah
      </div>
    </div>

However, when I come to this problem with the JQuery I used, it becomes either the JQuery or the format not working. Again after some Google I got this:

.containerDiv:after{content:""; height:100%;  width:0; display: inline-block}	
.insideDiv{display: inline-block; vertical-align: bottom}

This magic pushing a empty text at the end the the wrapper div so the inner vertical-align work, well in which I don’t know how it works… I tried to simply put some text at the end but it doesn’t help…