Skip navigation
KINNEY201
Currently Being Moderated

Outside container in place, yet contents moving when zooming and in IE.

Aug 27, 2013 7:41 AM

Tags: #div #alignment #container

Hello,

 

Been working on a new page for about a week and have hit a brick wall.

 

Placed a div container around my entire contents in hopes to keep them locked at all times, however, this is not the case.

 

In Chrome and Firefox, when zooming in and out, you can see the right side shifting. (And is it me, or does the right column look longer than the left by just a hair???

 

And in IE, it doesn't even look like my page.  WHY?

 

http://www.saintleo.edu/VirtualTour/demo6.html

 

I hope you can see what I'm asking for.  As always, I appreciate your time and assistance.

 

Kind regards,

JK

 
Replies
  • Currently Being Moderated
    Aug 27, 2013 10:14 AM   in reply to KINNEY201

    Remove this:

    div#container {

      left: 0;

      margin: auto;

      position: absolute;

      top: 0;

      right: 0;

      width: 1160px;

      height: 384px;

    }

     

    Replace it with this:

     

    body {

    background:#275d39;

    width:1160px;

    margin: 0 auto;

    position:relative;

    }

     

    And this:

     

    /*thumbnails*/

     

    #thumbs {

    color: #666;

    font-family:Arial, helvetica, sans-serif;

    font-size: 13px;

    width: 230px;

    }

    #thumbs .thumb {

    padding:11px 8px;

    background:#275d39;

    min-height:55px;

    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 27, 2013 1:01 PM   in reply to KINNEY201

    You're still using position:absolute on your #thumbs. Absolute positioning removes content from the normal document flow and results in many layout problems for new web designers.  Default CSS positioning (static or unspecified) is usually the best approach.  APDivs are rarely used in layouts. 

     

    In terms of code errors, you have a stray </div> tag on line 116 of your markup. This could effect less forgiving browsers like IE10 and Chrome.   Check your code for other errors as well.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.saintleo. edu%2FVirtualTour%2Fdemo6.html

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 28, 2013 12:41 PM   in reply to KINNEY201

    IMO, you have a very poorly crafted template.   For something this simple, you should go back to basics. 

     

    Copy & paste this code into a new, blank document and play with it.  In the long run, you'll learn more from working with good code and a stable layout than you will with what you have now.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5, 3-columns</title>
    
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    <style>
    * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    
    body {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    background-color: #275d39;
    color: #FFF;
    }
    
    #wrapper {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden; /**float containment**/
    }
    
    /**middle**/
    section {
    width: 56%;
    float: left;
    }
    
    /**left and right**/
    aside {
    width: 22%;
    float: left;
    }
    
    aside img {
    vertical-align: middle;
    border: 5px groove #FFF;
    }
    
    aside p {
    padding: 6px;
    font-weight: bold;
    min-height: 75px;
    border: 2px solid #CCC;
    border-bottom: none;
    }
    
    /**add bottom border to last p only**/
    aside p:last-child { border-bottom: 2px solid #CCC}
    
    /**on mouseover**/
    aside p:hover {
    cursor: pointer;
    background: #e2ae0e;
    color: #275d39;
    }
    
    footer {
    clear: both;
    padding-top: 45px;
    padding-left: 45px;
    }
    
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    
    <!--left column-->
    <aside>
    <p><img alt="description" src="http://placehold.it/70x44">
    some text</p>
    
    <p><img alt="description" src="http://placehold.it/70x44">
    some text</p>
    
    <p><img alt="description" src="http://placehold.it/70x44">
    some text</p>
    
    <p><img alt="description" src="http://placehold.it/70x44">
    some text</p>
    
    <p><img alt="description" src="http://placehold.it/70x44">
    some text</p>
    </aside>
    
    
    <!--middle content area-->
    <section>
    <img alt="description" src="http://placehold.it/560x375">
    </section>
    
    <!--right column-->
    <aside>
    <p><img alt="description" src="http://placehold.it/70x44">
    some text</p>
    
    <p><img alt="description" src="http://placehold.it/70x44">
    some text</p>
    
    <p><img alt="description" src="http://placehold.it/70x44">
    some text</p>
    
    <p><img alt="description" src="http://placehold.it/70x44">
    some text</p>
    
    <p><img alt="description" src="http://placehold.it/70x44">
    some text</p>
    </aside>
    
    <!--begin footer-->
    <footer> Your footer goes here... </footer>
    
    <!--end wrapper-->
    </div>
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 29, 2013 9:42 AM   in reply to KINNEY201

    #1  To add space between thumbnails and text, add a margin-left to the aside img selector:

     

    aside img {

    margin-right: 12px;  /**adjust value as needed**/

    vertical-align: middle;

    border: 5px groove #FFF;

    }

     

    #2 I don't see why not providing you use some JavaScript onClick event triggers to show hide videos.

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points