The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

two horizontal divs in a div in normal flow? thanks

Just like other people who work on css (maybe just newbie like me), I encountered a lot of problem, it seems div prefers more constant coordinates, but in most case, I would like to make it depends on its parent, for example, in a div, if I want to put a fixed-height bottom and a fixed-height footer, and make the content use all space in the middle, and in the content div, I want to make two div share the left side and another fixed-width div use the right side, how can I do it? it is relative easy to use table, but that doesn;t work under NS, and I feel it is better just use div with table too. If someone could answer this question, I will really appreciate.

But a question relatives to that first, in normal flow, div will be under the previous div, I have a div now, it is in normal flow, and in this div, I want to put two divs, one will use a fixed width space on the right, and another will use the space on the left, how can I do that?

Have a look at my 3 col examples in the sticky thread at the top and see if thats the sort of thing you are looking for. Also have a look at the FAQ and the section on floats and 100% height and footers.)

To get elements to align horizontally you need to float them or place them with positioning depending on the circumstance. Block elements (divs p etc) are just that and will end with a line-feed so that the next element will automatically start on the next line.

To have a right element and a left element with fluid content in the middle you just float one element left and one element right and then set margins legft and right on the centre content to clear the floats. The centre column is fluid and the outside columns are a fixed width.

If that doesn't answer any of your questions then perhapsa diagram of what you wnat might help as I couldn't quite see what you wanted.

I should mention that if you are trying to copy all the characteristics of a table to the final detail then you may as well use a table

CSS behaves diffently ansd although it can be co-erced to beahve like a table (as in my demos) I would recommend beginners to start simply and get to know css before jumping in with multi-column layouts.

Practice on a few examples and try to work out whats happening and then ask questions when you get stuck. Its the best way to learn and then you will design with the way that css works rather than trying to force it to do something it doesn't want to.

Hybrid simple table layouts (no nesting) styled fully with css are a good intermediate stage for those used to tables and just starting out in css.

Paul, thanks for so detailed reply, I didn't find your reply although I checked several time per day, thank you very much.

I am trying to work out a layout for my chatroom, so I need a header, a footer, and a content, in content area, I need two div on the left, vertically, on the right, I need one fixed-width div so I can display user list.

Problems are just keeping come out, you are right, I should read css document first and not try to force it to do what it is not designed to do, I went through quite a few documents, including some very good articles, but I can not say they really solve my problems. I checked your three columns solution, I had one work for me too, the difference is that I made my layout use exactly the window space, not scroll bar, you should understand when you consider what I am trying to work out is a chatroom layout(for sure, my layout only works under IE, really have no time to take care NS yet). But now, I need a solution that I can put those divs into a container div, kind a embed chatroom, so user can put a div into their page, and then embed my chatroom into that div, what I am trying to find out is how to put the header, footer, content into a div. In your three columns solution, the container of the columns is the body, so I think it is relative eaiser. I am not expecting I can find a easy solution, it seems it is quite hard even just make the layout in body tag. So I am trying to ask some related question, see if I can find out some solution by myself.

In this thread, I asked how to create two horizonal divs, it is for the userlist div I meationed above, the left div will be the one that shows chat message, I am using float and margin-right plus negative offset to make it work. In the userlist div, I need some divs for user infomation, I have issue again, I make those divs position absolute, but they will cut by the userlist div. I remember someone mentioned in an article that you had better not mix float with absolute. Any suggestion?

I'm having a hard time visualising what you want even though I know you are trying hard to explain it

If you have the time then draw an image of what you want and attach it to a post (or link to it inline) then we can see exactly what you want.

I will then be able to tell you immediately how to do it or if in fact its not possible to do in css.

I remember someone mentioned in an article that you had better not mix float with absolute. Any suggestion?

Absolute elemnts are removed from the flow and as far as they are concerned nothing else exists on the page. Absolute elements will not put any pressure on other elements and will just go exactly where they are positioned regardless of whats there already.

The static elements will also behave as though the absolute element doesn't exist and will not avoid or interact with it in anyway. For this reason you have to explicitly control them and therefore you cannot have flowing content around absolute elements unless you make special provisions.

It all depends on the situation as to what you need to use and whats best for the job. If you can supply a diagram, or an example that you may have seen then I'm sure we can help you.