Absolute positioning and nested divs (and borders)

[jkp23]

I have a problem that seems to be reoccuring throughout the development of a site I am working on.

This is the first time I have gone for a pure CSS layout, and as such I am finding out how difficult it is to generate a one-size-fits-all css.

Anyway...the problem is this.

I have various divs, that are absolutely postioned, and within them I have other relative / absolute divs. The main div has a border around it, and holds all other divs, but it doesnt recognise that there is content below it on some occations, and just finishes in a location half way through the content.

So, for example.

I have a whole load of divs postioned relative to the main content div that produce the header, most of which are absolute (taking advantage of the fact that you can absolutely position relative to the parent object if it has a top and a left value defined). When I then go to put some text in after the header, it comes out at the top of the content div, on top of the header itself. IE: The content div isnt recognising the child divs as objects within as they have been defined as absolute i guess, and just carries on in the next place availible.

The only solution I have found is to insert a load of <br> statements that make the content below the header come out in the right place.

I have having the same problem with a nested float, later in the page.

I have a div which is bordered, and I want to float a menu on the left of the div, so I can put the other content to the right. The problem is the div finishes where the bottom of the other content, and not at the bottom of the nested/floated menu, which is bigger.

How do I deal with these kinds of problems to get things to go where they should?

I have played with many things, including the display property, which worked for some browsers by setting it to table, but not for others. Surely you should be able to nest absolute or floated elements and have the parent recognise that they are children?

take a look at:
A template i'm working on.... (http://www.kirkconsulting.co.uk/wiseserve/template/)
...for an idea of what im talking about.

Thanks for your time in advance.

[Vladdy]

Your approach is wrong. The whole point of css is the ability of layout to ADJUST to different media, browser sizes, etc.
Stop thinking about the web site as a brochure and allow things to flow.

[jkp23]

would you care to give me some tips instead of just imposing a really unhelpful comment on my work?

I have spent a hell of a long time working on this and you seem to be saying 'scrap it and start again' without suggesting how. I really was helping to get some useful insight in to how to approach this problem.

I really hope you can lend an hand and give me some more useful comments than this.

thanks.

jamie

[David Harrison]

I THINK, what Vladdy is trying to say is, use %age's rather that do it pixel perfect. So that although you may have the side bar a set width, the main page content will change size fluidly as the browser window is resized or viewed with a different resolution. Little things like that. Hope this has helped in some way.:)

Edit: I tend to go with pixel perfect, because although I admit that %age's look better, I can't use them, my brain just isn't wired that way I guess.

[jkp23]

OK. I get you, but in this case it wont do what I want. I have worked really hard t get this layout to work, and infact I have semi solved this problem by usin a blank img tag with a height set to space things properly instaed of the BR tags.

Unfortunately it wont work where i dont know the height and the only thing I can think of is to resort to *ughhh* javascript.

Anyway, I think that we all have our different apporaches to design, and its not very helpful to try and impose yours on someone else, when actually they just want help trying to get their design how they want it. People have been overcoming the boundaries set by crap web browser technology and bad standards compatibilty for 10 years now. This kind of problem is nothing new. I think its all very ewll to say the web isnt the medium for this kind of thing but it can be if you want it to be. I have done a pretty good job of getting this far on my design and im damn sure its not impossible to do what i want in some way. Thats why i posted here.

Also if the argument is that my code will become overcomplex doing this kind of thing, then i think you are also wrong. Its the cleanest code ive ever written, just due to the luxury of being able to sperate the layout from the content.

anyway,

</rant>

hope you understand. just want a hand thats all!

cheers lavalamp.

[nkaisare]

When you use position: absolute for a div, that div is taken out of the normal flow of the document. If this div is nested in another div, the parent div will not stretch until the bottom of the screen.
<div id="div1">
<div id="div2"><p>Some text</p><p>More text</p></div>
</div>
CSS:
#div1 {position: absolute; top: 0; left: 0; border: 1px solid blue}
#div2 {position: absolute; top 0; left: 0;}

