html - Disobedient Div! (Not floating correctly) -
i trying put 2 divs next each other contain lists of buttons button below both of them having problems. have added float: left both nav-left , nav-right nav-right not next nav-left? lower button #lower not staying inside parent div of #container? here fiddle
i have tried know fix (which not lot!) no avail. thank : )
here code:
#container{width: 100%; border: 1px solid red;} #nav-left, #nav-right{width: 50%; border: 1px solid black; display: block; padding: 10px 0px 10px 0px;} #nav-left{position: relative; float: left;} #nav-right{position: relative; left: 50%;} #lower{width: 100%; border: 1px solid black; display: block; padding: 10px 0px 10px 0px;} li {list-style: none;} ul a, #lower {color: black; text-decoration: none; text-align: center; background-color: yellow; display: block; margin: 10px; padding: 9px; border: 1px solid black; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;} ul a:hover, #lower:hover {background-color: #fff;} <div id="container"> <ul id="nav-left"> <li><a href="#">left button</a></li> <li><a href="#">left button</a></li> <li><a href="#">left button</a></li> <li><a href="#">left button</a></li> <li><a href="#">left button</a></li> </ul> <ul id="nav-right"> <li><a href="#">right button</a></li> <li><a href="#">right button</a></li> <li><a href="#">right button</a></li> <li><a href="#">right button</a></li> <li><a href="#">right button</a></li> </ul> <div style="clear: both"></div> <a id="lower" href="#">lower button</a></li> </div>
you need account border style attribute. why setting width of each element 50% causing second element wrap. setting width smaller amount (like 49%) fix problem.
also, change
#nav-right{position: relative; left: 50%;}
to
#nav-right{position: relative;}
Comments
Post a Comment