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,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    •