Thursday, September 10, 2009

CSS Center Float Horizontal

It is not easy to make center floated elements. but it is not true we can make it by having a group of buttons for a menu and it can be build by them fluid in width then it would be nice and make them float in the center of page. And it is at a problem if the floats have a width because we can ascertain the main parent width and use margin auto to center the whole block.
The premises is simple and basically just involves a width less float that is placed 50% form the left using position:relative.the nested inner element is reserved and negative relative position of 50% is applied. This has effect of placing the element in the center. Relative positing maintains the flow and allows other content to flow underneath.
Drawback:
The drawbacks are mainly that when the floats wrap at shorter screen widths then the element that has wrapped will not align to the center. That does not seem to be much of a problem to me but you may think differently. In a fixed scenario there will be course be no need to wrap and will work fine. There is also a horizontal scroll bar problem where the width of the centered floats are more than half the width of the container that they are centered in and a horizontal scrollbar will appear on the window at smaller screen sizes. This can be cured by applying overflow: hidden to parent container and should really not be much brother.
Another option:
We can achieve similar effects by not using the floats but by display: table for mozilla and using display: inline-block for all IE. IE only understand display the inline-block on inline elements. This is also inconsistency in IE& and IE8 has support for inline block anyway.
There are 3 ways for blocking of centering a block: centering with margins, centrering with percentages, or centering with absolute sizes. The first method seems to be work fast.
There are multiple techniques for centering a block element; ant the choice for the technique depends on whether you have the size set in the percentages or in more absolute values.
Centering the entire page contents
This technique is particularly useful when we want to center entire pages contents. Unlike the centering with absolute sizes method below, this method should prevent the negative left margin from making the left hand area of the element inaccessible in narrower browser windows.
To draw fixed shapes all we need to do is specify the width and height of the area. Then adding the padding and border to the box which will surround the content. Padding is the distance between the content and the border. The margins we specify will place the box at the specified distance form its neighbours.we can set the margins on all four slides of box and they can all be different sizes to suit. If we don’t know the size of the content we can set auto and the box expand s required shape itself. And the auto size is for o to 100 %.we can expand up to that extent only.

No comments:

Post a Comment