SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Vancouver,BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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?

    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Vancouver,BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Thanks.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Vancouver,BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gee, it seems it is the filter: alpha(Opacity=80); on the parent div prevent the child div overflow, strange.

    try this

    <div id="test1" style="position:relative;left:50px; height:380px;width:136px;border-style: solid; border-width:1px;">
    <div id="test2" style="position:absolute;left:0px;top:200px;width:260px;border-style: solid; border-width:1px;">testtesttesttesttesttesttesttesttest</div>
    ...
    </div>

    and this

    <div id="test1" style="position:relative;left:50px; height:380px;width:136px;filter: alpha(Opacity=80);border-style: solid; border-width:1px;">
    <div id="test2" style="position:absolute;left:0px;top:200px;width:260px;border-style: solid; border-width:1px;">testtesttesttesttesttesttesttesttest</div>
    ...
    </div>


    the second, the child div cut by the parent div, can not think why filter could affect the overflow.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Looks like another ie bug

    You can get around it by wrapping another div around as follows and removing the position relative to the parent.

    Code:
    <div style="position:relative;left:50px;width:136px;"> 
    <div id="test1" style="height:380px;width:136px;filter: alpha(opacity=100);border-style: solid; border-width:1px;"> 
    	<div id="test2" style="position:absolute;left:0px;top:200px;width:260px;border-style: solid; border-width:1px;">testtesttesttesttesttesttesttesttest</div>
    	... </div>
    </div>
    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •