INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Parent Div, with a less wide Child Div which contains 2 child Div inside - Responsive Layout ?
2

Parent Div, with a less wide Child Div which contains 2 child Div inside - Responsive Layout ?

Parent Div, with a less wide Child Div which contains 2 child Div inside - Responsive Layout ?

(OP)
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 ?

RE: Parent Div, with a less wide Child Div which contains 2 child Div inside - Responsive Layout ?

(OP)
Ah I see whats happened.



Child container ( max-width 900px) , was appearing as 940 pixels lol


reason being, cos of this stupid line i added padding: 0 20px 0 20px ( so theres an extra 20 pixels on teh side of thsi child div element).


problemo solved. Thank you and GOOD BYE, have a wonderful merry christmas folks :)

RE: Parent Div, with a less wide Child Div which contains 2 child Div inside - Responsive Layout ?

2
If you are using CSS3 you can alter this behavior with the box model and box-sizing property.

http://www.w3schools.com/css/css_boxmodel.asp

http://www.w3schools.com/cssref/css3_pr_box-sizing...

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: Parent Div, with a less wide Child Div which contains 2 child Div inside - Responsive Layout ?

(OP)
Thanks IDMF, ive seen this 'box-sizing' thing but never gone out of my way to find out what it was, what it did and how it did it heh

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close