Jump to content

Floating Playing-Cards


Johnny2

Recommended Posts

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Johnny2
Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...