SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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
    All those who wander aren't lost.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    tell us more.

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by etidd View Post
    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
    All those who wander aren't lost.

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    did anyone find out, whats the problem
    All those who wander aren't lost.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    .search {
        float: right;
        margin: -43px 10px 0 0;
    }
    If you want the layout center aligned then don't float the body to the right

  8. #8
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

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

    Code:
    .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?
    All those who wander aren't lost.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

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

    Code:
    .search > form {
        float: right;
    }

  10. #10
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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."
    All those who wander aren't lost.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You are adding it here:

    Code:
    <body class="search search-results custom-background full-width custom-background-white custom-font-enabled single-author">

  12. #12
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    All those who wander aren't lost.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    #main, .slider {
        margin: 0 auto !important;
        width: 842px !important;
    }
    Yes inside that you have #primary set to 874px

    Code:
    #primary {
        float: left;
        width: 874px;
    }

    .. and inside that you have #content set to 900px!

    Code:
    #content {
        width: 900px;
    }
    ..and inside that you have #product set to 910px.

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

  14. #14
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks! its so tough to remember the widths, once you get to code more html, any advice to remember every value?
    All those who wander aren't lost.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nofel View Post
    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).

  16. #16
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Code HTML4Strict:
    .parent{
     width:900px;
     height:auto;
     margin:10px;
    }
    .inner{
     width:inherit;
    margin:10px auto;
    }
    how would the inner be centered?
    All those who wander aren't lost.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nofel View Post
    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
    Code HTML4Strict:
    .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.
    Code:
    .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.

  18. #18
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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?
    All those who wander aren't lost.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nofel View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •