HTML - My content becomes messed up when I zoom in/out

Question

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! https://i.stack.imgur.com/wHa3J.jpg

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!

This might help you: http://stackoverflow.com/questions/15233076/prevent-that-a-fixed-element-resizes-when-zooming-on-touchscreen — Vitor Paiva, Oct 09 '15 at 19:15
I think this may be more aimed towards mobile's if I'm not mistaken? — Sam Bell, Oct 09 '15 at 19:18
Use a HTML5 doctype tag ` ` and not XHTML1 Transitional. Are you using Dreamweaver? — hungerstar, Oct 09 '15 at 19:19
@hungerstar If the source is correct XHTML, there's nothing wrong with an XHTML doctype! (Actually the OP's source is not, but you get my point.) — Mr Lister, Oct 09 '15 at 19:30
@SamBell If you correct the errors that http://validator.w3.org finds, is it still as bad? — Mr Lister, Oct 09 '15 at 19:34
It seems you have outsourced data crucial for the understanding of your question. Please post all relevant code, images and resources **in the question itself**, if the link dies or changes your question will lose most if not all of its meaning! — Kyll, Oct 09 '15 at 20:07
I think I've somewhat fixed the problems. Instead of making my content/logo bars a width of 80.2% (I think it was something like that) I set the size in pixels instead. This fixes the issue of my page breaking when I zoom in or out unless you zoom out to something silly like 25%. — Sam Bell, Oct 09 '15 at 20:31

score 0 · Answer 1 · answered Oct 09 '15 at 23:26

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>

HTML - My content becomes messed up when I zoom in/out

1 Answers1