How to create a absolute element overlapping several rows in a calendar (table) design?

Question

Hi

Im trying to create a calendar in an HTML table design with css element div elements as appointment blocks in absolute positioning which is working fine. But since the block is absolute, which makes me able to overlap as many rows as I want to create appointments, it dosnt stretch horizontally which is what I want. How can I make the absolute div block stretch? Or is there a better solution? (Constraint: has to support IE6+). The issue is highlighed below.

Below is a snippet example of the code:

" .. a href="#" class="calendar_dayview_dayformatting">09 "

.preference {height: 60px; min-width:445px ; border: 1px solid #ffc61e; background-color: #ffc61e; margin-top: -1.4em; margin-left:2.5em; position:relative;}

.preference_appointment {height: 180px; min-width:445px ; border: 1px solid black; background-color: #f9eaad; position:absolute; margin-top:-1px;z-index:1;}

Thanx Michael

Answer 1

If you specify the right and left css properties the absolutely positioned div's width will expand to the width of its container offset by the right and left property values.

Can you provide a sample of html as well as the css please.

Answer 2

It would be helpful if you posted more information about your problem, including some sample markup and a link to a demo page.

Based on what you've posted so far, it looks like you're using min-width which isn't supported by IE6.

If you want to use absolute positioning in IE, you'll also need to specify both a vertical position (top or bottom) and a horizontal position (left or right) in absolute (e.g. px, em) or relative units (e.g. %). You can't specify both left and right in IE6 either, contrary to what the earlier response suggests.

Other than those caveats, absolute positioning sounds like it should work for what you want across all the browsers you need to support. However, without more information I can't provide any more specific advice.