Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Right column overlaps content when window is resized

    Hello. This is my first time posting. If this has been posted already, I apologize upfront.

    I am using a two column layout for a site I'm working on. When I resize the browser, the right column overlaps my main content. I've tried using overflow: hidden on the right column div, but this hasn't worked.

    The site is at http://students.depaul.edu/~sakel/Research.htm

    The code is valid under XHTML Transitional. Any help would be greatly appreciated. Below is the CSS...


    body
    {
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    background-color:White;
    color: #202020;
    font-family: Verdana, Arial;
    }

    #contentwrapper
    {
    float: left;
    width: 100%;
    }

    #contentcolumn
    {
    margin-right: 200px; /*Set right margin to RightColumnWidth*/
    }

    #rightcolumn
    {
    float: left;
    width: 200px; /*Width of right column in pixels*/
    margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
    margin-top: 30px;
    }

    .innertube
    {
    margin: 10px;
    margin-top: 0;
    }

    .imageheader
    {
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    }

    .bg
    {
    background: url(researchbg.jpg);
    background-repeat: repeat-x;
    width: 100%;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The problem is with the poor arrangement of columns. If we follow the same logical order of presentation to the markup, then everything will be OK. Say, a two column layout with smaller one on right side can be constructed easily as
    Code:
    #right_column{
    float:right;
    width:200px;
    display:inline; /* may required to remove IE's 3px bug*/
    }
    #content{
    margin-right:200px;
    }
    Code:
    <div id="container">
       <div id="right_column"></div>
       <div id="content"></div>
    </div>
    Refer http://bonrouge.com/2c-hf-fluid(r).php

    PS: make sure that you have no divitis
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. I will give it a go and check out the site. I figured the layout was messy and needed sprucing up. I will let you know if I have any problems.

    Thanks again!

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Still having problems

    I reviewed the site and implemented the changes, however; I am still having problems with overlapping. In the example on the site you provided a link for, text is only used for the content area. In my case, I will need to use images inside the content area. Whenever the window is resized, the right column is pushed underneath the research image.

    I uploaded the updated site at http://students.depaul.edu/~sakel/Research.htm so you can see what I'm talking about. Any help is appreciated.

    Below is the relevant CSS...

    body
    {
    margin:0; padding:0; height:100%;
    font-family:arial, serif;
    background-color:white;
    }

    #wrap
    {
    background:url(bg200.gif) top right repeat-y;
    min-height:100%;
    margin:auto;
    position:relative;
    }

    * html #wrap {height:100%}

    #header
    {
    background: #dadeef url(logo.gif) right no-repeat;
    color:black;
    margin:0; padding:0;
    height:80px;
    }

    #right
    {
    float:right;
    width:200px;
    text-align:center;
    }

    #main
    {
    position:relative;
    margin-right:200px;
    }

    #inner-wrap
    {
    padding-bottom:80px;
    }

    #inner-wrap:after
    {
    content:" ";
    display:block;
    clear:both;
    }

    #footer
    {
    position:absolute;
    bottom:0;
    height:80px;
    background-color: #dadeef;
    width:100%;
    color:black;
    text-align:center;
    }

    #footer p
    {
    margin:0;
    font-size:1.5em;
    text-align:center;
    }

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Your image is 700px wide and sidebar is 200px. Thus you need to keep a min-width for your inner-wrap/ or wrap. Have a try with
    Code:
    #wrap {/*General.css (line 8)*/
    background:transparent url(bg200.gif) repeat-y scroll right top;
    margin:auto;
    min-width:900px;
    width:expression( documentElement.clientWidth < 900 ? "900px": "auto"); /*IE min-width hack */
    position:relative;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    effpeetee (07-10-2008)

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That line of code fixed it right up. It works in both FF and IE. No more overlapping! Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •