CSS div content overlap

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

Can you tell what I'm doing today?

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?

 

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

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

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

 

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>

 

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.

 

Ah yes, sorry i misunderstood the query, glad you got it fixed now