align DIVS!
- Started
- Last post
- 11 Responses
- v3nt
drvinh me crazy - trying to use divs due to w3c(or whatever) client but i need to get the caption and image's bottom edges to align;
http://www.manandeve.co.uk/admin…
#exhib_image {
left: 310px;
position: relative;
width: 480px;
top: 0px;
background-color: #FFF8AE;
vertical-align: top;
}
.all_work #caption {
width: 250px;
bottom: 0px;
position: relative;
background-color: #FFF8AE;
}
.all_work #onepiece {
vertical-align: bottom;
width: 800px;
background-color: #CCCCCC;
margin-bottom: 8px;
}any help much appreciated!
D.
- weestu0
does the caption have to be at the bottom of the image? aligning things at the bottom of a div is difficult to achieve with css.
- v3nt0
yeh - or at top if that's easily done? its just that either way the caption pushes the div down or visa-versa...
- weestu0
ok to align to the top add:
display:inline; float:left;
to # captionyou might need to add a margin-top to get it to align perfectly...
- R-aI0
This will align your caption to the right, with a bit of a margin so it aligns with the image:
.all_work #caption {
width: 250px;
bottom: 0px;
position: relative;
background-color: #FFF8AE;
float:right;
margin-right:5px;
}
- v3nt0
cheers guys - not used that float business before - still can't get it at bottom though - is there a way i can get a div to fill goto height of its parent div?
that way i can align the div to the bottom!
http://www.manandeve.co.uk/admin…
- weestu0
what you could do is set each caption with a top value to push the caption down. eg. for the first caption div add:
< div id = ' caption ' style = ' top : 490px ; ' >
that should make it line up with the bottom of the image although it'll mess up if the user increases/decreases their font size. You would need to set a different top value for each image's caption depending on their height...
- v3nt0
yeh - tried that but images are different sizes so wont always line up.
When i use height:100% it used the 100% of the browser window and not its parent div...cheers for help though - the client's demandin divs so i'll tell "no bottom align"
D.
- weestu0
that's what I mean, on each individual div, give it a style with a top value that align's it to the bottom of the image. Check yer mail in a sec. and I'll send you the code.
- UndoUndo0
hi there v3nt, a quick tip from looking at yr source
divs (#mydiv) should be used once in a document and classes (.myClass) can be used multiple times
the div #onepiece is used over and over again
not sure this will help fix yr problem tho
- v3nt0
cheers for file westu & cheers undidlydoo. didn't work though!
the prob with the file you sentm e wes is that the page is created dymanically thus i don't know the size of the images - but i'll sort that with a bit of php magic! d.
- R-aI0