Div elements behave weird when resizing the browser's window

StackOverflow https://stackoverflow.com/questions/18752245

  •  28-06-2022
  •  | 
  •  

Question

I have made a template for a website and the problem is that when I resize the browser's window or I am on a mobile phone or tablet, the head, footer and div.hero are "cut". It is a html5b template with css reset, while not responsive.

Here is the HTML: (I have also made a fiddle with this HTML and the css I used. If you scroll right you are about to see what I am talking about. http://jsfiddle.net/S77FC/2/. But keep in mind that head does not appear there, just in case the "bug" is in there)

<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="/css/main.css">

    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js">      <\/script>')</script>
    <![endif]-->
</head>
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->
<body>

    <header>
        <div class="wrapper clearfix">  
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Lorem</a></li>
                    <li><a href="#">Ipsum</a></li>
                    <li><a href="#">Dolor</a></li>
                    <li class="right"><a href="#">Sit Amet</a></li>
                </ul>
            </nav>
        </div>  
    </header>

    <div class="hero">
        <div>
            <h1>Lorem ipsum dolor sit amet.</h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
        </div>
    </div>
    <div id="main" class="wrapper clearfix">

        <div class="infobox">
            <h3>Lorem ipsum.</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>

        <div class="infobox">
            <h3>Lorem ipsum.</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>

        <div class="infobox">
            <h3>Lorem ipsum.</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>

    </div>

    <footer>
        <div id="top">
            <div class="wrapper clearfix">
                <div class="footerbox">
                    <h3>Lorem ipsum</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Lorem</a></li>
                        <li><a href="#">Ipsum</a></li>
                    </ul>
                </div>
                <div class="footerbox">
                    <h3>Support</h3>
                    <ul>
                        <li><a href="#">Lorem</a></li>
                        <li><a href="#">Ipsum</a></li>
                        <li><a href="#">Dolor</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js </script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
    <script src="../js/main.js"></script>
</body>
</html>
Was it helpful?

Solution

These are all CSS issues. Width-wise, you have an element within your header (<div class="wrapper clearfix">...</div>) that has an explicit width of 960px. The widths of header, div.hero and footer will be given by the width of the browser window. So, if the browser window is less than 960px wide you get div.wrapper overflowing which causes the unwanted yellow part to show.

Probably what you want to do is set min-width: 960px; on your body element.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top