Printer Friendly Version
Email this thread to a friend
|
Featured Web Site Template |
|
Reflects user activity within the last 5 minutes
|
|
| Member |
Message |
john_dush
Joined: May 07, 2000
# Posts: 144
|
Posted: 2005-Apr-07 10:25
We are designing a site in css/ layers and have not fully worked out how to make a div expand as more text / images go into it so it does not overlap the div below it. We have read up on absolute and relative positioning but still are having problems. Essentially, with two divs positioned one below the other, we want the lower divs to be pushed down as the content in the upper div expands vertically down the page.
Help appreciated!!
|
 |
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Apr-07 21:24
You can't do it, sorry. That's the problem with using positioned divs. As soon as you position a div, it's out of the document flow. The only way is to have a stack of divs, in a container div that is itself positioned, then inside that container the divs are free to expand or contract relative to their content.
This problem also occurs when you resize the text font size by the way, firefox will allow all fonts to be resized, for accessability etc.
You've found one of the major problems with css div site development, if IE had implemented the table / cell css standards this wouldn't be such a major issue, but they didn't.
|
|
john_dush
Joined: May 07, 2000
# Posts: 144
|
Posted: 2005-Apr-08 16:03
Lizardz - thanks a lot! That helps. It's all about page folw isn't it? & as soon as positioning is absolute, the divs are ignored by page flow.
We have designed a content management system and are trying to move into layers/css from tables/ css. We want users to be able to add text in the main body of the page, but the links / info bar at the foot of the page to move down, depending on how much text is in the main page body.
So would this work?-
Absolute positioning of a navbar div to the left and a header /logo area across the top (absolute posn. therefore not in page flow). A div for the "main body" - page flow says it appears top left, so position it relatively so it starts displaying in and down from the other absolutely positioned divs and doesn't overlap. Another div - again no absolute positioning - so this should appear naturally under the previous "main body" div? And therefore move down depending on the text in the main body?
Thanks
|
|
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Apr-08 19:44
That's exactly the method I used on a commercial site I did a while ago, but there are some drawbacks. The main one is that if your content is shorter than your left nav, the bottom footer bar will get overrun by the left nav div. I use spacer divs to handle that, but it's annoying, and we often forget, leaving the footer sticking out from the lower end of the left nav, which doesn't look very good.
The only way I've found to avoid this is to make this structure:
<div header></div>
<div container>
<div left nav></div>
<div center content></div>
</div>
<div footer></div>
centercontent has margin = width of leftnav, accounting for box model issues with IE 5, I use IE conditionals to handle that.
Left nav is floated left.
container is position relative
footer is relative, and has 'clear:both' added in case the left nav is longer.
This is a pain, and adds some EXTREMELY ANNOYING IE bugs, for example with that layout, in IE 5x windows, any list item style bullet moves to the RIGHT of the list item, there's a hack to fix that but I can't remember it off the top of my head.
There's also problems with how browsers handle floats and clears, I've found that if you clear an item in the content div, it also clears the left nav, which ruins the layout.
Two not perfect options. Sad thing is, a two cell table handles that perfectly, again, the css table stuff was supposed to let you emulate that behavior with divs, but IE didn't implement it.
The more stability I need, given a column based layout, the more likely I'll decide to use a very simple table, only for the columns, leaving the header and footer as divs, that completely avoids all hacks, is extremely clean, and very stable. Also avoid using colspan due to an IE bug.
|
|
john_dush
Joined: May 07, 2000
# Posts: 144
|
Posted: 2005-Apr-14 11:56
Thanks - will try.
|
|
john_dush
Joined: May 07, 2000
# Posts: 144
|
Posted: 2005-Apr-14 15:41
I thought that specifying "absolute" positioning meant it was out of page flow completely. That's not the case, is it? If and absolutley positioned Div is nested within a relatively positioned "container" div, the absolute positioning is calculated relative to where the container div starts - am I right?
Jeepers, this is heurting my head...
|
|
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Apr-14 16:55
Yes, you're right, it's positioned relative to the closest parent container that has position relative. CSS is hard, I always laugh when I hear people say it's easy. But as long as you keep the css reaasonably close to your skill level, where you are using stuff that you more or less understand, and do testing cross browser, it's ok.
|
|
g1smd
Staff
Joined: Jul 28, 2002
# Posts: 10418
|
Posted: 2005-Apr-14 19:47
CSS for styling is easy. Replacing font tags with an external style sheet is easy.
CSS for positioning is difficult. Just to clarify.
|
|
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Apr-15 06:39
Hard to know where the line is:
ul, li, these would seem to be styling, but have very different treatments cross browser, IE, Opera, Gecko, KHTML, all treat their padding and boxes slightly differently. To me what makes all CSS hard is that when you start, you don't know what the truly safe things are, there's no real way to learn that without trying almost all the stuff. And then when you say, hmm, I'll just float this here, clear that there, boom...
Since it all interacts, styling per se only becomes easy once you know what styling per se is, and what it isn't. For me, creating the CSS for a site usually takes me longer, and is less stable, than creating the programming for a site. It's that cross browser/ cross platform thing. Styling moves to the box model very quickly, hx tags, p, ul, the line is pretty fuzzy between those and positioning, bugs happen without positioning, latest thing I'm doing doesn't use positioning, but has lots of little glitches and bugs, box model things, hacks, and that's a very simple layout, more or less.
|
|
You are not permitted to post messages in this forum or topic, because of one or more of the following reasons:
- You have not yet logged in, or registered properly as a member
- You are a member, but no longer have posting rights.
- This is a private forum, for which you do not have permissions.
If you are a recent member, it's possible that you simply have not yet confirmed your account. Please
check your email for a message entitled 'JimWorld Forums: Confirm Your Account' and follow the instructions
contained within.
If you cannot find this message, click here to Re-Send it.
|
If you are still experiencing problem, please read the
Login Assistance
Article for some advice on what may be causing your login not to work properly.
|
Switch to Advanced Editor and ...
Create a New Topic
or Reply to this Thread
|
|
Inbox
