SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast MartyBoi's Avatar
    Join Date
    Dec 2011
    Location
    Saginaw MI
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question <div id="wrapper"></div> Issue, Need Help!

    Hello and Greetings !

    I am having a small issue with a <div id="wrapper></div> when it comes to containing all my body material. I know for most, this is not much of an issue, but for how I want to design a certain Website, it has become a headache for me.

    Here is the issue:

    The issue in witch I am confronted with deals with having a <div id="menu"></div> that spands or menu{ width: 100%; } of the page in whole. But the <div id="header"></div> has the ' header{ width: 920px;} ' and the other Div's below the ' Menu ' will need to expand the width of 1040px; . How can I contain it all in a main wrapper, or will I need to three wrappers? Header-wrapper, Menu-wrapper, and Below-wrapper?

    Example of Html without any wrappers:

    <header id="foermost_header"></header> <!-- It's witdh is 920px -->
    <nav id="main_menu"></nav> <!-- It's width is 100% -->
    <aside></aside> <!-- From Here -->
    <article></article>
    <aside></aside>
    <footer></footer> <!-- To Here --> It's with will be 1040px;

    Can anyone give me some advice on how to wrap all this?

    Also, I know this is a crazy question, but I have to ask. In the <aside><article><aside> tags, if I am floating one to the left and the other to the right, do I have them in the right flow of things. I am asking because someone said I needed to have both <aside><aside>, then the <article> last. Crazy right?

    Thank you.....

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi MartyBoi. Welcome to SitePoint.

    will I need to three wrappers? Header-wrapper, Menu-wrapper, and Below-wrapper?
    Yes, that's what you should do.

    In the <aside><article><aside> tags, if I am floating one to the left and the other to the right, do I have them in the right flow of things. I am asking because someone said I needed to have both <aside><aside>, then the <article> last.
    It kind of depends on what you are doing with the <article> in the middle. If it is floated too, you can keep the order you have. If, instead, it just has left and right margins to make room for the asides, then you probably need them first. I'm not up to speed on HTML5 semantics, but I'm not sure you are using the <aside> element in the best way, though.

  3. #3
    SitePoint Enthusiast MartyBoi's Avatar
    Join Date
    Dec 2011
    Location
    Saginaw MI
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi MartyBoi. Welcome to SitePoint.



    Yes, that's what you should do.



    It kind of depends on what you are doing with the <article> in the middle. If it is floated too, you can keep the order you have. If, instead, it just has left and right margins to make room for the asides, then you probably need them first. I'm not up to speed on HTML5 semantics, but I'm not sure you are using the <aside> element in the best way, though.
    Hi Ralph.... And thank you for the welcome....

    Sounds great, your advise is very helpful.... One more question though in respect to the three wrapper's....

    Now that I will have three wrappers, how do I keep them align so that it all looks in order? I mean look square, one under another you know?

    And too, would I give each wrapper their own ID's, or give them Class's? Lets say <div id="header_wrapper"> or <div class="wrapper" style="width: 920px;" >?

    Giving all Wrappers a the same class, but inline styles for width. What do you suggest?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by MartyBoi View Post
    Now that I will have three wrappers, how do I keep them align so that it all looks in order? I mean look square, one under another you know?
    I'm not really sure what kind of layout you want, so it's hard to answer. I thought you wanted the boxes side by side ...?

    And too, would I give each wrapper their own ID's, or give them Class's? Lets say <div id="header_wrapper"> or <div class="wrapper" style="width: 920px;" >?

    Giving all Wrappers a the same class, but inline styles for width. What do you suggest?
    I prefer to give each element a class where needed, rather than an ID. But whatever you do, don't use inline styles. Keep everything in an external style sheet, so that if you change your mind about widths etc, you will only have to change the width setting in one place, rather than on each page (the curse of inline styles).

  5. #5
    SitePoint Enthusiast MartyBoi's Avatar
    Join Date
    Dec 2011
    Location
    Saginaw MI
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by ralph.m View Post
    I'm not really sure what kind of layout you want, so it's hard to answer. I thought you wanted the boxes side by side ...?



    I prefer to give each element a class where needed, rather than an ID. But whatever you do, don't use inline styles. Keep everything in an external style sheet, so that if you change your mind about widths etc, you will only have to change the width setting in one place, rather than on each page (the curse of inline styles).

    Hi.... No , not side by side....

    I want the header on top, the menu in the middle, and the rest below the menu. So a I would have three wrappers. Top, Middle and Bottom.

    Thank you...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    O sorry, I see. Well, it depends a bit on what kind of backgrounds you want etc. You could give each wrapper div a width and margin: 0 auto; but if you want each section of the site to have a different, full-width background color, put an outer wrapper around each of those divs of width: 100%.

  7. #7
    SitePoint Enthusiast MartyBoi's Avatar
    Join Date
    Dec 2011
    Location
    Saginaw MI
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    O sorry, I see. Well, it depends a bit on what kind of backgrounds you want etc. You could give each wrapper div a width and margin: 0 auto; but if you want each section of the site to have a different, full-width background color, put an outer wrapper around each of those divs of width: 100%.

    Thank you Ralph.... Will do just that....


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
  •