1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS div content overlap

Discussion in 'Web Development & Web Hosting' started by Fergal1982, Nov 28, 2008.

  1. Fergal1982

    Fergal1982 Petabyte Poster

    4,196
    171
    211
    Can you tell what I'm doing today? :D

    I've set up two divs containing various fields, and used absolute positioning in order to have them appear side by side.

    However, I have a slight problem. Within the left hand column, there are four comboboxes whose widths can expand beyond the start of the right hand column.

    I need a solution which allows the cbos to expand over the right hand div and still be selectable, whilst mainintaining the selectability of the right have column.

    I tried to use the z-index property to achieve this, but I end up with either the entire contents of the right hand div being unselectable, or the expanded cbo is unselectable in the crossover.

    Does anyone have any solutions?
     
    Certifications: ITIL Foundation; MCTS: Visual Studio Team Foundation Server 2010, Administration
    WIP: None at present
  2. Qs

    Qs Semi-Honorary Member Gold Member

    3,081
    70
    171
    My suggestion? Don't use absolute positioning, it's annoyingly picky and the overlapping problems you may experience are annoying to say the least.

    If you're going to use DIV tags to break-down a page then you'll need to make absolutely sure that everything sits nicely in place. You'll want to put all of the content in to the different areas as specified by your tags, and avoid stacking/overlapping or trying to be clever with combo boxes and the like because it will mess up :p

    Increase the width of the left tag so that it accomodates the combo box whilst reducing the width of the right-hand tag is the simplest option.


    Qs
     
    Certifications: MCT, MCSE: Private Cloud, MCSA (2008), MCITP: EA, MCITP: SA, MCSE: 2003, MCSA: 2003, MCITP: EDA7, MCITP: EDST7, MCITP: EST Vista, MCTS: Exh 2010, MCTS:ServerVirt, MCTS: SCCM07 & SCCM2012, MCTS: SCOM07, MCTS: Win7Conf, MCTS: VistaConf, MCDST, MCP, MBCS, HND: Applied IT, ITIL v3: Foundation, CCA
  3. ThomasMc

    ThomasMc Gigabyte Poster

    1,507
    49
    111
    I always find floating divs to be a better option as oposed to your method.

    HTML:
    <div style="width: 500px;border: 1px solid #000000;">
    <div style="float: left;">
    Col 1 
    </div>
    <div style="float: left;">
    Col 2
    </div>
    <div style="clear: both;">
    &nbsp;
    </div>
    </div>
    
     
    Certifications: MCDST|FtOCC
    WIP: MCSA(70-270|70-290|70-291)
  4. Fergal1982

    Fergal1982 Petabyte Poster

    4,196
    171
    211
    Floating divs are an unacceptable resolution for this situation unfortunately (I've tried it). Im using the two divs two create two columns of fields for a form (with some white space on the right where the combos can expand into where needed.

    If I float the divs, then the right hand column gets pushed down underneath when the page size is reduced.

    It seems that setting the z-index on both divs to be the same resolves the issue. In design I cant select the portion of the combo that passes under the right hand div, but in production it seems to work fine.
     
    Certifications: ITIL Foundation; MCTS: Visual Studio Team Foundation Server 2010, Administration
    WIP: None at present
  5. ThomasMc

    ThomasMc Gigabyte Poster

    1,507
    49
    111
    Ah yes, sorry i misunderstood the query, glad you got it fixed now :D
     
    Certifications: MCDST|FtOCC
    WIP: MCSA(70-270|70-290|70-291)

Share This Page

Loading...