html - Problem with Div horizontal scrolling -
i have html page i'm working on. have div called "featuredcontent" i'm going add n number of elements class "item" to. want featuredcontent box scroll horizontally when exceed space in layout. sort of itunes songs. problem when try , define boxes width don't expand properly. here's rough draft of code.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <style type="text/css"> <!-- * { padding:0px; margin:0px; font-family:arial, helvetica, sans-serif; } #container { width:990px; margin-left:auto; margin-right:auto; } #header { margin-top:20px; text-align:left; overflow: auto; } #featured { width: auto; float: left; text-align: left; } #navbar { padding-top:5px; } #navbar { color:#000; padding-right:40px; font-weight:bold; text-decoration:none; font-size:20px; } #navbar a:hover { text-decoration:underline; } #logo { width:290px; height:250px; float:right; vertical-align:50%; background:url(logo.jpg); } #main { margin-top: 30px; } #mainfeature { overflow:auto; white-space:nowrap; } .item { width:150px; height:300px; margin-right:10px; color:#0ff; display:inline; } --> </style> </head> <body> <div id="container"> <div id="header"> <div id="featured"> <img width="700" height="225" src="#" /> <div id="navbar"><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a></div> </div> <div id="logo"></div> </div> <div id="main"> <div id="mainfeature"> <div class="item"> asdf</div> <div class="item"> adsf</div> <div class="item"> adf</div> <div class="item"> ad f</div> <div class="item"> adsdfewsgewt</div> </div> <div id="secondaryfeature"></div> <div id="socialbar"></div> </div> <div id="footer"></div> </div> </body>
i think navbar needs scroll. needs width:
#navbar { width: 990px; padding-top:5px; overflow-x: auto; }
Comments
Post a Comment