•  11-06-2023
  •  | 
  •  

Question

I am trying to make the navigation section of my site responsive but cannot seem to get it to work the way I want to. Best way is to view the fiddle and see what I mean.

Currently when the browser is re-sized the blue div contracts until it meets the black div. The black div remains where it is and scroll bars appear! What I actually want this to do is for the red divs to be pushed left when the black and blue divs touch whenever the window is re-sized. When the window continues to shrink and the red divs are pushed left they will stop moving as soon as they touch the green div (scroll bars to appear).

I have tried converting things to %'s and changed the positioning but just cannot work this out! I need to learn and understand how this works before I am able to continue withe rest of the site.

Any help is much appreciated.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Fluid</title>

    <style>
        #container{position: relative; margin: 0px auto; width: 100%; max-width: 1000px; border: 2px solid blue;}
        #logo-and-nav-bar{position: relative; width: 750px; height: 175px; margin: 0px auto; border: 2px solid black;}      
        #logo {position: absolute; top: 5px; width: 200px; height: 70px; border: 2px solid green; text-align: center;}
        #nav-bar-upper, #nav-bar-lower {position: absolute; margin-left: 36%; width: 470px; border: 2px solid red;}
        #nav-bar-upper{top: 5px;}
        #nav-bar-lower{top: 65px;}
        #nav-bar-upper > ul > li, #nav-bar-lower > ul > li {display: inline; padding: 0 8px 0 8px; list-style: none;}
        #blower{position: absolute; top: 150px; left: 600px; border: 2px solid red;}
    </style>
</head>

<body>
<div id="container">

<div id="logo-and-nav-bar">
    <div id="logo">.jpeg Logo<br />In Here!</div>

        <div id="nav-bar-upper">
          <ul>
              <li><a href="#">Item A</a></li>
              <li><a href="#">Item B</a></li>
              <li><a href="#">Item C</a></li>
              <li><a href="#">Item D</a></li>
              <li><a href="#">Item E</a></li>
              <li><a href="#">Item F</a></li>
          </ul>
        </div>

        <div id="nav-bar-lower">
            <ul>
              <li><a href="#">Item G</a></li>
              <li><a href="#">Item H</a></li>
              <li><a href="#">Item I</a></li>
              <li><a href="#">Item J</a></li>
              <li><a href="#">Item K</a></li>
              <li><a href="#">Item L</a></li>
          </ul>
        </div>
       <div id="blower">Tel: 1234 56789</div> 
</div>  

</div>
</body>
</html>
Was it helpful?

Solution

Instead of

#logo-and-nav-bar {
    width: 750px;
}
#nav-bar-upper, #nav-bar-lower {
    margin-left: 36%;
}

use

#logo-and-nav-bar{
    width: 750px;
    min-width: 680px;
    max-width: 100%;
}
#nav-bar-upper, #nav-bar-lower {
    right: 0;
}

Demo

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