[SOLVED] when I click a link, 2 scroll bars appear.

[daveoffy]

I have a page of data, and each line of data goes to a page. When I click one of the links, I get scroll bars on that div for up and down, and side to side. Please help.

 

.title {
width: 275px;
padding-right: 10px;
padding-left: 8px;
float: left;
}
.length {
width: 47px;
padding-right: 10px;
float: left;
}
.friends {
width: 47px;
padding-right: 10px;
float: left;
}
.type {
width: 47px;
padding-right: 10px;
float: left;
}
.price {
width: 47px;
float: left;
padding-right: 8px;
}
.buy a:link {
    text-decoration: none;
    color: #000000;
}
.buy a:visited {
    text-decoration: none;
    color: #000000;
}
.buy a:active {
    text-decoration: none;
    color: #000000;
}

 

the div it is in

 

.content_box {
margin-top: 21px;
width: 519px;
background-color: #f1f1f1;
overflow: auto;
}

 

the page

<div class="title">Title</div><div class="length">Length</div><div class="friends">Friends</div><div class="type">Type</div><div class="price">Price</div>
<?php
include 'config.php';
$Color = "#F1F3F6";
$qry = "SELECT * FROM `Sell` ORDER BY `sell_id` DESC";
$result = mysql_query($qry) or die(mysql_error());
while($row = mysql_fetch_array($result)) {
$title = $row['title'];
$seller_id = $row['seller_id'];
$sellid = $row['sell_id'];
$posted = $row['posted'];
$price = $row['price'];
$time = $row['time'];
$friends = $row['friends'];
$type = $row['type'];
$tqry = "SELECT * FROM `cat` WHERE id='".$type."'";
$tresult = mysql_query($tqry);
$trow = mysql_fetch_array($tresult);
$typename = $trow['name'];
?>
<div class="buy">
<div class="title" style="background-color: <?php echo $Color; ?>"><a href="view.php?sellid=<?php echo $sellid; ?>"><?php echo $title; ?></a></div>
<div class="length" style="background-color: <?php echo $Color; ?>"><a href="view.php?sellid=<?php echo $sellid; ?>"><?php echo $time; ?> days</a></div>
<div class="friends" style="background-color: <?php echo $Color; ?>"><a href="view.php?sellid=<?php echo $sellid; ?>"><?php echo $friends; ?></a></div>
<div class="type" style="background-color: <?php echo $Color; ?>"><a href="view.php?sellid=<?php echo $sellid; ?>"><?php echo $typename; ?></a></div>
<div class="price" style="background-color: <?php echo $Color; ?>"><a href="view.php?sellid=<?php echo $sellid; ?>">$<?php echo $price; ?></a></div>
</div>
<?php
  if ($Color == "#F1F3F6") {
  $Color = "#F8F9FA" ;
  }elseif ($Color == "#F8F9FA") {
  $Color = "#F1F3F6";
  }
  }
?>

 

[Hybride]

.content_box {
   margin-top: 21px;
   width: 519px;
   background-color: #f1f1f1;
   overflow: auto;
}

- your overflow:auto is the culprit. Remove it to get rid of the scroll bars. Here are your other options when it comes to overflow:

overflow: auto - This will create a scrollbar - horizontal, vertical or both only if the content in the block requires it. For practical web development, this is probably the most useful for creating a scrolling area.

 

overflow: scroll - This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.

 

overflow: visible - This will cause the block to expand to view the content.

 

overflow: hidden - This forces the block to only show content that fits in the block. Other content will be clipped and not hidden with no scrollbars.