14 replies [Last post]
chacs
Offline
newbie
Last seen: 16 years 22 weeks ago
Timezone: GMT-5
Joined: 2006-03-08
Posts: 7
Points: 0

Hi,

the html and css:

<div id="cards">
    <p class="card">variable text here</p>
    <p class="card">variable text here</p>
    <p class="card">variable text here</p>
    ...
</div>

.card {
    float: left;
    width: 100px;
    margin: 5px;
}

I wish to layout a number of p.card within div#cards horizontally in columns and auto-overflow to new rows.

Ponts of interests:
1. div#cards width is fluid, i.e. variable width, i.e. the number of cards which can fit to a row is unknown.
2. p.card height is fluid, i.e. some has more lines than others.

The issue is that if an early p.card has more lines than the later p.card on a row, the p.card destined for the next row will be "stuck" to the right of the early p.card.

desired:

    .----.  .----.  .----.
    | X  |  |    |  |    |
    |    |  .----.  .----.
    .----.
    .----.
    | Y  |
    .----.

actual:

    .----.  .----.  .----.
    | X  |  |    |  |    |
    |    |  .----.  .----.
    .----. .----.
           | Y  |
           .----.

One solution is to set the height of p.card to some "max possible value", but that would make the spacing between the rows inconsistent.

Lets say p.card is set height to 100px.

On a row where the max p.card content height is 20px, the space to the next row will be 80px + margin.

On a row where the max p.card content height is 70px, the space to the next row will be 30px + margin.

What I am trying to achieve is consistent spacing between rows.

Is this possible ?

jlhaslip
Offline
Enthusiast
Last seen: 13 years 12 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

need help with layout (is this possible using css ?)

Group 3 or 4 paragraphs in another div and stack them instead of the paragraphs.

<div >
<div >
    <p class="card">variable text here</p>
    <p class="card">variable text here</p>
    <p class="card">variable text here</p>
</div> 
<div>
    <p class="card">variable text here</p>
    <p class="card">variable text here</p>
    <p class="card">variable text here</p>
</div> 
</div>

I'm having a good day...so far.

chacs
Offline
newbie
Last seen: 16 years 22 weeks ago
Timezone: GMT-5
Joined: 2006-03-08
Posts: 7
Points: 0

need help with layout (is this possible using css ?)

sorry, that is not what i am looking for.

div#cards width is fluid, the number p.card which can fit on a row is unknown.

p.card should flow along a row and start a new row only when the next one can't fit.

-cs

jlhaslip wrote:
Group 3 or 4 paragraphs in another div and stack them instead of the paragraphs.

jlhaslip
Offline
Enthusiast
Last seen: 13 years 12 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

need help with layout (is this possible using css ?)

HERE

Have fun with it.

I'm having a good day...so far.

chacs
Offline
newbie
Last seen: 16 years 22 weeks ago
Timezone: GMT-5
Joined: 2006-03-08
Posts: 7
Points: 0

need help with layout (is this possible using css ?)

but your elements are of same height, if you read my question, p.card height is not fixed.

change your 1st img height to 200, like this:

<img src="images/thumb1.jpg" title="title here 1" alt="No alt defined yet" height="200" width="140" />

and you will see what i mean.

jlhaslip wrote:
HERE

Have fun with it.

jlhaslip
Offline
Enthusiast
Last seen: 13 years 12 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

need help with layout (is this possible using css ?)

Yup, use that as a guide to fulfill your task. I am really confused about what you want to produce here. It would be considerably easier for you to proceed with the page I supplied than for me to spend a whole bunch more time trying to determine what it is you want. With indeterminant heights, and an uncertain order for the tall and short items, I can't go any further with this right now. Sorry.

I'm having a good day...so far.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

need help with layout (is this possible using css ?)

chacs wrote:
but your elements are of same height, if you read my question, p.card height is not fixed.

change your 1st img height to 200, like this:

<img src="images/thumb1.jpg" title="title here 1" alt="No alt defined yet" height="200" width="140" />

and you will see what i mean.

Please don't ask members to do everythign for you; it's lazy and causes resentment.

I suggest you have a read of this:

http://www.bedtime.com/html/aesop_s_fables_hercules_and_th.htm

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

Re: need help with layout

