A few days ago I encountered an interesting layout dilemma. I scratched my head and spent a few hours trying to find a solution but, to my own shame, I couldn’t find a usable one. In the end, as time was running out, I decided to tweak the graphic layout a bit so I wouldn’t be facing this dreaded CSS layout problem. It’s the first time that I completely run into a wall with this kind of things, and I don’t have to tell you that my self-esteem was a bit bruised in this battle.
So I thought it might be a good idea to share this problem to the world. Consider this a competition. There are no prizes except world-fame and countless thanks from others that won’t have to hit this same wall again.
Enough chatter. Let me get to the actual layout dilemma: there is a container (fixed width, height determined by dynamic text inside). Inside this container, besides the text, there has to be an image (fixed width and height) that will always align to the bottom of the container, no matter what height it may be, while allowing text to wrap around it.
Here’s a sketch of the layout, in case I wasn’t very clear in my explanation:
Sounds simple, right? That’s what I thought in the first place, but it turned out to be a real tough one. There might be a simple solution to it, but for some reason I fail to see it.
So, have a crack at it and let everyone know if you find a decent solution. Good luck!
http://www.twothirty.com/badboy.htm - something like that?
-----
by paul
on October 6th, 2006, at 03:13 pm
actually, come to think of it, the image hides the text… so my original solution won’t work. i’ll take another stab at it later.
by paul
on October 6th, 2006, at 03:14 pm
yup, it’s a tricky one Paul :) aligning the image to the bottom of the container is one thing. Making the text wrap around is the tricky part.
by badboy
on October 6th, 2006, at 03:15 pm
I know this isn’t an exact answer, but you could modify this code to get it to work I think. I haven’t got time at the moment to test it, but in theory it would satisfy your requirements.
http://solardreamstudios.com/learn/css/footerstick/
P.S. Nice site.
by Dachande
on October 6th, 2006, at 03:15 pm
Making the image absolutely positioned will not allow the text to wrap around it so I don’t think that sollution will work.
by badboy
on October 6th, 2006, at 03:16 pm
float:left; bottom: 0; left: 0; wont work?
maybe the solution lies in javascript if you want the size of the image to be dynamic as well. CSS needs dimensions and getting it to wrap around an image no matter what size it may not be enough. I dont know js though. I wish I could help more than that.
let me know if I’m way off.
by g3
on October 6th, 2006, at 03:17 pm
Perhaps you could use this. I am not altogether sure how it works, given that I do not yet do Javascript, but this clears absolute divs and seems to establish a sort of “bottom”, so perhaps you could swing something?
http://www.shauninman.com/mentary/past/clearpositionedelements.php
by myk
on October 6th, 2006, at 03:17 pm
I am actually looking for a “clean” sollution that will not involve javascript. Still not sure how to do it though :)
by badboy
on October 6th, 2006, at 03:18 pm
CSS does not currently allow for this. When floating the image, the top of the image will be aligned with the top of the line of text that the image has been placed into (this is the stated behavior for floats in the CSS 2.1 spec).
To create the desired layout, you would have to discover the appropriate position within the text to place the image. For automatically generated pages, character widths and line heights would have to be used to calculate the appropriate image position.
by Patrick
on October 6th, 2006, at 03:18 pm
Try http://www.studio54design.com/
by dragos
on October 6th, 2006, at 03:19 pm
I’ve been experimenting with something that might be slightly connected. I’ve been creating single elements with rounded corners, using the after and before pseudo classes (using no extra divs or spans). During the process of this I’ve realised it’s possible to get an image to push to the bottom left hand side of any element (or any corner you like for that matter. Perhaps I’m onto something? Only trouble is you would need some javascript to get the image to show on IE.
by Sevenupcan
on October 6th, 2006, at 03:19 pm
having the image to be on the “BOTTOM” is hard. but to make it on the top left or right u jusat have to set the “align” of the image to left or right plus setting the margins / padding so as the wordings won’t stick to the image ;P.....
ok i stil dont know how to make it stay bottom right....
by carnutz
on October 6th, 2006, at 03:20 pm
Hey, I’m new to css, but i may have a solution—what if behind/in front the image you made another image, yet just a bit bigger. From there you make the new image’s display hidden? :d
by twothreefall
on October 6th, 2006, at 03:20 pm
Hello !
I found a site to study at “PIEFECTA” perhaps that will help some. I use some of the code for my own website (not finished yet!) and it works just fine !
Keep smiling !
by Sondre Kjell Selnes
on October 6th, 2006, at 03:21 pm
You could have a 1px width div floated left with a negative margin-top of the height of the image, then float the image left and clear left.
by Leszek Swirski
on October 6th, 2006, at 03:21 pm
Okay, I give up. I thought I could do it using floats with a negative margin-top equal to the image height, but Mozilla renderers it under (surprisingly, not over) the text. Click the my name above for my example.
Thinking through this, it makes sense to to not make this standard practice. Allowing layouts where elements can influence the space available to the line blocks well before them requires the render to make multiple passes. In this case, even though the image requires a fixed length negative margin, predicting the number of long lines of text that will fit into the space adjacent to the float is difficult. Each estimated line, with varying word breaks, is some extra rendering computation that probably won’t represent the final line layout.
by Anm
on October 6th, 2006, at 03:22 pm
Wow, this might take a while.
by mikeroq
on October 6th, 2006, at 03:22 pm
The only way I can get this to work is to give the last paragraph in the text a height and left-padding. Then the image sites below with the negative top-margin.
by ToeMouse
on October 6th, 2006, at 03:23 pm
ok i got it to almost work…
look here: http://dirtytechboys.com/test/badboy.html
and view source.
by Brian Jaeger
on October 6th, 2006, at 03:23 pm