SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute problem

    I'll try to explain what's wrong.

    This is in my .css

    Code CSS:
    #content_left {
    	position: absolute;
    	left:20px;
    	top:140px;
    	width: 150px;
    }
     
    #content_mid {
    	margin: 0 190px 0 190px;
    	min-width: 600px;
    }
     
    #content_right {
    	position: absolute;
    	right:20px;
    	top:140px;
    	width: 150px;
    }

    As you can see this creates 3 parts of the side: left, middle and right.
    Now when i make the window smaller so when i drag the right side to the left, the content_right will go with it and overlap the content_mid.

    Does anyone know how i can solve this?

  2. #2
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Cary, NC
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you can see this creates 3 parts of the side: left, middle and right.
    Now when i make the window smaller so when i drag the right side to the left, the content_right will go with it and overlap the content_mid.

    Does anyone know how i can solve this?
    What would you like to happen instead? That will affect what solution is appropriate...

    The righthand box will overlap the middle one only when the viewing window reaches the minimum height you specified (600px). So you could remove that rule and it doesn't overlap. But assuming you want the center column not to contract smaller than 600px, I'm pretty sure overlapping will have to occur with absolutely positioned elements and a fluid, min-width center box.

    Here are three options: 1. Add a 'z-index' value to your center content box, so that when they converge the righthand column will 'underlap' instead. 2. Fix the width of the center column, so that it's not fluid. 3. There's a floated solution for 3 columns I've seen somewhere, that when the browser size gets to a certain minimum width, the right column clears and becomes a footer... can't recall where I've seen it, but I'll take a look.

    Cheers,
    Nathan

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Cary, NC
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, here's a listing of many 3-column CSS solutions:

    http://css-discuss.incutio.com/?page=ThreeColumnLayouts

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys, but i can't find a good layout without the first 2 points onwired mentioned.

    Quote Originally Posted by onwired View Post
    The righthand box will overlap the middle one only when the viewing window reaches the minimum height you specified (600px). So you could remove that rule and it doesn't overlap. But assuming you want the center column not to contract smaller than 600px, I'm pretty sure overlapping will have to occur with absolutely positioned elements and a fluid, min-width center box.
    Exactly

    Well for now i'll just use a z-index. If someone finds or already has a solution please post here because it might be interesting for other people aswell. Thank you

  5. #5
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add this to your style sheet:

    Code CSS:
    body {
      position: relative;
      min-width: 980px;
    }

    Embed this in the head of your html, after any other embedded styles or style sheet links:

    HTML Code:
    <!--[if lte IE 6]>
    <style type="text/css">
    body {
    width:expression( documentElement.clientWidth < 980 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 980 ? "980" : "auto") : "980px") : "auto" );
    }
    </style>
    <![endif]-->


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
  •