469,578 Members | 1,914 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,578 developers. It's quick & easy.

prevent div wrapping

Gang,

I am not quite sure if this has been posted before. I have
searched google groups and couldn't find anything. I am trying to
setup a container div that contains columns of divs (to generate a
"spreadsheet". Each "cell" can contain either text or an object. My
problem is that when I generate columns that run outside of the width
of the container div, the following div's wrap. I have tried using
<nobrtags, "white-space: nowrap" in the container style, but nothing
seems to work. Any help would greatly be appreciated. Below is an
example:
<div style="white-space: nowrap; width: 350px;">
<div style="float: left; width: 100px;">1st Column</div>
<div style="float: left; width: 100px;">2nd column</div>
<div style="float: left; width: 100px;">3rd Columnt</div>
<div style="float: left; width: 100px;">4th Columnt</div>
<div style="width: 100px; margin: 0 0 0 400;">5th Columnt</div>
</div>

What ends up happening is that 4th column (and only the 4th column)
gets wrapped to the next line. I would like to prevent that from
happening. Any suggestions are appreciated. By the way, I have also
tried replacing the inside div's with span's and had no change.

Thanks,

Dave

Sep 4 '06 #1
10 14703
he******@yahoo.com wrote:
>
<div style="white-space: nowrap; width: 350px;">
<div style="float: left; width: 100px;">1st Column</div>
<div style="float: left; width: 100px;">2nd column</div>
<div style="float: left; width: 100px;">3rd Columnt</div>
<div style="float: left; width: 100px;">4th Columnt</div>
<div style="width: 100px; margin: 0 0 0 400;">5th Columnt</div>
</div>

What ends up happening is that 4th column (and only the 4th column)
gets wrapped to the next line. I would like to prevent that from
happening. Any suggestions are appreciated. By the way, I have also
tried replacing the inside div's with span's and had no change.
Do the math. 100 + 100 + 100 + 100 = 400 which is 350.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Sep 4 '06 #2
he******@yahoo.com wrote:
<div style="width: 100px; margin: 0 0 0 400;">5th Columnt</div>
400 apples?
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Sep 4 '06 #3
Jim Moe wrote:
><div style="white-space: nowrap; width: 350px;"...
Do the math. 100 + 100 + 100 + 100 = 400 which is 350.
So why not omit the "width:350px" altogether and let the browser do the
maths?

Because that does not work out as the widths of the floats are not taken
into account. I think, this is because floated elements are take out of
the normal flow of the document.

For that very reason, I found no other way than to use a table for
getting this layout right :-(

Cheers
Daniel
Sep 4 '06 #4

Daniel Kabs wrote:
Jim Moe wrote:
<div style="white-space: nowrap; width: 350px;"...
Do the math. 100 + 100 + 100 + 100 = 400 which is 350.

So why not omit the "width:350px" altogether and let the browser do the
maths?

Because that does not work out as the widths of the floats are not taken
into account. I think, this is because floated elements are take out of
the normal flow of the document.

For that very reason, I found no other way than to use a table for
getting this layout right :-(

Cheers
Daniel

Jim, perhaps you didn't read the sentence I wrote "My
problem is that when I generate columns that run outside of the width
of the container div...".

The width of the container div can dynamically change depending on the
size of the browser window (ie maximized or custom sized). the columns
inside have a set width and can run outside the dynamically sized
container div. I appreciate the response Daniel, but from what I
understand tables are to be used with tabular data, not to be used to
place objects on a form (this has been taken over by use of div's and
spans). Any other ideas will greatly be appreciated though.

Thanks,
Dave

Sep 4 '06 #5
he******@yahoo.com wrote:
I appreciate the response Daniel, but from what I
understand tables are to be used with tabular data, not to be used to
place objects on a form (this has been taken over by use of div's and
spans). Any other ideas will greatly be appreciated though.
You are in the div soup now, with some spans on top :-)

Didn't you say, you wanted to create a "spreadsheet"? A spreadsheet is a
rectangular grid of information, so tables are exactly what you need,
not this div-span-hell which was recommended to you.

Cheers
Daniel

Sep 4 '06 #6
he******@yahoo.com wrote:
><div style="white-space: nowrap; width: 350px;"...
Do the math. 100 + 100 + 100 + 100 = 400 which is 350.

Jim, perhaps you didn't read the sentence I wrote "My
problem is that when I generate columns that run outside of the width
of the container div...".
You may have said that, but that is not what your code said. It said
width:350px quite explicitly. Conflicting information.
Probably the easiest solution is to add "overflow:hidden" to the div
styles. The container sizes do not have to change; the content is clipped
to the container size.
The width of the container div can dynamically change depending on the
size of the browser window (ie maximized or custom sized). the columns
inside have a set width and can run outside the dynamically sized
container div.
Unfortunately there is how IE handles div content overflow, and how
everyone else does. IE expands the container, everyone else lets the
content extend beyond the container.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Sep 4 '06 #7

Daniel Kabs wrote:
he******@yahoo.com wrote:
I appreciate the response Daniel, but from what I
understand tables are to be used with tabular data, not to be used to
place objects on a form (this has been taken over by use of div's and
spans). Any other ideas will greatly be appreciated though.

You are in the div soup now, with some spans on top :-)

Didn't you say, you wanted to create a "spreadsheet"? A spreadsheet is a
rectangular grid of information, so tables are exactly what you need,
not this div-span-hell which was recommended to you.

Cheers
Daniel

Thanks again for the reply Dan, but the "div soup" is actually what is
supposed to be used. Tables are intended for data only, not object
placement and form layout. Div's are a much more practical means of
achieving form layout over tables.

I do understand what you are saying, however, to be compliant with CSS
and other forms of scripting (DHTML, etc), it is frowned upon to use
tables in such a manor.

The reason I said "spreadsheet" is because the "cells" will contain
both data and form objects. A true spreadsheet would only have data
(hence the quotes around the use of the word "spreadsheet").
Dave

Sep 4 '06 #8

Jim Moe wrote:
he******@yahoo.com wrote:
<div style="white-space: nowrap; width: 350px;"...
Do the math. 100 + 100 + 100 + 100 = 400 which is 350.
Jim, perhaps you didn't read the sentence I wrote "My
problem is that when I generate columns that run outside of the width
of the container div...".
You may have said that, but that is not what your code said. It said
width:350px quite explicitly. Conflicting information.
Probably the easiest solution is to add "overflow:hidden" to the div
styles. The container sizes do not have to change; the content is clipped
to the container size.
The width of the container div can dynamically change depending on the
size of the browser window (ie maximized or custom sized). the columns
inside have a set width and can run outside the dynamically sized
container div.
Unfortunately there is how IE handles div content overflow, and how
everyone else does. IE expands the container, everyone else lets the
content extend beyond the container.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim, wouldn't "columns that run outside the width of a container div"
indicate that the contents inside the container div are greater than
the width of the container div itself (ie. 400 350)? :)

