HTML-放大/缩小时，我的内容变得混乱

Question

http://pastebin.com/1Yz1aF1S HTML/CSS

HTML code is in home.html CSS code is in stylesheet.css

Whenever I zoom in our out my content moves around rather awkwardly and breaks my page a bit. Was wondering how i could fix this issue and work to avoid this issue in the future? Images of the site can be found here! http://imgur.com/a/MbZkk

Still new to HTML and only just started learning it properly in University but I've been immensely enjoying it and am thinking about pursuing it as a career!

Answer 1

The page "breaking" looks to be the result of using float left and float right elements next to each other. If their is insufficient room, your right hand panel breaks to the next line but is still floated right.

You can achieve a non responsive layout that keeps both panels next to each other and locates the right hand panel flush with the right margin if there is room, but produces horizontal scroll bars if not, you can use table layout. A demonstration without using <TABLE> tags:

CSS

#panels
{   border: thin solid green; /* to see */
    min-width: 100%;
    display:table;
}
#leftPanel
{    border: thin solid red; /* to see */
     min-width: 40em;
     display: table-cell; 
}
#rightPanelContainer
{   display: table-cell;
    text-align: right; /* right justify */
}
#rightPanel
{   display:inline-block; /* allow panel to be justified */
    border: thin solid blue; /* to see */
    min-width: 20em;
    text-align: left;
}

HTML

<div id="panels">
    <div id="leftPanel">
          Left Panel
    </div>
    <div id="rightPanelContainer">
         <div id="rightPanel">
              Right Panel
         </div>
    </div>
</div>