Solved

HTML/CSS width formatting problem

Posted on 2015-02-21
8
231 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
ID: 40623590
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
ID: 40623597
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
ID: 40623611
I don't cut and paste code.  I work with live links or I move on to other things.

Cd&
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:elepil
ID: 40623616
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40623636
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
ID: 40623727
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
ID: 40624204
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
ID: 40624298
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

808 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