DIV wraps when it shouldn't

plenty900 · Mar 1, 2008

Hi all,

I have several DIVs side by side, and the last one wraps when it
shouldn't.
The reason is ostensibly that the text inside is very wide, i.e. that
the
text inside does not wrap.

What determines the one that will wrap? i.e.
1. the DIV
2. the text paragraph inside?

Thanks.

dorayme · Mar 1, 2008

<[email protected]
m>,

Hi all,

I have several DIVs side by side,

and you did exactly what to get this?

and the last one wraps when it
shouldn't.

Are you sure it shouldn't? How, why, what, where?

The reason is ostensibly that the text inside is very wide, i.e. that
the
text inside does not wrap.

If you have floated a set of divs or otherwise in-lined them,
then, of course, when the line runs out of space, the ones that
cannot fit, flow onto the next line. There can be a number of
reasons why divs can be wider than you expect, one of them being
long unbroken text like in a URL. If a div has such a line, and
if it is floated, the div will be as wide as the line at least
(floated boxes are shrink to fit).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
div {
float: left; border: 1px solid;
}
</style>
</head>
<body>
<div>lineoftext</div>
<div>lineoftextabitlonger</div>
<div>muchlongerlineoftextaltogetherinfactaverylonglineoftextindeed
when youcometothinkofsomewidthsitmightbewantingtosqeezeinto</div>
</body>
</html>

plenty900 · Mar 1, 2008

Thanks for your reply. I should explain, I'm trying to
remove all tables from a webpage.

Currently I have a table like this:

<table width=100%><tr>
<td width=50>text text<td width=50> text text<td
width="*">dflajlfadljfalfkjdaslkaasldkjflakjdfaadslkjsdlfkjadslkfjalkjfldskjlfjdsldkjlksdjflsdkjfldskj
</table>

In tables, TDs never wrap of course.

So really my question is, how to achieve the same thing with DIVs?

I assume that underlying both DIVs and TDs are the same fundmental
mechanisms.

Thanks.

dorayme · Mar 1, 2008

<[email protected]
m>,

Thanks for your reply. I should explain, I'm trying to
remove all tables from a webpage.

Currently I have a table like this:

<table width=100%><tr>
<td width=50>text text<td width=50> text text<td
width="*">dflajlfadljfalfkjdaslkaasldkjflakjdfaadslkjsdlfkjadslkfjalkjfldskjlf
jdsldkjlksdjflsdkjfldskj
</table>

In tables, TDs never wrap of course.

So really my question is, how to achieve the same thing with DIVs?

I assume that underlying both DIVs and TDs are the same fundmental
mechanisms.

Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
#container {width: 50em;}
div.short {float: left; width:50px;}
div.long {float: left;}
</style>
</head>
<body>
<div id="container">
<div class="short">text text</div>
<div class="short">text text</div>
<div>dflajlfadljfalfkjdaslkaasldkjflakjdfaadslkjsdlfkjadslkfjalkjf
ldskjlfjdsldkjlksdjflsdkjfldskj</div>
</div>
</body>
</html>

But don't do this. Instead read
<http://www.htmldog.com/guides/htmlbeginner/> and
<http://en.wikipedia.org/wiki/Semantic_Web>

plenty900 · Mar 1, 2008

Thanks again. For some reason, my HTML is not doing
what your example is doing. I think I will have to start from
scratch to determine what's going on. One complication
is that I have another DIV floating on the righthand side,
and my short DIVs contain DIVs within them.

Ben C · Mar 1, 2008

Thanks for your reply. I should explain, I'm trying to
remove all tables from a webpage.

Currently I have a table like this:

<table width=100%><tr>
<td width=50>text text<td width=50> text text<td
width="*">dflajlfadljfalfkjdaslkaasldkjflakjdfaadslkjsdlfkjadslkfjalkjfldskjlfjdsldkjlksdjflsdkjfldskj
</table>

In tables, TDs never wrap of course.

So really my question is, how to achieve the same thing with DIVs?

I assume that underlying both DIVs and TDs are the same fundmental
mechanisms.

No, unless you set display: table-cell on the divs (won't work in IE
though).

You have discovered one of the differences-- floats stack up underneath
each other when they fill the available width but table rows don't
"break".

Clickable Div Block	1	Oct 13, 2023
How to make a div select work?	5	Jan 13, 2022
How to prevent a float:left DIV from wrapping?	1	Jan 31, 2008
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
Is it possible an iframe can overlapp another?	3	Apr 20, 2022
Jquery not triggering / acting as expected.	0	Mar 6, 2022
Page do not work, when adding php code	1	Sep 16, 2022
Detecting Where Text Wraps	1	Aug 23, 2008

DIV wraps when it shouldn't

plenty900

dorayme

plenty900

dorayme

plenty900

Ben C

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads