Skip navigation

Category Archives: basic CSS

sometime we want to make center of our div from a body. usually i set the body align property into center, or using <center> tag but this will cause all of your element position to center. but that is old school 🙂

then how to do it with css property then you ask? very easy. all you need is playing with the margin property and place it after <body> tag. below is the way to do it

<div style=”margin:0 auto 0 auto; width:300px;”>This is center</div>

get it? you see we just set left and right margin property into auto so it will automatically set your div into center position. very nice.

in my journey on making XHTML from CSS in early days i was stuck by float property. when i used float in a container, the background from the container just won’t appear in FireFox but it appear in IE 6, and the only came up in my mind was to add background color on each float, which is frustrating. what if you want to change color, then you have to re-type the color all over again.

lets use this simple CSS example:

<div style=”width:100px; background-color:#CCFF33;”>
<div style=”float:left; width:50px;”>box 1</div>
<div style=”float:left; width:50px;”>box 2</div>
</div>

you will get this in IE 6:
as appear in IE6
and you will get this on FF:
as appear in FF

not very nice eh? then i searched through Google when i met with this clear property clear:both. you can use this property in the end of every float in a container so your container background color will blanket all your float property. this way the CSS display on FF will have the same look as on IE 6, and beside this is what you want right?

<div style=”width:100px; background-color:#CCFF33;”>
<div style=”float:left; width:50px;”>box 1</div>
<div style=”float:left; width:50px;”>box 2</div>
<div style=”clear:both;”></div>
</div>

go on, give it a shot.