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


Tags: css,design,table,relative,absolute

Problem :

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



Solution :

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.


    CSS Howto..

    How do you apply diferent colors from diferent css rules to the same object?

    How can i refer to all of my tags in CSS?

    How do you scroll the page content over a cover image (like medium.com)?

    How to make 2 level scrolling tab in CSS like this in HTML 5

    html web shows header only in mobile view

    How does Apple position its slideshow inside a fixed-position box?

    How to expand my CSS3 menu and reduce its width

    How to change font color of select2 control using css

    CSS style not showing on print preview

    How to make css notifications without jQuery? [closed]

    How to use Javascript to check and load CSS if not loaded?

    How to Skew divs with css

    How to install CSS templates with Flask?

    How to position the GWT dialog to the bottom right corner of the browser?

    CSS - How to make rectangle with pointed sides? [duplicate]

    How to switch css property according to some condition

    Dilemma in deciding how to create CSS for H1, H2, H3 etc

    How do you put