[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 260
  • Last Modified:

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

0
elepil
Asked:
elepil
  • 4
  • 2
  • 2
1 Solution
 
COBOLdinosaurCommented:
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&
0
 
elepilAuthor Commented:
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.
0
 
COBOLdinosaurCommented:
I don't cut and paste code.  I work with live links or I move on to other things.

Cd&
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
elepilAuthor Commented:
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.
0
 
Tom BeckCommented:
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;
}
0
 
elepilAuthor Commented:
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;
0
 
Tom BeckCommented:
Ignore the more elaborate definition for background. That was copied from Firebug and it's how the browser interpreted what you had for background in your css.

Adding 200px of margin to the left side of that second container is unnecessary in this case because of the fixed width of the left column. The body container is set to 100% width so the browser viewport is always filled.

If you really want to get down to it, the overflow-x: auto is not needed either since it is a default setting.
0
 
elepilAuthor Commented:
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.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now