Tricky CSS positioning issue

maxheadroom · 24-09-2006 5:47pm #1

Hi everyone.

I'm trying to do something in CSS, and I'm not sure if its possible.

Here's a picture:

Basically, its a simple header, content, footer setup, no side nav bars or anything. The basic layout isn't a problem. I'm trying to have a single coloured area with one article in it. I want to position a smaller different coloured area in the bottom left of this large area and have the text in the large area wrap around it. Getting this small area to stick to the bottom of the large area is proving problematic. I won't know in advance the height of the large area or the small area.

The only way I could think of doing this is to split the whole thing in two horizontally, then use floats in the bottom section, but then I lose the ability to feed text from a database and have it flow into the large area.

Has anyone got any suggestions?

louie · 24-09-2006 6:19pm

did you try using the position tag?

<style type="text/css">
.named_div_small{width:460px; height:160px; border:1px solid #000; background-image:"path to the image"; background-repeat:no-repeat;}
.named_div {width:460px; height:120px; border:1px solid #000;background-image:"path to the image"; background-repeat:no-repeat;}
#left_div{position: relative; bottom: 3px; left:3px; width:150px; height:150px; border:1px solid #ccc; margin:2px;}
</style>

</head>

<body>
<div class="named_div_small">
some text  here<br />
more text again<br />
some other text<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

	<div id="left_div">
	text text
	</div>
</div>

maxheadroom · 24-09-2006 6:24pm

louie wrote:

did you try using the position tag?

The problem with position: relative in this case is that it makes 'bottom: ' behave rather strangely, essentially, when using position: relative, everything is related to the top right corner, so bottom: X is the same as specifying top: -X. Which is not going to produce the desired result.

louie · 24-09-2006 6:29pm

position:relative will make the div stick where you want it to, but there is a problem with getting the text to wrap arround it.

position:absolute will position the div based on the browser window x and y.

I cann't understand why bottom? Best is top right or left. Easier to work with and makes your text wrap arround it as well.

maxheadroom · 24-09-2006 6:32pm

louie wrote:

position:relative will make the div stick where you want it to, but there is a problem with getting the text to wrap arround it.

position:absolute will position the div based on the browser window x and y.

I cann't understand why bottom? Best is top right or left. Easier to work with and makes your text wrap arround it as well.

Well, I want the small box to stick to the bottom left of the big box. Because I have no way of knowing in advance what height either box will be, using top: Y; left: X; isn't very useful. and, as you've mentioned, making the text wrap around a relatively or absolutely positioned element is tricky.

I have a feeling any resolution of this will revolve around negative margins and floats, but I'm still trying to figure out how...

EDIT:The page is to be used as a news article page for a CMS - the news article will flow into the big box and I'll have links to other news articles in the bottom left small box. Putting the box top left or right with floats would be easy, but I want to have a bit of space at the top of the page devoted to the news article. I'm not sure if the effect will work, but I'd like to try it out in mockup form before deciding.

louie · 24-09-2006 6:39pm

As you said you don't know what height the holding div will be so to make it sticky to the bottom-left is possible with the code I gave you above but to also get the text wrap is impossible unless you use an iFrame or something similar.

Tricky CSS positioning issue

Comments