SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    content disappears when I resize ??

    Hi guys,
    I am working on a full CSS site.......
    So far what i have.....
    I have set a background tile image and
    Three divs
    - ONe for a left border (6px wide)
    - one for the main body (750px wide)
    - one for a right border (6px wide)

    everything has been displaying perfectly and just as I want it...except when I resize the browser to less than 750px in width, the main body div and the right border disappear just leaving the background.....If I resize the browser wide again, all comes back to normal...

    I have tried many different things but cant fix it.....Any ideas...

    Thanks in advance

  2. #2
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What browser are you using and can you give us a link so we can look at the code?

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. (sorry site is not online, so I will post the code)
    Here is a variation that displays correctly, but disappears when resized to less than the width of the div's:

    body{
    background:url(../images/tilemain.jpg);
    }

    #left{
    background:url(../images/tileleft.gif);
    width:6px;
    float:left;
    height:100%;
    }
    #main{
    width:749px;
    background:#FFFFFF;
    height:100%;
    float:left;
    }
    #right{
    width:14px;
    background:url(../images/tileright.gif);
    height:100%;
    float:left;
    }


    <div id="left">
    <!-- Setup the left border -->

    </div>

    <div id="main">
    <div>
    <img src="images/header.gif" width="749" />
    </div>

    </div>

    <div id="right">

    </div>

    2) Here is a sample that does not disappear when resized, however, the borders do not run down 100%, they are only about 3 or 4 pixels in height:
    body{
    background:url(../images/tilemain.jpg);
    }
    #frame{
    width:769px;
    margin:0px;
    }

    #left{
    background:url(../images/tileleft.gif);
    width:6px;
    float:left;
    height:100%;
    }
    #main{
    width:749px;
    background:#FFFFFF;
    height:100%;
    float:left;
    }
    #right{
    width:14px;
    background:url(../images/tileright.gif);
    height:100%;
    float:left;
    }

    <div id="frame">

    <div id="left">
    <!-- Setup the left border -->

    </div>

    <div id="main">
    <div>
    <img src="images/header.gif" width="749" />
    </div>

    </div>

    <div id="right">

    </div>
    <br clear="all" />
    </div>

    Thanks once again

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's alright guys I just fixed it....

    cheers


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
  •