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?
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.
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?
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).
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%.
