CSS Layout Problem

coding

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

An interesting layout problem - take it as a small competition if you want. 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.

Layout problem 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.

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!

Oct06 06paulsays:

http://www.twothirty.com/badboy.htm - something like that?
——-

Oct06 06paulsays:

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.

Oct06 06badboysays:

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.

Oct06 06Dachandesays:

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.

Oct06 06badboysays:

Making the image absolutely positioned will not allow the text to wrap around it so I don’t think that sollution will work.

Oct06 06g3says:

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.

Oct06 06myksays:

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

Oct06 06badboysays:

I am actually looking for a “clean” sollution that will not involve javascript. Still not sure how to do it though :)

Oct06 06Patricksays:

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.

Oct06 06dragossays:

Try http://www.studio54design.com/

Oct06 06Sevenupcansays:

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.

Oct06 06carnutzsays:

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….

Oct06 06twothreefallsays:

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

Oct06 06Sondre Kjell Selnessays:

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 !

Oct06 06Leszek Swirskisays:

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.

Oct06 06Anmsays:

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.

Oct06 06mikeroqsays:

Wow, this might take a while.

Oct06 06ToeMousesays:

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.