The problem with adding the "overflow: hidden" code is that the user
won't have a means to view the information in the "spreadsheet" unless
there browser is big enough. This creates a new problem. What if the
contents end up being greater than their screen resolution. Then the
person will never be able to see all the data that is being displayed.
It would be much better to have an "overflow: auto" statement. This
was already handled in the code in my original post. The problem is
that the floating div's get wrapped when the container div is shrunk to
a width smaller than the combined widths of the "cells". Once again, I
have already tried several methods and would greatly appreciate any
suggestions (using div's - sorry Dan :) ).

Something else to consider is that not everyone uses IE. This has to
be code that is based on standards (which IE doesn't always do) which
are supported by all browsers. So any suggestions need to have that
guideline please.

Thanks to all who have offered advice thus far,
Dave

Sep 4 '06 #9
he******@yahoo.com wrote:
Jim Moe wrote:
>he******@yahoo.com wrote:
><div style="white-space: nowrap; width: 350px;"...
Do the math. 100 + 100 + 100 + 100 = 400 which is 350.

Jim, perhaps you didn't read the sentence I wrote "My
problem is that when I generate columns that run outside of the width
of the container div...".

Jim, wouldn't "columns that run outside the width of a container div"
indicate that the contents inside the container div are greater than
the width of the container div itself (ie. 400 350)? :)
You asked why the fourth column wrapped. I told you why.
You must be using IE (you have not said) since the div expands to fit
the content (I presume that is what you mean by "columns that run outside
the width of a container div").
You did not provide an URL to a test case, only a dubious code snippet
which you say is not really how you are coding you application.
The problem with adding the "overflow: hidden" code is that the user
won't have a means to view the information in the "spreadsheet" unless
there browser is big enough. This creates a new problem. What if the
contents end up being greater than their screen resolution. Then the
person will never be able to see all the data that is being displayed.
It would be much better to have an "overflow: auto" statement. This
was already handled in the code in my original post. The problem is
that the floating div's get wrapped when the container div is shrunk to
a width smaller than the combined widths of the "cells". Once again, I
have already tried several methods and would greatly appreciate any
suggestions (using div's - sorry Dan :) ).
Text can be scrolled in a container that has overflow:hidden set.
What does "contents end up being greater than their screen resolution" mean?
There was no mention whatsoever of overflow of any sort in your original
post.
Once again: When the container is too small for all of the divs, they
will wrap.
Something else to consider is that not everyone uses IE. This has to
be code that is based on standards (which IE doesn't always do) which
are supported by all browsers. So any suggestions need to have that
guideline please.
That was the point of my comment about IE vs the world regarding div sizing.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Sep 5 '06 #10
he******@yahoo.com wrote:
Daniel Kabs wrote:
>he******@yahoo.com wrote:
>>I appreciate the response Daniel, but from what I
understand tables are to be used with tabular data, not to be used to
place objects on a form (this has been taken over by use of div's and
spans). Any other ideas will greatly be appreciated though.
You are in the div soup now, with some spans on top :-)

Didn't you say, you wanted to create a "spreadsheet"? A spreadsheet is a
rectangular grid of information, so tables are exactly what you need,
not this div-span-hell which was recommended to you.

Cheers
Daniel


Thanks again for the reply Dan, but the "div soup" is actually what is
supposed to be used. Tables are intended for data only, not object
placement and form layout. Div's are a much more practical means of
achieving form layout over tables.
Spreadsheets aren't mere form, they ARE a row-and-column arrangement of
data. Styles are a presentational suggestions (even if they are a strong
one). With a spreadsheet, the grid formation is a requirement, or else
it ceases to be a spreadsheet. Even without explicit row and column
headers, the attribution of a cell to row 3 and to column 7 is essential
to its meaning. If you refrain from using a table to construct a
spreadsheet facsimile, a sudoku puzzle, or a tic-tac-toe (noughts and
crosses) board, you are needlessly complicating things for yourself, IMO.
I do understand what you are saying, however, to be compliant with CSS
and other forms of scripting (DHTML, etc), it is frowned upon to use
tables in such a manor.

The reason I said "spreadsheet" is because the "cells" will contain
both data and form objects. A true spreadsheet would only have data
(hence the quotes around the use of the word "spreadsheet").
The meaning of "data" isn't as rigid as you seem to think. For one
thing, it isn't restricted to data that is sent by the server to the
client. There isn't any reason not to use a table to arrange a form
consisting of labels in one column and controls (whether text boxes,
checkboxes, radio buttons, or lists) in a second, and possibly user tips
or error messages in a third.
Sep 5 '06 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Paul E Collins | last post: by
7 posts views Thread by PJ | last post: by
7 posts views Thread by mercurius_1 | last post: by
14 posts views Thread by Ed Jay | last post: by
2 posts views Thread by Yeah | last post: by
reply views Thread by suresh191 | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.