The above will be displayed as
Some Text=====================
More Text
The ==== represents border of #div1. Note that #div1 doesn't stretch until the bottom of #div2.

[jkp23]

check...

got that one (had kinda worked it out)...its the same with floats right?

any workarounds or better solutions?

cheers

[nkaisare]

Stretching columns like Tables:
http://www.prism.gatech.edu/~gte207x/pyro.html

If you dont have background to worry about, this is how you can do...

<div id="left">...</div>
<div id="content">...</div>
<div id="footer">...</div>

And the CSS
#left {float: left; width: 150px}
#content {margin-left: 150px}
#footer {clear: both}
The clear: both causes the space to the left & right of a float to be cleared... ie the next div is displayed below the content.

Hope this helps

[David Harrison]

You said that you don't know the height of the image that is positioned absolutely, I can only think of two reasons for this so I can only suggest two possible alternatives.
1: you're using some kind of random js function to choose the image, this is unlikely as you've expressed your disgust at using js for this. Anyway, if on the off chance you are using js then you'll have to create the image (ie: <img src="....) using js and then use js again to put it on the page and calculate the positions of the remaining div elements on the page.

2: your CSS is in a separate file and therefore has to be general, the only way around this is to put a specific piece of CSS in every page source that takes account of the varying image heights.

[jkp23]

the reason i dont know the height is that it is a dynamic menu generated by php.

any ideas?

[David Harrison]

Not about PHP that's for sure, if it were me I'd probably just try try and make all of the images the same height, so that the page content would be fixed.
However, if you could pass a value for the height of the image from PHP to javascript, (I don't know how PHP works), but if you could get it to write:
<script type="text/javascript"><!--
imgheight="999";
//--></script>
on the page, you'd be in business.

[toicontien]

I noticed one problem in the code for the link you posted above. The DOCTYPE is declared partialy, and then fully:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


Just delete that first line. Modern browsers (as of IE5/Mac, NS6, Opera 5?, IE6) support doctype switching if the proper code is there. If improper code is in the HTML file, it forces the browser into "quirks" mode which can make a difference when laying out a page using CSS.

It won't cure the problem you posted above, but it may prevent future problems.

Getting back to your original post...

From the source code I viewed:


<div id="content">
<div id="headerBackground"></div>
<div id="newsFeed"></div>
<div class="mainMenu"></div>
<div class="subMenu"></div>

<div id="mainContent">
Main content
</div>
</div>


Those being the major DIVs. After looking at your CSS, you shouldn't need to position any DIV besides "content" absolutely.

You could try positioning relatively at first. I just got done designing a CSS layout site (http://www.cm-life.com/?template=cml_new_temp) and found this to be true for DIVs and positioning:

1. The first child DIV of the body must be positioned statically or absolutely.

2. Most every child DIV of the statically positioned DIV must be positioned relatively.

3. Sometimes you can break number 2 if the DIV is positioned absolutely.

The rules I wrote above may have more to do with the way I write CSS though. The mix of statically and absolutely positioned DIVs is mainly to account for an IE/PC bug where it likes to do funky things when you start nesting DIVs.

Once you've gone to relative positioning for all child DIVs of the "content" DIV, you shouldn't need any spacers or <br>'s. Each DIV should start where it's neighbor ends.

Also, when designing in XHTML, all elements must be closed, meaning that <br> becomes <br />, <link> becomes <link />, etc. I've found that browsers will recognize the <br> tag, yet still consider it an unclosed element and it might mess up how the page renders from the unclosed element onward.

For more info on XHTML see the following sites:

http://www.w3schools.com/
http://www.alistapart.com/
http://www.w3.org/

[jkp23]

well..

cheers for pointing out those errors. mostly just typos, ie the declaration twice.

ill bear in mind your rules next time i have a bash at a template, but for now i have decided that in this case i will use a table to layout the problem part.

i have since got it to work fine, and the only thing i might try, just to get back to pure css is to try using divs and the display:table related properties instead of a table itself. however, i cant see much benefit in this, seeing as all the formatting is still seperate anyway as it is.

thanks for the advice tho :)