SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    overlapping divs

    take a look at http://www.nasi.com/test.htm, and tell me what I'm doing wrong! Just working on a resdesign, but I'm having problems with relatively positioned divs. The middlebox and bottombox divs are positioned relatively (with the middlebox having some nested absolutely positioned divs), with clear:both; properties. The bottom box is overlapping with the middlebox. Do I need to do some z-index work, or is something I'm doing wrong? I want the bottombox div to slide in underneath the middlebox div (which I want to be height:auto everytime, but its not going that way. Do I need to put in some content on the right there? Any overall thoughts on this interface, to start with? The table at the top, any ideas how to div those with css-p instead of my table? Still thinking about it. Any help would be greatly appreciated.

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

    Haven't had time to take a proper look but it looks as though you have absolutely placed the leftcontainer and removed it from the flow which means that the bottombox will not sit below. You could either float the leftcontainer left or just place it statically and the bottombox would sit underneath.

    Hope that helps.

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    USA
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have this:
    <div id="bottombox">

    Why do you use id instead of class?
    .
    2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
    2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
    2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

  4. #4
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "leftcontainer" is nested in "middlebox", which is relatively positioned and "leftcontainer" is absolutely positioned within "middlebox", but I'll try the float:left. I use id tags when referring to divs from all the css tutorials and examples I've seen. It must be a better way? Is there arguments for or against this type, using "id" instead of "class" tags?

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

    Even though you have nested an absolutely placed element inside a relatively placed element that does not mean that the relative element knows anything about the absolutely placed element.

    An absolutely placed element is removed form the flow and although it is positioned in relation to its parent, the parent will not expand when the inner absolute element grows.

    Therefore content that follows your middlebox will only follow static content that is placed in middlebox. It will take no notice of any absolutely placed elements because they have been removed from the flow and aren't really there.

    Hope that makes sense.
    Is there arguments for or against this type, using "id" instead of "class" tags?
    An ID is supposed to be a unique reference in a page and as such should only be use once uniquely. (Although most browsers will let you get away with using it more than once I would advise against using it more than once.)

    An ID is good for identifying elements in the page that are used only once. Therfore you could use id for id="mainheader", id="footer" assuming that these elements will only be in one position on the page.

    The only difference with class is that you can use a class many times, whenever you need the same style applied again and again. e.g. class="red".

    It is good coding to identify your unique elements using id and your common elements using class.

    Hope this helps.

    Paul

  6. #6
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another reason for using id is for links within the same page. Because the name attribute of the <a> tag is deprecated, id is used instead, e.g:
    Code:
    <a href="#content" title="Go directly to the content.">Skip navigation</a>
    ...
    ...
    ...
    ...
    ...
    <div id="content">Content starts here
    ...
    ...
    </div>
    Andy.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com


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
  •