- This topic is empty.
-
AuthorPosts
-
June 24, 2009 at 11:05 pm #25219John HarrisMember
Link to Example: http://johnharrisdesign.com/test/
What I’m Trying to Do:
I am trying to find a way to align text and images vertically inside a div, so that they match the alignment of their sibling in the same row (images below to alleviate confusion). Also, if the height of text changes in one div the sibling div changes accordingly so that all text and images are still aligned. IMPORTANT! -The rows need to behave independently. That way each row can grow to fit the needs of its own child divs.What I’ve Done:
I’ve been doing some research into jQuery of how I could dynamically set equal heights for the siblings, and when one changes the other changes accordingly. However, I haven’t found anything I understand fully.Here is What I Found:
http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
http://stackoverflow.com/questions/632022/how-do-i-use-jquery-to-get-the-height-of-a-dynamically-created-child-element-with
I am currently trying to figure out how to use this.Code:Code:#product-container {
}
.product-container-title {
border-bottom:1px solid #40bfa2;
padding:0 0 3px 0;
margin:0 0 25px -15px;
}
.product-row {
margin:0 0 0 -40px;
}
.product {
width:280px;
border:1px solid #d8d8d8;
background-color:#f7f7f7;
float:left;
margin:0 0 25px 25px;
padding:10px;
}
.product-image {
width:75px;
height:220px;
text-align:center;
float:left;
margin:10px 0 0 0;
}
.product-title {
color:#359c84;
font-weight:bold;
font-size:16px;
float:left;
width:180px;
margin:0 0 5px 20px;
}
.product-description {
float:left;
width:180px;
margin:0 0 5px 20px;
padding:0 0 20px 0;
}
.product-price {
font-weight:bold;
font-size:16px;
width:180px;
float:left;
margin:0 0 5px 20px;
padding:0 0 10px 0;
}
.product-id {
float:left;
width:180px;
font-size:12px;
margin:0 0 5px 20px;
padding:0 0 20px 0;
}
.add-to-cart {
float:right;
}
.add-to-cart a img {
border:none;
}This what this code currently looks like in Firefox 3.
[img]http://johnharrisdesign.com/test/images/actual.png[/img]This is what I want it to look like. (without the border and lines obviously :))
red border = .product-row
teal line = alignment
[img]http://johnharrisdesign.com/test/images/mockup.png[/img]June 27, 2009 at 2:15 am #59800TheDocMemberWow, you put tons of effort into this. I haven’t gone through it quite yet, but I’ve bookmarked it to go through before the weekend’s out!
June 27, 2009 at 6:41 am #59802Frodo64MemberHmm. I can’t say how to position everything. But if you don’t find the answer just try to position the "Add to cart" button to the bottom right corner (position:absolute; bottom:5px; right:5px;). I believe it will look nice too.
June 30, 2009 at 11:17 am #59927EamonnMacMemberProbably speaking out of turn here :oops: but couldn’t you just give a height value to each of the nested divs? I would rely, of course, on the content not ever extending beyond those heights…
June 30, 2009 at 12:47 pm #59942TheDocMemberBecause the title of the product can be more than one line, you’re almost never going to be able to line everything up properly. But perhaps you’ve been thinking about it all wrong. Check out how I’ve organized things here in the bottom two (I also think it looks a lot more pleasing to the eye):
[attachment=0]better.jpg[/attachment]
June 30, 2009 at 1:10 pm #59945burnzedyMemberI went to your website and it seems that you’ve done it with jquery. I think it’s the only way to do exactly what your looking for (although you could have done something a little different in pure css).
The only thing with the jquery solution, would be to put an height (or min-height) to your product class so that if a user don’t have javascript it would be still pleasant to look at (even if it’s not exactly what you wanted). -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.