HTML question (OT)

#1

Let's say you have a web page with a left side and a right side. Both
are CSS div's.

Sometimes if the div's are too wide for the browser window, the right
div slides down below the left div.

Other times, the horizontal scroll bar will appear and the user will
have to scroll to the right to see the entire right div.

What I have happeining is the former behavior; What I want to happen
is the latter behavior.

How do I make sure that the scroll bar appears, instead of moving my
right div down?

#2

In article <41e0fabd$0$206$75868355 (AT) news (DOT) frii.net>, Will.Spencer says...

Quote:

Let's say you have a web page with a left side and a right side. Both
are CSS div's.

Sometimes if the div's are too wide for the browser window, the right
div slides down below the left div.

Other times, the horizontal scroll bar will appear and the user will
have to scroll to the right to see the entire right div.

What I have happeining is the former behavior; What I want to happen
is the latter behavior.

How do I make sure that the scroll bar appears, instead of moving my
right div down?

You could place a fixed-width div (frame) around everything to get that
effect.

<div id="frame">
<div id="leftbit">
Stuff
</div>
<div id="rightbit">
Stuff
</div>
</div>

If you want the page to expand to fit the window beyond a certain width,
the min-width property could work, but browser support was iffy last
time I checked.

--
Daniel Ruscoe
daniel.ruscoe (AT) gmail (DOT) com
http://www.danruscoe.com/

#3

Daniel Ruscoe wrote:

Quote:

In article <41e0fabd$0$206$75868355 (AT) news (DOT) frii.net>, Will.Spencer
says...
Let's say you have a web page with a left side and a right side.
Both are CSS div's.

Sometimes if the div's are too wide for the browser window, the right
div slides down below the left div.

Other times, the horizontal scroll bar will appear and the user will
have to scroll to the right to see the entire right div.

What I have happeining is the former behavior; What I want to happen
is the latter behavior.

How do I make sure that the scroll bar appears, instead of moving my
right div down?

You could place a fixed-width div (frame) around everything to get
that effect.

div id="frame"
div id="leftbit"
Stuff
/div
div id="rightbit"
Stuff
/div
/div

If you want the page to expand to fit the window beyond a certain
width, the min-width property could work, but browser support was iffy
last time I checked.

min-width and max-width etc are not supported in IE which makes them not
so useful, although you can often put another fixed size div inside the
one you're trying to make have a minimum width eg

<div style="min-width: 400px">
content here
<div style="width: 400px"></div>
</div>

The only problem with this is that IE tends to make the 400 wide div in
my example a full line height so you end up with some unwanted white
space, which is why I put it at the bottom.

--
Chris Hope - The Electric Toolbox - http://www.electrictoolbox.com/

#4

In article <crs3et$d2r$1 (AT) lust (DOT) ihug.co.nz>, Chris Hope says...

Quote:

Daniel Ruscoe wrote:

In article <41e0fabd$0$206$75868355 (AT) news (DOT) frii.net>, Will.Spencer
says...
Let's say you have a web page with a left side and a right side.
Both are CSS div's.

Sometimes if the div's are too wide for the browser window, the right
div slides down below the left div.

Other times, the horizontal scroll bar will appear and the user will
have to scroll to the right to see the entire right div.

What I have happeining is the former behavior; What I want to happen
is the latter behavior.

How do I make sure that the scroll bar appears, instead of moving my
right div down?

You could place a fixed-width div (frame) around everything to get
that effect.

div id="frame"
div id="leftbit"
Stuff
/div
div id="rightbit"
Stuff
/div
/div

If you want the page to expand to fit the window beyond a certain
width, the min-width property could work, but browser support was iffy
last time I checked.

min-width and max-width etc are not supported in IE which makes them not
so useful, although you can often put another fixed size div inside the
one you're trying to make have a minimum width eg

div style="min-width: 400px"
content here
div style="width: 400px"></div
/div

Yep, that's the one I should've thought of.

It can be done with a spacer image inside your frame div too, but the
way shown above is better.

--
Daniel Ruscoe
daniel.ruscoe (AT) gmail (DOT) com
http://www.danruscoe.com/

#5

Daniel Ruscoe wrote:

Quote:

In article <crs3et$d2r$1 (AT) lust (DOT) ihug.co.nz>, Chris Hope says...
Daniel Ruscoe wrote:

In article <41e0fabd$0$206$75868355 (AT) news (DOT) frii.net>, Will.Spencer
says...
Let's say you have a web page with a left side and a right side.
Both are CSS div's.

Sometimes if the div's are too wide for the browser window, the
right div slides down below the left div.

Other times, the horizontal scroll bar will appear and the user
will have to scroll to the right to see the entire right div.

What I have happeining is the former behavior; What I want to
happen is the latter behavior.

How do I make sure that the scroll bar appears, instead of moving
my right div down?

You could place a fixed-width div (frame) around everything to get
that effect.

div id="frame"
div id="leftbit"
Stuff
/div
div id="rightbit"
Stuff
/div
/div

If you want the page to expand to fit the window beyond a certain
width, the min-width property could work, but browser support was
iffy last time I checked.

min-width and max-width etc are not supported in IE which makes them
not so useful, although you can often put another fixed size div
inside the one you're trying to make have a minimum width eg

div style="min-width: 400px"
content here
div style="width: 400px"></div
/div

Yep, that's the one I should've thought of.

It can be done with a spacer image inside your frame div too, but the
way shown above is better.

While I don't like using spacer images as a rule (one more thing to have
to download), the good thing about them is you only end up with 1 pixel
of wasted space in IE, although I think this should also work with the
spacer div to only be 1 pixel high:

<div style="width:400px; font-size:1px; line-height:1px;"></div>

--
Chris Hope - The Electric Toolbox - http://www.electrictoolbox.com/

#6

"Will.Spencer" <will.spencer (AT) internet-search-engines-faq (DOT) NOSPAM.com> wrote
in message news:41e0fabd$0$206$75868355 (AT) news (DOT) frii.net...

Quote:

Let's say you have a web page with a left side and a right side. Both
are CSS div's.

Sometimes if the div's are too wide for the browser window, the right
div slides down below the left div.

Other times, the horizontal scroll bar will appear and the user will
have to scroll to the right to see the entire right div.

What I have happeining is the former behavior; What I want to happen
is the latter behavior.

How do I make sure that the scroll bar appears, instead of moving my
right div down?

You'd be better off using tables for structural layout like this. CSS is
great for text formatting etc, but a total failure as a layout language, it
simply isn't well designed for creating page layouts. CSS nuts will insist
on using it for layout and say tables are "wrong" but tables work very well,
are rendered similarly by all browsers and are far less breakable; even if
you make CSS work on your computer you've no idea what it'll look like in
others, in terms of document layout. The layout aspects of it need a
complete rethink from the ground up. Personally I'm sick to death of finding
unreadable web pages using CSS layout. That just doesn't happen with tables.

Ian

--
____________________
A quality online comic strip for the discerning reader.
With shagging in it.
http://www.jaxtrawstudios.com
Free daily rude toons
http://www.lewdart.com

#7

Jaxtraw <jaxtraw (AT) nobloodyspambigfoot (DOT) com> wrote:

Quote:

You'd be better off using tables for structural layout like this.
CSS is
great for text formatting etc, but a total failure as a layout
language, it
simply isn't well designed for creating page layouts.

And for equal time; see <http://www.hotdesign.com/seybold/> for
arguments pro-CSS layout.

#8

Jaxtraw wrote:

Quote:

"Will.Spencer" <will.spencer (AT) internet-search-engines-faq (DOT) NOSPAM.com
wrote

Let's say you have a web page with a left side and a right side.
Both are CSS div's.

Sometimes if the div's are too wide for the browser window, the right
div slides down below the left div.

Other times, the horizontal scroll bar will appear and the user will
have to scroll to the right to see the entire right div.

What I have happeining is the former behavior; What I want to happen
is the latter behavior.

How do I make sure that the scroll bar appears, instead of moving my
right div down?

You'd be better off using tables for structural layout like this. CSS
is great for text formatting etc, but a total failure as a layout
language, it simply isn't well designed for creating page layouts. CSS
nuts will insist on using it for layout and say tables are "wrong" but
tables work very well, are rendered similarly by all browsers and are
far less breakable; even if you make CSS work on your computer you've
no idea what it'll look like in others, in terms of document layout.
The layout aspects of it need a complete rethink from the ground up.
Personally I'm sick to death of finding unreadable web pages using CSS
layout. That just doesn't happen with tables.

I'd have to agree with you there. Unless you have a really simple design
(which was designed to be laid out with CSS) then it often tends to be
too hard to make it look right across browsers and platforms without
breaking.

I'd really like to use CSS positioning more but I don't think when they
designed it they really thought about the way that sites are laid out.
Even something simple like a three column layout with colour bars in
the left and right columns stretching the full height of the content,
no matter which column is longest is hard to do. I use a way of doing
this I got from www.positioniseverything.net site but it still
sometimes breaks depending what you put in the right hand column.

--
Chris Hope - The Electric Toolbox - http://www.electrictoolbox.com/

#9

Chris Hope <blackhole (AT) electrictoolbox (DOT) com> wrote:

Quote:

I'd really like to use CSS positioning more but I don't think when
they
designed it they really thought about the way that sites are laid
out.
Even something simple like a three column layout with colour bars in
the left and right columns stretching the full height of the content,
no matter which column is longest is hard to do. I use a way of doing
this I got from www.positioniseverything.net site but it still
sometimes breaks depending what you put in the right hand column.

Well, actually it would be possible to do this if IE had implemented
more of the CSS recommendation, so don't blame the CSS creators!

A kludge can be found at A List Apart - look for "Faux Columns"

#10

Neal wrote:

Quote:

Chris Hope <blackhole (AT) electrictoolbox (DOT) com> wrote:

I'd really like to use CSS positioning more but I don't think when
they
designed it they really thought about the way that sites are laid
out.
Even something simple like a three column layout with colour bars in
the left and right columns stretching the full height of the content,
no matter which column is longest is hard to do. I use a way of doing
this I got from www.positioniseverything.net site but it still
sometimes breaks depending what you put in the right hand column.

Well, actually it would be possible to do this if IE had implemented
more of the CSS recommendation, so don't blame the CSS creators!

A kludge can be found at A List Apart - look for "Faux Columns"

A useful reference from the discussion of that article is at
http://www.pixy.cz/blogg/clanky/css-3col-layout/

The author tested it in IE5/Win95, IE6/WinXP, Opera7/WinXP, IE5/Mac,
Mozilla, Safari, and Camino. So OK if your site only uses those
browsers and up.

The CSS for it appears to be fairly minimal as well which is always
good. There's nothing worse than trying to comprehend how a CSS layout
works 'cos there's so much of it.

--
Chris Hope - The Electric Toolbox - http://www.electrictoolbox.com/