SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css layout trouble

    Hello.

    I am having a lot of troubles with using css for layout.
    I was hoping you could help me?
    I made a really simple example of what I am trying to do:

    http://www.barretmonchka.com/connect...dexsimple.html

    I would like the blue div layer to contain (hold) the red div layer. I
    don't want the blue layer shorter than the red layer. I made the blue
    layer relatively positioned because it is centered and needs to be
    relatively positioned in order to contain absolutely positioned layers.
    I wanted the layers inside of the blue div absolutely positioned in
    order to place them properly. I don't want to set the height of the
    blue layer manually, I want it to expand to accommodate a change of text
    size. (Font size changes are the reason for this whole problem.)

    This is the end result of what I am trying to accomplish:
    http://salsa.uwdce.ca/~bmonchka/conn...ndex.html.orig

    Your help would be so much appreciated.



    Thank you,

    Barret Monchka

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, get yourself a doctype.
    Second, position your divs with margins instead of position: absolute/relative.

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Taking things one step at a time:
    You'd probably split your layout up into two columns.

    Code:
    #left { float: left; width: XXXpx; }
    #right { margin-left: XXXpx; /* same as the width of #left */ }
    Your left column would contain an unordered list with a large margin-top to push it down.
    Your right column would have a white border with images top and bottom for the curved corners.

    Have a go at that first and see how you go. We'll worry about the highlighting of the active tab later.

  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,

    If you want the right column to match the height of the left column (and vice versa) then you could use one of my basic 2 column layouts from teh sticky thread.

    A quick example here:

    http://www.pmob.co.uk/temp/salsa.htm

    Hope it helps


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
  •