Force DIVs to NOT wrap if they don't fit browser width?

N

Noozer

I've placed a small example at:

http://members.shaw.ca/mystuff/test.htm

Code is also pasted below...

When the browser is not wide enough to fit all the DIV's the rightmost DIV
wraps below the first DIV. I've tried using the "white-space: nowrap"
directive in the main DIV's styling as well as in the BODY's styling with no
effect. The same thing happens when these DIV's are not contained within
another DIV. I've also investigated the "overflow" directive with little
success.

I assume that "white-space" affects only inline content and not block
content.

Is there any way to ensure that my DIV's don't move down below each other if
the browser is not wide enough (short of stuffing it all into a table)?

(PS Also noticed that IE doesn't apply the padding to the right side of the
"Maingroup" DIV. Firefox applies the padding, but the background colour does
not apply to all of the background of the "Maingroup" DIV. Firefox also does
not wrap the rightmost DIV the same as IE does when it doesn't fit into the
browser.)

Thx

<html>
<head>
</head>
<body>
<div id="Maingroup" style="float: left; white-space: nowrap; border: 1px
black solid; padding: 4px;"
<span class="SectionHead" style="display: block; padding: 2px;
background-color:#888;">This Group</span>
<div id="Group1" style="background-color:#F00; float: left;">
<p>Some stuff here</p>
<p>More stuff</p>
</div>
<div id="Group2" style="background-color:#0F0; float: left;
clear:right;">
More stuff here
</div>
<div id="Group3" style="background-color:#00F; float: left; white-space:
nowrap;">
Even more stuff
</div>
<span class="SectionFoot" style="display: block; clear:both;"> --- The
End --- </span>
<div>
</body>
</html>
 
S

Spartanicus

Noozer said:
I assume that "white-space" affects only inline content and not block
content.
Click to expand...

Correct (+ inline-table and inline-tables).
Is there any way to ensure that my DIV's don't move down below each other if
the browser is not wide enough (short of stuffing it all into a table)?
Click to expand...

css tables (not supported by IE), or using percentages for the widths.
 
N

Noozer

Spartanicus said:
Should read Correct (+ inline-blocks and inline-tables).
Click to expand...

Tried to define the main DIV as "display: inline-block" but still made no
difference.

<div id="Maingroup" style="display: inline-block; white-space: nowrap;
border: 1px black solid; padding: 4px;"


I don't have a server to put my ASP code onto, but I've uploaded the results
to webspace at:
http://members.shaw.ca/mystuff/sample.htm
CSS is at
http://members.shaw.ca/mystuff/default.css

When your browser is not wide enough I want the Category DIV's to go off the
right side of the screen, not wrap below the previous Category DIVs.

....or am I missing something?
 
N

Noozer

I don't have a server to put my ASP code onto, but I've uploaded the
results
to webspace at:
http://members.shaw.ca/mystuff/sample.htm
CSS is at
http://members.shaw.ca/mystuff/default.css

When your browser is not wide enough I want the Category DIV's to go off the
right side of the screen, not wrap below the previous Category DIVs.
Click to expand...

BTW... any general comments on the code would be welcome.

....and finally, what DOCTYPE should someone be using when creating new HTML
code?

I assume that...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
....should be what I use for new pages.
 
S

Spartanicus

Noozer said:
Tried to define the main DIV as "display: inline-block" but still made no
difference.
Click to expand...

inline-block has limited support. Should work in Opera 7+, and it can be
made to work in IE5+.
When your browser is not wide enough I want the Category DIV's to go off the
right side of the screen, not wrap below the previous Category DIVs.

...or am I missing something?
Click to expand...

Css tables are probably the right tool to use, alas not supported by IE,
no proper alternative exists.
 
N

Noozer

Mark Parnell said:
None of that wraps here in Moz 1.7.5 or IE6. The URL in your OP does
though.
Click to expand...

Just checked it here in IE6 and the DIV's do move down if they do not fit.
Generally horizontal scrolling is considered a *bad* thing. Having them
wrap is IMHO the correct behaviour.
Click to expand...

But not the expected or desired behavior.

The data is formatted in rows for a reason. To wrap to another row defeats
part of the purpose for this page.

