Johnny2 Posted January 18, 2013 Report Share Posted January 18, 2013 I'm trying to make the "playing-cards" space themselves out evenly across the screen horizontally (in the "floor" area). I'm running into problems and have 4 questions about what's going on: Question 1: Where is the green "floor" going? (When I remove the float property from the "playing-cards" it brings back the green "floor" background, but it disappears when I add float to the "playing-cards".) Question 2: When I remove float, why do I still see red above the first card and below the last card? (It seems that the margin from the "playing-card" is ripping a gap between the header and the "floor"... I would expect the margin to simply push the "playing-card" away from the border of it's parent container which is "floor" to produce more green space... but it's not happening that way) Question 3: How do I make the "playing-cards" space themselves evenly on each row? (I thought making left and right margins "auto" and making the position "relative" was supposed to produce this effect, but it's not working out) Question 4: How do I center that text vertically on the first card? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> /* complete and total reset */ * { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; line-height: 1.5em; text-decoration: none;} /* end of complete and total reset */ #container { background-color: red;} #header { background-color: blue;} #the-floor { background-color: green;} .playing-card { float:left; border-radius: 10px; overflow: hidden; background-color: white; height: 350px; width: 250px; display: block; margin-top: 25px; margin-right: auto; margin-bottom: 25px; margin-left: auto; position: relative;} p { text-align: center; background-color: yellow;} .playing-card p { vertical-align:middle; height: 100%;} #footer { clear:both; background-color: pink;} </style> </head> <body> <div id="container"> <div id="header"><p>Here is the Header</p> </div><!--end of header--> <div id="the-floor"> <div class="playing-card"> <p>Here is text (with yellow background) on the first white-playing-card. I want all of the white-playing-cards to float as long as there's room. On each row of cards, I want the cards to space themselves evenly (horizontally). Currently they are only aligning to the left.</p> </div><!--end of first playing-card--> <div class="playing-card"></div> <div class="playing-card"></div> <div class="playing-card"></div> <div class="playing-card"></div> <div class="playing-card"></div> <div class="playing-card"></div> <div class="playing-card"></div> <div class="playing-card"></div> <div class="playing-card"></div> <div class="playing-card"></div> <div class="playing-card"></div> </div><!--end of the-floor--> <div id="footer"><p>Here is the Footer</p> </div><!--end of footer--> </div><!--end of container--> </body> </html> Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 18, 2013 Report Share Posted January 18, 2013 Do you have a link? I see the code, but it's easier to work with if it's already available online. Quote Link to comment Share on other sites More sharing options...
Johnny2 Posted January 18, 2013 Author Report Share Posted January 18, 2013 (edited) Do you have a link? I see the code, but it's easier to work with if it's already available online. no, sorry. I don't have hosting yet... Edited January 18, 2013 by Johnny2 Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 19, 2013 Report Share Posted January 19, 2013 This is what you get uploading the code just at you posted above: John 1 Your header has a blue background, but it's as large as the p area, which has a yellow background, so none of the blue shows. Add padding to your header (or a margin to p) and you'll see blue. If you don't set a width to your container, it'll be as wide as whatever resolution it's being viewed on. That can make setting the layout pretty hard, and it makes things hard to read. Picture a line of text running all the way left to right on a 2000 or so px resolution. Reading something will require more head motion than watching a tennis match. Giving your container a width will save you a lot of problems. Of course with the width assigned, you want to center your container div, and you do that by assigning a right and left margin of auto. To spread the cards out evenly, I played with the right/left padding until it balanced out. Your cards are floating, that means they don't really take up any space. That's why the green background of your 'the-floor' doesn't show up, even after you add padding. Clearing your footer moves it beneath the 'the-floor' div, but it doesn't display this div big enough to hold all the cards. So I added an empty div that has no purpose other than to clear the floating cards, and now the green shows all the way through And this is what you get applying the above Hope this explains a bit more for you - let me know if you have any questions about an of this. Quote Link to comment Share on other sites More sharing options...
Johnny2 Posted January 19, 2013 Author Report Share Posted January 19, 2013 This is what you get uploading the code just at you posted above: John 1 Your header has a blue background, but it's as large as the p area, which has a yellow background, so none of the blue shows. Add padding to your header (or a margin to p) and you'll see blue. If you don't set a width to your container, it'll be as wide as whatever resolution it's being viewed on. That can make setting the layout pretty hard, and it makes things hard to read. Picture a line of text running all the way left to right on a 2000 or so px resolution. Reading something will require more head motion than watching a tennis match. Giving your container a width will save you a lot of problems. Of course with the width assigned, you want to center your container div, and you do that by assigning a right and left margin of auto. To spread the cards out evenly, I played with the right/left padding until it balanced out. Your cards are floating, that means they don't really take up any space. That's why the green background of your 'the-floor' doesn't show up, even after you add padding. Clearing your footer moves it beneath the 'the-floor' div, but it doesn't display this div big enough to hold all the cards. So I added an empty div that has no purpose other than to clear the floating cards, and now the green shows all the way through And this is what you get applying the above Hope this explains a bit more for you - let me know if you have any questions about an of this. Well, I intended the webpage to be able to be any size. The only thing I really wanted to achieve was to have the cards floating AND to have them space themselves out evenly. For instance: When the browser window is large enough for 4 cards to fit horizontally, but not wide enough for 5, I want to see 4 cards side by side, spaced evenly... As far as a floating elements not taking up any space.... weird. Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 19, 2013 Report Share Posted January 19, 2013 As far as a floating elements not taking up any space.... weird. That's just the way it is - picture them like a baloon floating over the plane. You can try playing around with percent instead of pixels for the card margins and see if that works. Quote Link to comment Share on other sites More sharing options...
Johnny2 Posted January 19, 2013 Author Report Share Posted January 19, 2013 (edited) That's just the way it is - picture them like a baloon floating over the plane. You can try playing around with percent instead of pixels for the card margins and see if that works. I discovered a fix for the disappearing green.... Apply "overflow: hidden" to the parent container. This magically works, but it's kinda stupid because it seems to be a bug. But the green disappearing wasn't really my issue. I want the cards to space themselves like a fluid layout (the space between them changing depending on the browser size), but ALSO allowing them to float next to eachother. Any idea how to achieve this? Edited January 19, 2013 by Johnny2 Quote Link to comment Share on other sites More sharing options...
grabenair Posted January 20, 2013 Report Share Posted January 20, 2013 Google responsive web design. Start studying. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.