asked on

HTML/CSS width formatting problem

My problem involves synchronizing the RIGHT EDGE of multiple sections of my HTML page such that resizing the browser will always make the RIGHT EDGE of the header, footer, and middle section align perfectly. As is, the header and footer works perfect, it's what's sandwiched in the middle that's the problem.

I could really appreciate any help from experts in CSS/HTML out there.

P.S. My code snippet looks long, but most are irrelevant to my problem. It's really only the #header, #footer, and #appointmentsDiv CSS id styles that are involved.

<!DOCTYPE html>
<html>
    <head>
        <title>Appointments Maintenance</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0 auto;
                
            }
            #header {
                background: #CCCCCC;
                width: 100%;
                height: 100px;
                margin-bottom: 0px;
            }
            #container {
                height: 82%;
                margin-bottom: 0px;
                min-width: 960px;
            }
            #calendarDiv {
                width: 200px;
                background: #dfe7ed;
                float: left;
                height: 100%;
                min-height: 550px;
                margin-right: 0px;
            }
            #appointmentDiv {
                float: left;
                width: 79%;
                min-widt: 760px;
                height: 100%;
                min-height: 550px;
                background: #f5e6da;
                margin: 0 auto;
                overflow-x: auto;
            }
            #footer {
                clear: both;
                height: 25px;
                background: #f0daee;
            }
            
            table {
                max-width: 100%;
                border: 0px solid #000;
                /* Has to be 'collapse'. 'separate' will not show 
                   border for <tr> */
                border-collapse: collapse;
            }
            tr {
                border-bottom: 1px solid green;
            }
            td {
                text-align: left;
                vertical-align: top;
                border: 0px solid #FF0000;
            }
            .timeCell {
                border: 0px solid purple;
                color: #999;
                width: 56px;
                padding-left: 5px;
                padding-right: 5px;
            }
            ac { /* ac stands for appointment cell */
                display: block;
                border: 1px solid #CCC;
                border-radius: 10px;
                padding: 5px;
                width: 250px;
                height: 80px;
                box-shadow: inset 0px 0px 10px -2px #333;
                background-color: cornsili;
            }
            ac2 { /* ac stands for appointment cell */
                display: block;
                border: 1px solid #CCC;
                border-radius: 10px;
                padding: 5px;
                width: 250px;
                height: 174px;
                box-shadow: inset 0px 0px 10px -2px #333;
            }
            ac3 { /* ac stands for appointment cell */
                display: block;
                border: 1px solid #CCC;
                border-radius: 10px;
                padding: 5px;
                width: 250px;
                height: 280px;
                box-shadow: inset 0px 0px 10px -2px #333;
            }
            .clearfix:before, .clearfix:after {
                content: "";
                display: table;
            }
            .clearfix:after {
                clear: both;
            }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body id="body">
        <div id="header">This is #header</div>
        <div id="container">
            <div id="calendarDiv">This is #calendarDiv</div>
            <div id="appointmentDiv">
                <table>
                    <tr>
                        This is #appointmentsDiv
                    </tr>
                    <tr>
                        <td class="timeCell">12:00am</td>
                    </tr>
                    <tr>
                        <td class="timeCell">12:15am</td>
                        <td><ac>12:15am-12:30am</ac></td>
                        <td><ac>12:15am-12:30am</ac></td>
                    </tr>
                    <tr>
                        <td class="timeCell">12:30am</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="timeCell">12:45am</td>
                        <td rowspan="2"><ac2>12:45am-01:15am</ac2></td>
                        <td><ac>12:45am-01:15am</ac></td>
                        <td><ac>12:45am-01:15am</ac></td>
                    </tr>
                    <tr>
                        <td class="timeCell">01:00am</td>
                        <td><ac>01:00am-01:15am</ac></td>
                    </tr>
                        <tr>
                        <td class="timeCell">01:15am</td>
                    </tr>
                    <tr>
                        <td class="timeCell">01:30am</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="timeCell">01:45am</td>
                        <td rowspan="2"><ac2>01:45am-02:00am</ac2></td>
                        <td><ac>01:45am-02:00am</ac></td>
                    </tr>
                    <tr>
                        <td class="timeCell">02:00am</td>
                        <td><ac>02:00am-02:15am</ac></td>
                    </tr>
                        <tr>
                        <td class="timeCell">02:15am</td>
                        <td rowspan="3"><ac3>02:15am-02:45am</ac3></td>
                        <td rowspan="2"><ac2>02:15am-02:30am</ac2></td>
                    </tr>
                    <tr>
                        <td class="timeCell">02:30am</td>
                    </tr>
                    <tr>
                        <td class="timeCell">02:45am</td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="footer">#footer
        <input id="btnShowBox0" type="button" value="Button" /></div>
    </body>
</html>

Open in new window

COBOLdinosaur

The content of the appoinment div is a table and tables do not follow the normal rules determining dimensions; which is why they are shunned for layout because you have very little control over how they will render across different browser, resolutions, and devices.

If you post a link to the page we might beable to play with it to get is more responsive, but making tables responsive is like trying to herd cats. You might be better off to start over and if you need the table do an alternate version where the positioning is less critical or do a design thet forces the other elements to conform to what the table does using scripting to adjust dimensions and positioning.

Just from looking at the code I can really understand what the table looks like. It looks like some of the rows are incomplete.

Cd&

elepil

ASKER

Thanks for responding, COBOLdinosaur.

How do you mean post a link? I've already provided the code. You can copy and paste it to any editor if you wanted to do trial-and-error.

My problem isn't really positioning, it's simply layout-ing. What complicated the #appointmentsDiv section is the mixture of a fixed-size (#calendarDiv) section to its left. If I took out #calendarDiv, I wouldn't have this problem. Unfortunately, the specs say #calendarDiv has to be to the left of the #appointmentsDiv.

COBOLdinosaur

I don't cut and paste code. I work with live links or I move on to other things.

Cd&

elepil

ASKER

What you said doesn't make sense. What good would a link give you? You'd still need to load the code in an editor to experiment with it. It's best you move on then.

Tom Beck

Just change your #appointmentDiv css to this:

#appointmentDiv {
background: none repeat scroll 0 0 #f5e6da;
height: 100%;
margin: 0 0 0 200px;
min-height: 550px;
overflow-x: auto;
}

elepil

ASKER

Thanks for responding, Tom. You nailed it!

But before I assign the points, may I ask you something. You essentially took out the float: left and width: 79%, and that was all it took. I took out the extra parameters you placed in the 'background' property except the color (which was what was originally there) and removed the 'margins' as well, and I could not perceive any change. Can you please help me understand what the following was supposed to contribute?

background: none repeat scroll 0 0 #f5e6da;
margin: 0 0 0 200px;

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

elepil

ASKER

Thank you very much for your help, Tom.

Here's what's weird. With or without the margin: 0 0 0 200px, it makes no difference in IE, Moz, Opera, and Chrome, but it actually breaks Safari, making it look like the original problem I had. I, like you, agree that it SHOULD be there, but that's not what's happening.

Another thing, you said overflow-x: auto is optional. Try removing it. Without it, the #appointmentsDiv now overflows at the BOTTOM and becomes unsightly. This just defies my understanding.