Recently started learning a bit of webdesign and I have come to a problem.
Here is a test page I am working on right now:
http://codepen.io/anon/pen/ubfnK
Now, what I want is to get my header to stretch across the whole page, just like here on teksyndicate. And I would like my menu to follow the "content"/"main box" when resizing the browser window. However I'm not sure how I achive this. I have tried to put my header outside of the rest of the page and giving it 100% width, but then I cannot get my menu, logo and stuff positioned correctly to follow my content, like I've tried here:
http://codepen.io/anon/pen/zIgnj
I would really appreciate some help, not just the answer but an explanation to so I understand how it works :)
Your problem is you set the section to have a fixed width of 840px. And then you have everything inside of that. So even when you set the width of header to 100% it is 100% of it's parent, which is the section. What you will want to do instead of section is a .wrap class and set the widths there. Then put everything in that .wrap div.
Stay away from position relative (i.e. left and top). Look into floats and margins.
I know that 100% width of header would be whatever how big the parent element is. But wrap is just a normal div then? But you made it to max-width 840px anyway, it should be the same as section?
Wrap can max be 840px and 100% of 840 is still 840?...*confused
So when you set the "section" width to 840px and header to 100% the header could only be 840px because the parent was 840px.
The wrap is a child of header.
section > header > div.wrap
We set a max-width on the wrap so it centers on screens wider than 840px. Otherwise the wrap will automatically be 100% of the screen all the way up to 840px.
Well I've got yet another problem now, if anyone has the lust to help me out. :)
I got a little box at the side that I want to stop at my main content box when I resize the window, however, it floats over it (due to float). But how do I position it then? I have tried playing around with margins but I can't get it to were I want and make it scroll with the page and stop at my main content.
I'm not sure i totally understand what your asking for here. I think i understand you want the <aside> element to stop to the right of the <article> element when the window is resized.
You could set the min-width of the section to be double the width of the <aside> + the width of the <article> (250+840+250 = 1340) and then remove the float and use position: absolute; and right: 0; on the <aside> element.
The better route would be to use @media queries to change the styles with different screen sizes.
Whats the end goal here? Are you attempting to do a full responsive design? I would recommend the bootstrap 3 framework for something like this if you dont have much experience with html5 and css3. It has a lot of tutorials and the documentation is good for learning.
Yes that's exactly what I want. I want to make a responsive design later, but for now i just want it kind of static to begin with.
But I'm sure I'm following you on the solution here, my section is 100% of the body which is the whole visible page. so my <aside> element should be 50% and then adding pixels?