I did that style as i wanted the search bar to float to right. but what i meant from my previous post is that how is it that div.search style is applied to body tag as you stated "You are adding a class to the body tag that causes the body to be floated to the right."

not adding it but don't know why its adding up, it got its own div. same goes for my width issue, when i see it on small screens, i get margin on right side. how did u find out about the div, i couldn't

You can't have fixed width inner elements larger than the parent (unless its for a special effect) as the overflow is simply ignored but remains visible. It is important to make sure that everything adds up correctly or you will be fighting it all the way.:)

Thanks! its so tough to remember the widths, once you get to code more html, any advice to remember every value?

The easiest advice is just to do it once on the parent and then you don't need to do it any more on the children. If you want inner elements to be smaller then you can set them using margins and then that keeps them in line with the parent's size. If you later changed the parents width then the inner element scales with it.

In these days of responsive design you would use percentages so that the child is controlled by the parent and responds accordingly but you would still need to keep track of your percentages and ensure they don;t add up to more than 100%.

In the end its a matter of simple planning and you really shouldn't need to keep adding widths to internal elements. The inner elements will naturally be as wide as their parents (unless you are floating and then you generally would not float full width elements anyway because they don't need to be floated).

As you said that give width and height to parents, the problem i faced is that the inner child who don't have width close down on them selves, suppose u need a inner child to have a width exactly like parent i.e 900px but it will close down onto the inner elements like if you want to make inner div be in middle of 900px, i would do something like

As you said that give width and height to parents, the problem i faced is that the inner child who don't have width close down on them selves, suppose u need a inner child to have a width exactly like parent i.e 900px but it will close down onto the inner elements like if you want to make inner div be in middle of 900px, i would do something like

It wouldn't. The above code is not sensible. If you inherit the width then it is the same as the parent so there is nothing to center.

If you want an inner element that is 100px smaller than the parent then you could simply say.

.inner{margin:0 50px}

It will then be 10px smaller than the parent and centred. Should you then change the parent's width then the inner will grow and shrink as required while still maintaining the 100px smaller aspect and always be centred. Of course if you are talking about individual elements rather than wrappers then you can use width and margin:auto but you still need to make sure they are smaller than the parent so it would be better to use a percentage width instead and thus not have to change the css when the parents width changes.

I used to advocate using pixel/em widths on children when the parent is a fixed pixel/em width to start with but in these days of responsive design a percentage width ensures that all the children scale with the parent when a media query kicks in.

The easiest advice is just to do it once on the parent and then you don't need to do it any more on the children. If you want inner elements to be smaller then you can set them using margins and then that keeps them in line with the parent's size. If you later changed the parents width then the inner element scales with it.

so what if i need two elements side by side i.e 2 columns and both are children. should i use float or just use margins as you mention. if i use float. won't it put it out of normal document flow?

so what if i need two elements side by side i.e 2 columns and both are children. should i use float or just use margins as you mention. if i use float. won't it put it out of normal document flow?

It all depends on the layout but you could simply use percentage widths for the children so that they still are based on the parent (especially in responsive design).You just have to take care that the percentages and margins don't exceed 100%. As usual with CSS there is no one answer for every situation