c0deM0nK424
Programmer
I'd like to know what im missing, or overlooking or simply over complicating.
Simply put, we have a parent div that spans the width of the entire page (display inline block width 100% height auto no padding or margin), this in turn contains a child div ( position relative) which has width set to 100% but a max-width of 1200 or 900 pixels and obviously, a margin-left and margin-right both set to auto. It also has a height of auto. This child div also has margin-top and margin-bottom set to around 50 pixels, so we have some space to show this 'box' inside of a 'bigger wider box' visual. ( is this OK so far folks ? or at this stage would you stop me - and point out something you'd have done differently ? )
So a container with a mini container inside if you like, both with heights set to auto.
Now we want to place two evenly sized boxes with known heights of 400px, inside the child container folks. Their known heights mean the parent divs will accomodate.
1. Ensure they are placed side by side, INSIDE the child div (which has a max-width of 900 pixels)
2. Ensure they have a 'space' between them, these 'boxes' are div elements themselves NOT images.
3. Using Responsive View in firefox, shrink the browser pane till it reaches the snapping point of 1200px and observe.
4. Write a media query that will make the second box / div element fall underneith the first one at a given 'snapping point' ( i choose 640 pixels )
The margins or spacing of these boxes need to be even on both sides AND between them.
How easy or tricky is this to acomplish ?
Would love to hear from Responsive web designers of all levels, how do you approach this ? can it be done in more than one way ?
p.s - im finding my layout, my two boxes are slightly more towards the right ( bigger margin on the left than the right...weird).
Also the right box, slightly 'overflows' out of its container. Why ?
Simply put, we have a parent div that spans the width of the entire page (display inline block width 100% height auto no padding or margin), this in turn contains a child div ( position relative) which has width set to 100% but a max-width of 1200 or 900 pixels and obviously, a margin-left and margin-right both set to auto. It also has a height of auto. This child div also has margin-top and margin-bottom set to around 50 pixels, so we have some space to show this 'box' inside of a 'bigger wider box' visual. ( is this OK so far folks ? or at this stage would you stop me - and point out something you'd have done differently ? )
So a container with a mini container inside if you like, both with heights set to auto.
Now we want to place two evenly sized boxes with known heights of 400px, inside the child container folks. Their known heights mean the parent divs will accomodate.
1. Ensure they are placed side by side, INSIDE the child div (which has a max-width of 900 pixels)
2. Ensure they have a 'space' between them, these 'boxes' are div elements themselves NOT images.
3. Using Responsive View in firefox, shrink the browser pane till it reaches the snapping point of 1200px and observe.
4. Write a media query that will make the second box / div element fall underneith the first one at a given 'snapping point' ( i choose 640 pixels )
The margins or spacing of these boxes need to be even on both sides AND between them.
How easy or tricky is this to acomplish ?
Would love to hear from Responsive web designers of all levels, how do you approach this ? can it be done in more than one way ?
p.s - im finding my layout, my two boxes are slightly more towards the right ( bigger margin on the left than the right...weird).
Also the right box, slightly 'overflows' out of its container. Why ?
