0

I kept searching on the Internet, but the only thing I get is how to avoid/prevent the div elements on wrapping/floating when resizing the browser. My problem is exactly the opposite: I have an horizontal menu and I'm trying to wrap down the elements (eg. Home, Contact etc.) once the browser is shrinking and then, to return to its initial state when the browser is maximized. Here is the HTML document:

<div id="menu">
<ul>
<li><a href="#index">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

And the CSS is something like this:

     #menu
          {border:1px;
           height: 40px;
           width: 400px;
           clear: both;
           float: left;
           position:relative;
           top:20px;}
     #menu ul
           {list-style-type:none;
            margin:0;
            padding:0;
            overflow:hidden;}
     #menu li
           {float:left;}
     #menu a:link,a:visited
           {display:block;
            width:100px;
            font-weight:bold;
            text-align:center;}

I tried to change the height and width to auto, remove/shift the clear, float, overflow and position tag, I even changed the float:left in "#menu li", to float:none, but then the menu elements get fixed one after another and it stays that way, even if I resize the browser. I also, divided each of the menu elements with div (is not in the code below), but without any succes. Do I have to change the CSS code entirely or to do this with js, jquery etc.? If so, how?

Camryn
  • 3
  • 1
  • 5

2 Answers2

0

You are setting the width of #menu to 400px which fixes that width, no matter how wide the browser window is. Use this one:

width:100%;
max-width:400px;
ByteHamster
  • 4,884
  • 9
  • 38
  • 53
  • Yup, it's true I didn't use this before, but... it still doesn't work. It seems I can't figure out where the problem is. Thanks anyway. – Camryn Feb 13 '15 at 12:47
  • I had a problem with a div, but now that I spotted it, setting the width in percentage or removing width and height methods work just fine. – Camryn Feb 13 '15 at 21:26
0

DEMO

This can be achieved simply by removing the fixed height widths.

Elements with unspecified widths are set to width:auto which is usually the size of the elements contents. Floated elements will wrap if they cannot fit on the page adjacently.

CSS

#menu{
    border:1px;
    clear: both;
    /*height: 40px; Remove*/
    /*width: 400px; Remove*/
    float: left;
    position:relative;
    top:20px;
    background:#58c;
}
#menu ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
#menu li{
    float:left;
}
#menu a:link,a:visited{
    display:block;
    width:100px;
    font-weight:bold;
    text-align:center;
}
DreamTeK
  • 32,537
  • 27
  • 112
  • 171
  • I did that before, I removed both height and width, then set it to auto. I even changed the float:left in "#menu li" to float:none, but then the menu elements get fixed one below another and they stay that way, even if I resize the browser. Thanks, anyway. – Camryn Feb 13 '15 at 12:51
  • Your code works in the demo shown in this answer. Have you checked to see if another style is overwriting your settings? Press f12 in your browser to open the debugger and inspect the #menu element to see what it's width is being set to. – DreamTeK Feb 13 '15 at 13:46
  • Yes, you're right. Thank you so much! Problem solved. I had another div called "all", that included all the divs in the html page and it had a width. The fact is I didn't think a second about it because I set it to be pretty big: 1300px (to include all the elements in the page). But it seems, even so, to be overwritten the menu. – Camryn Feb 13 '15 at 21:16