Helping get float:center in CSS

Ok now you have known that float property for center does not exist.It is just for the left and right.So how do we make a block look in center.Well it might be a nightmare for young designers and beginners.The CSS theory of floating is not as complex as it looks.The problem,however,lies in the interpretation of the theory.Enough of bugging,here is the solution-


{width:1000px; height:300px;margin:0 auto;background-color:red;margin-top:0px; }

This is the containing block that is the outer layout of the box.In this box,three sub boxes have to be filled of equal length.Two boxes have to be assigned the float property of left.The elements on their own will get to their sides with the right edge of the second one touching the left edge of the former.Though looks confusing,it is easier to implement.Take a look-

#footer1  {     float:left;  width:32%;  margin:0 auto;  height:350px;  background-color:#eee;  margin-top:0px;  border-bottom-width:0px; }

#footer2  {  float:left;  width:32%;  height:350px;  margin:0 auto;  background-color:#eee;  margin-top:0px;  border-bottom-width:0px;   }

#footer3 { float:left; width:32%; height:350px; margin:0 auto; background-color:#eee; margin-top:0px; border-bottom-width:0px;  }


Evidently,two sub=boxes have been assigned the same float property of left.Hence the remaining one obviously has to be assigned the right value of the float property.As simplistic as it is.Cheers beginners!!!



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: