Forcing horizontal scrolling using CSS.

[Skarabrae]

Basically my problem is that when I attempt to force the DIV id=blogContainer to horizontally scroll through the different DIV class=blog that it just overflows regularly and scrolls down. I would like to force everything so each DIV class=blog is floated next to each other and the user can scroll to the right to read through the other entries. The problem is, that all the widths and heights are fixed...

The HTML...
<div id="blogContainer">
<div class="blog">
<span class="blogTitle">
This is the blog title
</span><br />
<span class="blogDate">
0000-00-00 00:00
</span><br />
<div class="blogEntry">
This is the blog entry
</div>
</div>
</div>

The CSS...
#blogContainer {
padding-top: 10px;
width: 770px;
height: 200px;
float: left;
}

.blog {
padding-left: 10px;
padding-right: 10px;
position: relative;
width: 250px;
height: 170px;
float: left;
color: #ffffff;
}

.blogTitle {
font-family: arial;
font-weight: bold;
font-size: 12px;
}

.blogTag {
font-family: arial;
font-size: 10px;
background-color: #eaeaea;
color: #393939;
text-decoration: none;
}

.blogTag:hover {
font-family: arial;
font-size: 10px;
background-color: #eaeaea;
color: #a2a2a2;
text-decoration: none;
}

.blogDate {
font-family: arial;
font-size: 11px;
}

.blogEntry {
font-family: arial;
font-size: 10px;
}

The blogContainer is floated left because it is within another container that is centered.

[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]

[edited by: createErrorMsg at 12:01 pm (utc) on Nov. 28, 2005]

[xfinx]

I don't know really, you might put the width at abnormal proportions..
but.. This is really bad in usability.. Almost everybody HATES the horizontal scrollbar.. also because it can happen that a part of the text is kut off forcing user to resize their browser or to scroll horizontally.

Instead of trying, I will say, don't do it!