?
Solved

HTML/CSS width formatting problem

Posted on 2015-02-21
8
Medium Priority
?
252 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 

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 2000 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: 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.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

764 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