CSS div wrapping question

[techfuzz]

To make this as simple as possible, let's say I have a table with one row and column. The table is stretched to the width of the page. The table has just one cell and in it there are two div elements. Basically it looks like this:
<table style="width: 100%;">
<tr>
<td>
<div style="white-space: nowrap;">Long item that stretches most of the way across the page</div>
<div style="float: right; white-space: nowrap;">Another item that takes up most of the rest of the page</div>
</td>
</tr>
</table>

Now, when the width of the browser window is wide enough, everything fits into a single line. If you shrink the browser window, the second div will eventually wrap under the first and create a second line. I don't want it to create a second line; I want one line and then the horizontal scrollbar to appear when the browser window width gets too small.

Without hard-coding a static width for the table, tr, or td elements, how do I prevent the second div from wrapping to a second line?

techfuzz

 

[Crusty]

Don't use that table. Tables are not for layout control.

 

[techfuzz]

Originally posted by: Crusty
Don't use that table. Tables are not for layout control.

Thanks, but I didn't ask about when it was ok to use tables. I asked how to prevent the second div from wrapping under the first?

techfuzz

 

[Crusty]

Originally posted by: techfuzz

Originally posted by: Crusty
Don't use that table. Tables are not for layout control.

Thanks, but I didn't ask about when it was ok to use tables. I asked how to prevent the second div from wrapping under the first?

techfuzz

The problem is that your table elements are controlling the displaying of your divs. So matter what styling you put on your divs your table row is controlling the wrapping. You should instead wrap your two content divs with a container div with the appropriate styling.

 

[brikis98]

Not sure what the best approach is, but you can try a few things:

1. try adding overflow: auto to the containing td, or wrap the two divs in another div and use overflow: auto on it.
2. Surround the two divs with a <nobr> tag
3. If the divs themselves don't have to stretch to fit the whole page, you can put a fixed width on their surrounding td (or again, wrap them in a div).

 

[jjones]

Originally posted by: Crusty

Originally posted by: techfuzz

Originally posted by: Crusty
Don't use that table. Tables are not for layout control.

Thanks, but I didn't ask about when it was ok to use tables. I asked how to prevent the second div from wrapping under the first?

techfuzz

The problem is that your table elements are controlling the displaying of your divs. So matter what styling you put on your divs your table row is controlling the wrapping. You should instead wrap your two content divs with a container div with the appropriate styling.

Not to get into the whole table vs divs thing, in essence, what you suggest he do is exactly what he already has, and have still avoided providing an answer.

To the OP, I don't think you can do what you want to without specifying a fixed width.

 

[Crusty]

Originally posted by: jjones

Originally posted by: Crusty

Originally posted by: techfuzz

Originally posted by: Crusty
Don't use that table. Tables are not for layout control.

Thanks, but I didn't ask about when it was ok to use tables. I asked how to prevent the second div from wrapping under the first?

techfuzz

The problem is that your table elements are controlling the displaying of your divs. So matter what styling you put on your divs your table row is controlling the wrapping. You should instead wrap your two content divs with a container div with the appropriate styling.

Not to get into the whole table vs divs thing, in essence, what you suggest he do is exactly what he already has, and have still avoided providing an answer.

To the OP, I don't think you can do what you want to without specifying a fixed width.

My point is that divs are easier and more flexible to style with then tables, so changing his "wrapping table" to a div will give him a simpler layout and will allow him to style it so he won't have his problem. The reason I didn't give a simple answer is because I can't tell you off the top of my head the correct syntax to achieve the styling he wants, but I can tell you that using a table will keep the OP's head banging against the wall.

 

[PhatoseAlpha]

Why not just put the second div in a different <td> element?



<table style="width: 100%;">
<tr>
<td>
<div style="white-space: nowrap;">Long item that stretches most of the way across the page</div>
</td><td>
<div style="float: right; white-space: nowrap;">Another item that takes up most of the rest of the page</div>
</td>
</tr>
</table>

 

[jjones]

Originally posted by: PhatoseAlpha
Why not just put the second div in a different <td> element?



<table style="width: 100%;">
<tr>
<td>
<div style="white-space: nowrap;">Long item that stretches most of the way across the page</div>
</td><td>
<div style="float: right; white-space: nowrap;">Another item that takes up most of the rest of the page</div>
</td>
</tr>
</table>

Actually, this is the easiest way except just get rid of the divs altogether:

<table style="width: 100%;">
<tr>
<td style="white-space: nowrap;">Long item that stretches most of the way across the page</td>
<td style="white-space: nowrap; text-align: right;">Another item that takes up most of the rest of the page</td>
</tr>
</table>

 

[drebo]

Try adding a float: left; in your first DIV. That's the only way a browser is going to know that both are supposed to be on the same line.

 

[911paramedic]

That's not really the way you are supposed to do things, but this works:

<table style="width: 100%;">
<tr>
<td>
<div style="float: left; width: 50%">Long item that stretches most of the way across the page</div>
<div>Another item that takes up most of the rest of the page</div>
</td>
</tr>
</table>

Assign whatever width you want to the first float. You are experiencing "drop", which is when there isn't enough room for both on the same line, the second element will drop below the first.

 

[PhatoseAlpha]

Originally posted by: drebo
Try adding a float: left; in your first DIV. That's the only way a browser is going to know that both are supposed to be on the same line.

Unfortunately, that won't help him. Floated elements will still drop down instead of forcing a scroll bar if the width isn't available.

This kind of horizontal layout really only works worth a damn in CSS if you've got fixed everything. If anything is flexible, tables it is.

 

[911paramedic]

Originally posted by: PhatoseAlpha

Originally posted by: drebo
Try adding a float: left; in your first DIV. That's the only way a browser is going to know that both are supposed to be on the same line.

Unfortunately, that won't help him. Floated elements will still drop down instead of forcing a scroll bar if the width isn't available.

This kind of horizontal layout really only works worth a damn in CSS if you've got fixed everything. If anything is flexible, tables it is.

Fook tables if you want to use CSS. You can do it correctly with percentages, but otherwise you will end up with the drop problem. Floating works just fine, but you have to use it correctly.

 

[PhatoseAlpha]

And to do what he wants it to do, what exactly is the method that doesn't involve tables?

 

[jjones]

Originally posted by: PhatoseAlpha
And to do what he wants it to do, what exactly is the method that doesn't involve tables?

*crickets*

 

[NiKeFiDO]

your example always stays on the same line for me. what aren't you showing us?

 

[911paramedic]

Originally posted by: PhatoseAlpha
And to do what he wants it to do, what exactly is the method that doesn't involve tables?

Put them each in a div, use negative margins, etc.

 

[drebo]

Originally posted by: PhatoseAlpha
And to do what he wants it to do, what exactly is the method that doesn't involve tables?

You'll need a wrapper div around the two divs set to a static width (among other things).

This is the major failing of CSS, in my opinion, and one that makes it incredibly cumbersome to use for layouts.

Well, that and each browser/version renders the same code differently. But that's another debate.

 

[clamum]

Not exactly like your situation, but my personal website uses a liquid three column CSS layout with no tables, just divs. They stretch to fill up the screen and when the window is resized, shink until a minimum width is reach and then the scrollbars appear.

If that is what you're looking for, Google "liquid two column css layout". That's the site I got my three-column one for.