473,396 Members | 1,942 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

horizontal row of divs without breaking and YES with scrollbar

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
3 6911
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Pal Csepregi | last post by:
Hi can i remove somehow the horizontal scrollbar? just the horizontal! Thx PallR
4
by: Cezar | last post by:
Hi! I've logo on the left top corner and on the right top corner is menu, select language and date. This must looks like: Logo Menu#1 Menu #2 Select Language Date In IE6.0, 5.5...
5
by: Jsp | last post by:
I created a vertically scrolling div. On initial rendering, Firefox shows a horizontal scrollbar in this div, over the complete width. Resizing the width of the window/viewport makes the horizontal...
4
by: anna | last post by:
How to tell if a horizontal scrollbar is present? I only want to use scrollTo if horizontal scrollbar is present. window.scrollbars.visibility doesn't specify which scrollbar is present, so it...
1
by: dhnriverside | last post by:
Hi guys I'm using a div to create a list with ajax stuff. At the moment, the div shows a scrollbar if the content is larger than the div. The problem is that if it isnt, the scrollbar...
4
by: Sakharam Phapale | last post by:
Hi All, I have installed VS .NET 2002 on my machine. I have checked both Vertical scrollbar and Horizontal Scrollbar options, in Tools -> Options-> Text Editor-> General-> Vertical Scrollbar...
14
by: Michael Weis | last post by:
Hello all, as a non-professional in these things, I searched for this topic but found no satisfying answer: I have to create a site with 3 frames. (Please no diskussion about the sense of...
1
by: malpani.abhijit | last post by:
Hi, I am having a ListView component in my WinForm, when i add some images into it, it gives me a vertical scroll bar. What i want is, the horizontal scrollbar instead of vertical. Is there any...
3
by: j0rd4n | last post by:
I have a user control that needs to allow vertical scrolling but not horizontal scrolling. In the user control's resize event, I need to adjust the size of all the children controls. For this to...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.