Solved

HTML/CSS width formatting problem

Posted on 2015-02-21
8
216 Views
Last Modified: 2015-02-22
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
Comment
Question by:elepil
  • 4
  • 2
  • 2
8 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 

Author Comment

by:elepil
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
I don't cut and paste code.  I work with live links or I move on to other things.

Cd&
0
 

Author Comment

by:elepil
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:elepil
Comment Utility
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:elepil
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now