There will be many more rows added to the page, this was just a sample
output used for demonstration.
 
M

Mark Parnell

Previously in alt.html said:
The data is formatted in rows for a reason. To wrap to another row defeats
part of the purpose for this page.
Click to expand...

That sounds like tabular data to me. Use a table.
 
N

Noozer

Mark Parnell said:
That sounds like tabular data to me. Use a table.
Click to expand...

<rant>
Why the hell can't I style a DIV *NOT* to wrap it's content?
Why can't I get DIV's to align side by side without floating them?
Why does FLOAT refer the viewport and not the container? (ie, A DIV floated
within a DIV should be floated in refernce to the parent DIV)
CSS is such a retarded "language"... did those who invented it have ANY
layout experience at all???
</rant>

This isn't tabular data, but it looks like I'm going to have to get stuck
into a static layout and stuff my content into tables to obtain the results
I need.

My viewport is 300 pixels wide. DIV #1 contains three other DIV's (1a, 1b
and 1c). Each of these DIVs is 150 pixels wide. Why can't I layout this page
so that DIV #1c doesn't wrap below DIV #1a?
 
U

Uncle Pirate

Noozer said:
<rant>
Why the hell can't I style a DIV *NOT* to wrap it's content?
Why can't I get DIV's to align side by side without floating them?
Why does FLOAT refer the viewport and not the container? (ie, A DIV floated
within a DIV should be floated in refernce to the parent DIV)
CSS is such a retarded "language"... did those who invented it have ANY
layout experience at all???
</rant>
Click to expand...

Why can't you? Because you haven't studied up on HOW to? Most of the
things you are attempting to do can be easily done. Read the specs,
browse through the properties/attributes and you'll find out how if you
are serious about learning how. Otherwise, you can just rant and not
get "questions" answered.
This isn't tabular data, but it looks like I'm going to have to get stuck
into a static layout and stuff my content into tables to obtain the results
I need.
Click to expand...

No need for tables, just a bit of knowledge.
My viewport is 300 pixels wide. DIV #1 contains three other DIV's (1a, 1b
and 1c). Each of these DIVs is 150 pixels wide. Why can't I layout this page
so that DIV #1c doesn't wrap below DIV #1a?
Click to expand...

It sounds as if you are not allowing space for borders. Two divs 150 px
wide will not fit within a div 300 px wide. Add a bit of width to your
outside div to allow for border width and/or make sure your borders on
the inside divs are set to 0 and there is 0 padding on the external div.
Better yet, if you are displaying images inside the inner divs, toss
the divs and just apply the float and whatever attributes you wish to
the img. If you aren't using img inside, then why are you setting px
widths? If it's text, it's better to use % or em.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Cooordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
 
U

Uncle Pirate

Duende said:
While sitting in a puddle Uncle Pirate scribbled in the mud:




So where do I set my pizza & beer?
Click to expand...

In your lap. I carry stuff (pizza, beer, etc) around in my lap all the
time while sitting in my wheelchair. :)

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Cooordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
 
N

Noozer

Toby Inkster said:
You can.
Click to expand...

I've tried several times. The answers I've recieved here before state that
it wasn't possible.

Please see my sample at http://members.shaw.ca/mystuff/sample.htm

Click the checkboxes to make the sections visible... If your browser is too
narrow the Category DIV's wrap down below each other instead of disappearing
off the right side of the browser.

As broken as it is, my target browser is IE.
 
D

Duende

While sitting in a puddle Uncle Pirate scribbled in the mud:
In your lap. I carry stuff (pizza, beer, etc) around in my lap all the
time while sitting in my wheelchair. :)
Click to expand...

Ya but you're a para, I'm just a quad.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

SVG not full width and space 0
Why is the e.target not working here? 1
How can I get my menu inside of a menu to function properly? 1
Can someone help me correct this code? It should be a two line countdown timer. 3
I am trying to detect Which image id="" was clicked ? 22
Positioning CSS components 1
Aligned to the left 3
Slideshow not working properly 2

Members online

No members online now.
Total: 44 (members: 1, guests: 43)
Robots: 160

Forum statistics

Threads
473,754
Messages
2,569,527
Members
45,000
Latest member
MurrayKeync

Latest Threads

Top