chacs wrote:
desired:

    .----.  .----.  .----.
    | X  |  |    |  |    |
    |    |  .----.  .----.
    .----.
    .----.
    | Y  |
    .----.

actual:

    .----.  .----.  .----.
    | X  |  |    |  |    |
    |    |  .----.  .----.
    .----. .----.
           | Y  |
           .----.

That's correct float behavior. If you don't define the height then that's what happens.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

need help with layout (is this possible using css ?)

can't you just set y to clear:left; ?

chacs
Offline
newbie
Last seen: 16 years 22 weeks ago
Timezone: GMT-5
Joined: 2006-03-08
Posts: 7
Points: 0

need help with layout (is this possible using css ?)

jlhaslip,

Thx for your help so far, but the fixed height solution is already mentioned in my original post, and that is the "solution" I am currently using. But since p.card content is variable length of text, in standard compliance browsers, content may be truncated, and in IE, the box will just expand to fit.

thepineapplehead,

I am not asking the member to do everything for me. I am asking if the type of layout I am describe is even possible using css (short of using javascript). Have you even read my question ? geez. Perhaps I should add that this is not a simple css question.

wolfcry911,

I dunno which is Y because div#cards width is fluid.

-cs

chacs
Offline
newbie
Last seen: 16 years 22 weeks ago
Timezone: GMT-5
Joined: 2006-03-08
Posts: 7
Points: 0

Re: need help with layout

Triumph wrote:
That's correct float behavior. If you don't define the height then that's what happens.

yes that is, thats why i am asking if anyone know any clever css "voodoo" that can achieve that layout.

Anonymous
Anonymous's picture
Guru

Re: need help with layout

Why not do this:

desired:
-----div-----------------------
|    .----.  .----.  .----.   |
|    | X  |  |    |  |    |   |
|    |    |  .----.  .----.   |
|   .----.                    |
-----clear:both----------------
-----div-----------------------
|    .----.                   |
|    | Y  |                   |
|    .----.                   |
-----clear:both----------------

chacs
Offline
newbie
Last seen: 16 years 22 weeks ago
Timezone: GMT-5
Joined: 2006-03-08
Posts: 7
Points: 0

Re: need help with layout

Triumph wrote:
Why not do this:
desired:
-----div-----------------------
|    .----.  .----.  .----.   |
|    | X  |  |    |  |    |   |
|    |    |  .----.  .----.   |
|   .----.                    |
-----clear:both----------------
-----div-----------------------
|    .----.                   |
|    | Y  |                   |
|    .----.                   |
-----clear:both----------------

again, div#cards is width fluid, I dunno how many will fit in a row.

-cs

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

need help with layout (is this possible using css ?)

Quote:
One solution is to set the height of p.card to some "max possible value", but that would make the spacing between the rows inconsistent.

Lets say p.card is set height to 100px.

On a row where the max p.card content height is 20px, the space to the next row will be 80px + margin.

On a row where the max p.card content height is 70px, the space to the next row will be 30px + margin.

What I am trying to achieve is consistent spacing between rows.

Is this possible ?
What you're trying to acheive gives consistent spacing between rows, but not consistent sized rows. I can appreciate what you're trying to do, but isn't it just as effective (and pleasing to the eye) to have the same sized rows?

To answer your question of is it possible - no, not with floats. Maybe with some scripting, but not with CSS (currently).

chacs
Offline
newbie
Last seen: 16 years 22 weeks ago
Timezone: GMT-5
Joined: 2006-03-08
Posts: 7
Points: 0

need help with layout (is this possible using css ?)

wolfcry911 wrote:

What you're trying to acheive gives consistent spacing between rows, but not consistent sized rows. I can appreciate what you're trying to do, but isn't it just as effective (and pleasing to the eye) to have the same sized rows?

To answer your question of is it possible - no, not with floats. Maybe with some scripting, but not with CSS (currently).

thx, i need to confirm that it is not possible.

the issues with setting p.card height:

1. it is actually less pleasing to the eyes (imo). imagine this, assume height is set to 100px, and there are 3 rows. 1st row content only use up to 20px height, 2nd row use 70px height. then the gutter between 1 and 2 is 80px, while the gutter between 2 and 3 is 30px.
it will look like row 1 and 2 are spaced more than row 2 and 3.

2. setting the height does si*t in IE which will expand the height to fit the content anyway.

again, thx for confirming my suspicion.