SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot NZ Joe's Avatar
    Join Date
    Apr 2001
    Location
    Kapiti, New Zealand
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Avoiding overlapping divs

    Bear with me, this could take a while. I am building a page for an intranet that will have three columns, each with its own style. What I have done is created each column within a div, positioned by the stylesheet. The problem is that in a smaller than maximised window, the right column overlaps the centre column, rather than it wrapping. How can I get the centre column to wrap its text so that it is visible, no matter what the window size.

    Here is the relevant code:

    Code:
    <div width="100%">
      <div class="leftnav">
        Navigation stuff goes here
      </div>
      <div class="bodytext">
        The main body text goes in here.  This is the stuff that I want to wrap in smaller windows
      </div>
      <div class="quicklinks">
        Some more stuff here
      </div>
    </div>
    The style sheet stuff:

    .leftnav{
    position:absolute;
    top:50;
    left:0;
    width:150;
    }

    .bodytext{
    position:absolute;
    top:60;
    left:180;
    width:400;
    }

    .quicklinks{
    position:absolute;
    top:60;
    right:5;
    }

    I have tried it without using width, but it doesn't work

    Thanks in advance
    Gravity always wins

  2. #2
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    .leftnav
     {
     position:absolute; 
     top:50px; 
     left:0px; 
     width:150px; 
     } 
    .bodytext
     {
     margin-left:180px;
     margin-right:180px;
     margin-top:60px;
     }
    .quicklinks
     { 
     position:absolute; 
     top:60px; 
     right:5px;
     width:145px;
     }
    adjust the width of the left and right page section in conjunction with the left and right margins of the center section. This will fix the size of the left and right sections and make the center "fluid".

    Make sense?

  3. #3
    SitePoint Zealot NZ Joe's Avatar
    Join Date
    Apr 2001
    Location
    Kapiti, New Zealand
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It makes perfect sense. Thanks very much, it works perfectly.
    Gravity always wins

  4. #4
    SitePoint Zealot NZ Joe's Avatar
    Join Date
    Apr 2001
    Location
    Kapiti, New Zealand
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's another similar question related to the same page. The left column has much less content than the centre column. I want to set a background colour in the left column that goes all the way to the bottom of the page. How can I do this? I have tried setting background-color in the stylesheet, but it doesn't work.
    Gravity always wins

  5. #5
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by NZ Joe
    Here's another similar question related to the same page. The left column has much less content than the centre column. I want to set a background colour in the left column that goes all the way to the bottom of the page. How can I do this? I have tried setting background-color in the stylesheet, but it doesn't work.
    use background: #fffff;
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  6. #6
    SitePoint Zealot NZ Joe's Avatar
    Join Date
    Apr 2001
    Location
    Kapiti, New Zealand
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've done that, but the colour only fills to the bottom of the content in that column. I want it to go to the bottom of the page.
    Gravity always wins


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
  •