Layout float to the right

Hi,
My all pages are fine, expect one and i am unable to figure out why. www[dot]shellneverknow.com[dot]au/?s=london

tell us more.

I’m looking all around for the styles for a div with the i.d. of #page, which is the wrapping div for that page. Do you know in what CSS file it’s located?

yes, but it has margin:0 auto

did anyone find out, whats the problem

nofel,

What is it about this page, www[dot]shellneverknow.com[dot]au/?s=london , that is different from the other pages?

We have nothing to compare it to.

Hi,

You are adding a class to the body tag that causes the body to be floated to the right.


.search {
    float: right;
    margin: -43px 10px 0 0;
}

If you want the layout center aligned then don’t float the body to the right:)

It worked, as always your awesome! but i don’t get it. why styles was applied on search div, not on body?

HI,

I’m not sure what you are asking but the sear h form was also floated with this rule:



.search > form {
    float: right;
}

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.”

HI,

You are adding it here:



<body class="[B]search[/B] search-results custom-background full-width custom-background-white custom-font-enabled single-author">

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

Hi,

You’ve set #main to be 842px wide:



#main, .slider {
    margin: 0 auto !important;
    width: 842px !important;
}

Yes inside that you have #primary set to 874px



#primary {
    float: left;
    [B]width: 874px;[/B]
}

… and inside that you have Content set to 900px!



#content {
    width: 900px;
}

…and inside that you have #product set to 910px.



.products {
    float: left;
    width: 910px;
}

That means #product will stick out of #main by 68px.

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.:slight_smile:

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


.parent{
 width:900px;
 height:auto;
 margin:10px;
}
.inner{
 width:inherit;
margin:10px auto;
}

how would the inner be centered?

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.

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 :slight_smile: