How to stop horizontal overlapping when the browser is resized?

Question

None of the solutions given previously in stackoverflow solved my problem. If anyone has solution to this, then please please please help me. I want: the horizontal scroll bar should appear when the browser is minimized and divs should not overlap each other

html code for header:

<header><label class="font_white">LIZA's World</label>
        <nav>
            <ul>
                <li><a href="hello.html" class="nav_font">hellohello &nbsp;&nbsp;&nbsp;|</a></li>
                <li><a href="hi.html" class="nav_font">HIHO &nbsp;&nbsp;&nbsp;|</a></li>
                <li><a href="hey.html" class="nav_font">Heyhey &nbsp;&nbsp;&nbsp;|</a></li>
                <li><a href="ciao.html" class="nav_font">Ciao Ciao Ciao Ciao &nbsp;&nbsp;&nbsp;|</a></li>
                <li><label class="nav_name">Liza</label></li>
                <li>
            <form id="search" method="get" action="hello.html" style="float:right">
             <input type="text" class="searchbar"  size="50" maxlength="120" value="Search..." />
             <input type="button" class="search_button"/> 
            </form>
                </li>
            </ul>
        </nav>

    </header>

css code for header and nav:

 html, body {
   overflow-x:scroll;
 }
header {
position: fixed;
height: 40px;
top: 0px;
width: 100%;
vertical-align: top;
background:#2748ab;
margin-left:-8px;
}
nav
{
position: fixed;
vertical-align: top;
margin-top:10px;
top: 0px;
float:left;
margin-left:23%;
width:76.5%;
}

I changed the nav as follows:

nav
{
 position: fixed;
 vertical-align: top;
 margin-top:10px;
 top: 0px;
 float:left;
 margin-left:320px;
 min-width:1000px;
}

now the overlapping problem is solved but, the horizontal scrollbar problem is not solved yet.

Answer 1

You need to add media in CSS, understand how to add media into css and make your website responsive.

/*------------------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-1024   - desktop (default grid)
 1024-768    - tablet landscape
768-480     - tablet 
 480-less    - phone landscape & smaller
 --------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) {
 .logo{

    width:80px;
   }     

 }

@media all and (min-width: 768px) and (max-width: 1024px) { 
 .logo{

    width:80px;
   }  }

@media all and (min-width: 480px) and (max-width: 768px) {
 .logo{

    width:50px;
   }   }

@media all and (max-width: 480px) {
 .logo{

    width:100%;
   }   
  }


/* Portrait */
@media screen and (orientation:portrait) { 
  .logo{

    width:100%;
   }  
 }
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ }


/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
 @media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

 /* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}

You just need to check which resolution you want to make responsive and particular CSS into that media. You need to use more inspect element for testing. You also add responsive menu code. So your header will adjust perfectly.

I will suggest you to use https://webflow.com for developing responsive website. So you dont need to worry about responsive headache.

Answer 2

If you measure the total outer width of the layout. and set the min-width of outer div or body. if resize the browser it shown horizontal scroll bar and alignment not varied.

Ex:

.outerdiv{min-width:1240px;}

or

body{min-width:1240px;}