Problem with Div horizontal scrolling

Question

I have a html page I'm working on. I have a div called "featuredcontent" that I'm going to add an N number of elements with class "item" to. I want the featuredcontent box to scroll horizontally when I exceed the space in the layout. Sort of like iTunes does their songs. My problem is when I try to do this and define the boxes to be a certain width they don't expand properly. Here's my rough draft of the 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 a {
  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">&nbsp; asdf</div>
                <div class="item">&nbsp; adsf</div>
                <div class="item">&nbsp; adf</div>
                <div class="item">&nbsp; ad f</div>
                <div class="item">&nbsp; adsdfewsgewt</div>
            </div>
            <div id="secondaryfeature"></div>
            <div id="socialbar"></div>
        </div>
        <div id="footer"></div>
 </div>
</body>

You don't need to your CSS. – Diodeus - James MacFarlane Dec 01 '10 at 17:20 — Diodeus - James MacFarlane, Dec 01 '10 at 17:20

score 0 · Answer 1 · edited Aug 17 '12 at 12:33

0

Give that a try:

#featured {
    overflow-x: scroll;
}

edited Aug 17 '12 at 12:33

Rostyslav Dzinko

39,424
5
49
62

answered Dec 01 '10 at 15:59

benhowdle89

36,900
69
202
331

score 0 · Answer 2 · answered Dec 01 '10 at 16:11

0

I think its navbar that needs to scroll. It also needs a width:

 #navbar {
  width: 990px;
  padding-top:5px;
  overflow-x: auto;
 }

answered Dec 01 '10 at 16:11

Steve

15,606
3
44
39

score 0 · Answer 3 · answered Dec 01 '10 at 16:34

0

If you want to have a custom scrollbar, I think you can look to jScrollPane. (http://jscrollpane.kelvinluck.com/)

The CSS property "overflow-x" is a good answer, but I hate the default scrollbars. ;)

answered Dec 01 '10 at 16:34

K'ao

330
1
3
13

Problem with Div horizontal scrolling

3 Answers3