Wed, 2006-03-08 19:46
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 ?
Wed, 2006-03-08 21:27
#1
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>
Wed, 2006-03-08 23:05
#2
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.
Thu, 2006-03-09 06:53
#3
need help with layout (is this possible using css ?)
Have fun with it.
Thu, 2006-03-09 07:05
#4
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.
Thu, 2006-03-09 08:15
#5
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.
Thu, 2006-03-09 08:59
#6
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
Thu, 2006-03-09 13:14
#7
Re: need help with layout
chacs wrote:
That's correct float behavior. If you don't define the height then that's what happens. desired:
.----. .----. .----.
| X | | | | |
| | .----. .----.
.----.
.----.
| Y |
.----.
actual:
.----. .----. .----.
| X | | | | |
| | .----. .----.
.----. .----.
| Y |
.----.
Thu, 2006-03-09 13:53
#8
need help with layout (is this possible using css ?)
can't you just set y to clear:left; ?
Thu, 2006-03-09 14:16
#9
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
Thu, 2006-03-09 14:27
#10
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.
Thu, 2006-03-09 14:55
#11
Re: need help with layout
Why not do this:
desired: -----div----------------------- | .----. .----. .----. | | | X | | | | | | | | | .----. .----. | | .----. | -----clear:both---------------- -----div----------------------- | .----. | | | Y | | | .----. | -----clear:both----------------
Thu, 2006-03-09 14:58
#12
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
Thu, 2006-03-09 15:09
#13
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).
Thu, 2006-03-09 15:26
#14
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.