By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,417 Members | 1,825 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,417 IT Pros & Developers. It's quick & easy.

horizontal row of divs without breaking and YES with scrollbar

P: n/a
dan
Hi folks, I have a very simple requirement - I want to have a row of
divs of fixed size (but unknown number of them)

This will be in a container div and scrolled by other means

Is there any way of doing this so that the row is maintained and does
not break at the browser width? Typically IE does what I want....
although I gather its "wrong" on the specs.

I can see myself ending up using a table, which spoils some other plans
I had.

Here is my code:
<html>
<head>
<title>horiztest</title>
<style type="text/css">
<!--
..Hblock {
float: left;
clear: right;
height: 200px;
width: 240px;
margin: 0px;
padding: 10px;
border-top: 1px dotted #FF9900;
border-right: 1px dotted #FF9900;
border-bottom: 1px dotted #FF9900;
border-left: 1px none #FF9900;
text-align: justify;
overflow: auto;;
}

..dynPage {
left:0px;
top:0px;
width:auto;
height:300px;
visibility:visible;
margin: 0px;
padding: 0px;
}
#divScroller {position:absolute; overflow:hidden; z-index:9; left:0px;
top:120px; width:770px; height:300px; clip:rect(0px,770px,300px,0px);
visibility:visible}
-->
</style>
</head>

<body>
<div id="divScroller">
<div id="dynPage1" class="dynPage">
<div class="Hblock">
lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet con
quista lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet
con quista lorum ipsum dolar sit amet con quista</div>
<div class="Hblock">
lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet con
quista lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet
con quista lorum ipsum dolar sit amet con quista</div>
<div class="Hblock">
lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet con
quista lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet
con quista lorum ipsum dolar sit amet con quista</div>
</div>
</div>
</body>
</html>

Jul 21 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
da*@dib.co.uk wrote:
Hi folks, I have a very simple requirement - I want to have a row of
divs of fixed size (but unknown number of them)

This will be in a container div and scrolled by other means

Is there any way of doing this so that the row is maintained and does
not break at the browser width? Typically IE does what I want....
although I gather its "wrong" on the specs.

I can see myself ending up using a table, which spoils some other plans
I had.

Here is my code:
<html>
<head>
<title>horiztest</title>
<style type="text/css">
<!--
.Hblock {
float: left;
clear: right;
height: 200px;
width: 240px;
margin: 0px;
padding: 10px;
border-top: 1px dotted #FF9900;
border-right: 1px dotted #FF9900;
border-bottom: 1px dotted #FF9900;
border-left: 1px none #FF9900;
text-align: justify;
overflow: auto;;
}

.dynPage {
left:0px;
top:0px;
width:auto;
height:300px;
visibility:visible;
margin: 0px;
padding: 0px;
}
#divScroller {position:absolute; overflow:hidden; z-index:9; left:0px;
top:120px; width:770px; height:300px; clip:rect(0px,770px,300px,0px);
visibility:visible}
-->
</style>
</head>

<body>
<div id="divScroller">
<div id="dynPage1" class="dynPage">
<div class="Hblock">
lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet con
quista lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet
con quista lorum ipsum dolar sit amet con quista</div>
<div class="Hblock">
lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet con
quista lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet
con quista lorum ipsum dolar sit amet con quista</div>
<div class="Hblock">
lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet con
quista lorum ipsum dolar sit amet con quista lorum ipsum dolar sit amet
con quista lorum ipsum dolar sit amet con quista</div>
</div>
</div>
</body>
</html>

if you make the following changes to your code:
#divscroller {overflow: auto;} /* !!! */
..dynpage { height: 280px;} /* to prevent a vertical scrolbar */

it will give a horizontal scrollbar in IE, and vertical scrollbar in FF.

(i have no clue how to get a horizontal scrollbar in FF)

gl
martin

Jul 21 '05 #2

P: n/a
da*@dib.co.uk writes:
Hi folks, I have a very simple requirement - I want to have a row of
divs of fixed size (but unknown number of them)
Really unknown? Isn't that odd?
This will be in a container div and scrolled by other means

Is there any way of doing this so that the row is maintained and does
not break at the browser width? Typically IE does what I want....
although I gather its "wrong" on the specs.
The "width" of a block isn't supposed to be it's width in
the normal sense, rather the measure of the text.
Here is my code:
The cautious explorer would have determined the customs of
the natives and posted a URL rather than code.

There's no DOCTYPE in what you've posted: this is bad news
if you hope to get any sort of similarity of behaviour
between proper browsers and IE. Google for

DOCTYPE "quirks mode" "standards compliant"

(the first hit today on this search gives an msdn url that
has a sidebar that reads:

An error occurred on the server when processing the
URL. Please contact the system administrator.An error
occurred on the server when processing the URL. Please
contact the system administrator.

Professional, eh?
)
<html>
<head>
<title>horiztest</title>
<style type="text/css">
<!--
.Hblock { [...]
width: 240px;
margin: 0px;
padding: 10px;
border-top: 1px dotted #FF9900;
border-right: 1px dotted #FF9900;
border-bottom: 1px dotted #FF9900;
border-left: 1px none #FF9900; [...]
setting the width of a nonexistent border is futile; it
means the same as

border-left: 0 none #FF9900;

passing your code through
http://jigsaw.w3.org/css-validator/v...or-uri.html.en
would have revealed this.
}
So the total width of a Hblock is
240 width
+2*10 two lots of padding
+1 one border
===
783
[...]
#divScroller {position:absolute; overflow:hidden; z-index:9; left:0px;
top:120px; width:770px; height:300px; clip:rect(0px,770px,300px,0px);

^^^^^

770 < 783, so proper browsers will wrap the third Hblock. If
you set the width to 783 it will fit.

Note that setting the widths of things that are to contain
text in pixels is a Bad Thing.

--
Jón Fairbairn Jo***********@cl.cam.ac.uk
Jul 21 '05 #3

P: n/a
On Fri, 28 Jan 2005 19:56:20 +0100, Ali Babba <Al******@40Bandits.com>
wrote:

[...]
(i have no clue how to get a horizontal scrollbar in FF)


But for heavens sake; this is elementary...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sidescroller</title>
<style type="text/css">
body { width: 200%; }
p.to-the-left { text-align: left; }
p.to-the-right { text-align: right; }
</style>
</head>
<body>
<p class="to-the-left">Hello World!</p>
<p class="to-the-right">Hello again World!</p>
</body>
</html>

....and off you scroll.

What is it in the basic CSS box model rendering that is so terribly
difficult to understand for so many?

It seems to me that just about every amateur out there gets him self
directly stuck in a poisonous spider web of pixel based sizing of boxes
as soon as he just comes close enough to CSS to get a hunch that it may
have something to do with layout.

What can we do to convey the real truth about CSS, i.e. that CSS can be
used to suggest how to render a page but that resulting page will, in a
visual browsing situation, at all times be placed _behind_ a "peephole",
represented by a visual browsers current viewing window.

Most often we do try to suggest a rendering that directly fits the
available width of the peephole and we also accept that a rendered
document may be taller than the height of the peephole, in which case
the peephole will develop a 'vertical scroll bar that can be used to
move the peephole up or down over the rendered document.

Note what I said; the scrollbars moves the peephole _over_ an already
rendered document, it's not the document that moves behind the peephole.

Hopefully that way to look at things might help some poor pixel fixated
soul out there, may he then suddenly realize the illusionary effect that
is built into a dynamic viewing of a document in a visual browser.

That means that the real available size of "rendering canvas" is
basically unlimited but we have out of convenience established a
situation where a calculated 100% wide canvas is "mentally linked" to
the peephole and thus supposed to be equal in width to the currently
available peephole (this is part of the basic thinking behind liquid
design techniques).

The side note here is CSS fixed positioning, which effectively breaks
lose bits and pieces of a document and gives possibilities to attach
those pieces directly to the physical coordinates of the currently
available peephole instead.

But that also means that those bits and pieces do not really stay as
fully qualified members of the document content flow any more either.
They do, as part of markup of course, but may not, as part of a visually
rendered result. (go figure...)

--
Rex
Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.