Preventing wrapping nested layers.

jacob · December 16th, 2003, 07:19 AM

Hope you can help me with this CSS problem. I want to do a table-like structure using nested layers, where an outer layer (DIV) has got four inner layers (SPAN). This is no problem however when there is too much contents in the layers the will wrap in an odd way...

|____||____||____||_some_text_in_a_layer_|
|_with_a_lot_of_contents_|

... and I want it to wrap the contents of the layer within a box, like this...

|____||____||____||_some_text_in_a_layer_|
|_with_a_lot_of________|
|_contents_____________|

Is this possible and how!? Is there some obscure CSS property I do not know?!

I have made a skeleton of what I want, but it illustrates the problem aswell!

Code:

<HTML>
<HEAD>
<STYLE>
BODY   { font-family:verdana; font-size:10pt; font-weight:bold; }
SPAN   { padding:5px; border-style:solid; border-width:1px; }
#cols  { padding:10px; border-style:solid; border-width:2px; display:block; }
#col1  { }
#col2  { }
#col3  { }
#col4  { border-style:solid; border-width:1px; display:block; }
</STYLE>
</HEAD>
<BODY>
<DIV ID='cols'>
    <SPAN ID='col1'>contents01</SPAN>
    <SPAN ID='col2'>contents02</SPAN>
    <SPAN ID='col3'>contents03</SPAN>
    <SPAN ID='col4'>This is a layer with a lot of contents. If 
    this does <I>not</I> wrap so that it is under the other 
    columns, it is good. I would like it to wrap in a box.</SPAN>
</DIV>
</BODY>
</HTML>

I have tried properties as white-space:nowrap; on the outer layer, display:block; on the inner layers, and so on.

Thanks in advance.

Jacob.

planoie · December 16th, 2003, 07:54 AM

SPANs are inline elements. Most CSS formatting that you set for those spans will have little effect on how they interact with adjacent elements. Is there a reason you wish to avoid using a simple table? That would certainly resolve this issue.

I think you might be able to achieve this with more DIVs (one for each column) or perhaps using absolute positioning on your elements. But it's hard to do what you want using flow layout, particularly with those SPANs.

Peter
------------------------------------------------------
Work smarter, not harder.

jacob · December 16th, 2003, 08:24 AM

OK, thanks! Yes there is a reason for the layer-use instead of tables. I am doing a tree like structure, where I nest multiple layers. In an old version, something like this.

I have tried with tables, which I am pretty comfortable with however a lot of new issues emerge. I have already done the layout as it should be using layers, and the last thing missing is the wrapping.

The reason for the table-problems is due to padding, margin etc. which not seem to work too well with individual elements of the table (padding on cells do).

Perhaps I should just try again. Thanks.

Jacob.

meow · December 16th, 2003, 08:58 AM

You can do this several ways. A simple and flexible way is to float the boxes. You need to give them a width (don't make all widths + padding/margin/border add up to 100% - buggy). If you want the wrapper box to be visible you need to add an element with 'clear: left' at the bottom of it, after the other boxes. otherwise it will have no height since floats don't take up any space.

I scaled it down to the bare basics just so you can see how it works.

_________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<style type="text/css">
#cols { border: 2px solid red }
#cols .col { width: 23%; float: left; border: 1px solid blue }
div.clearit { clear: both }
</style>
</head>

<body>

<div id="cols">
<div class="col">contents01</div>
<div class="col">contents02</div>
<div class="col">contents03</div>
<div class="col">
This is a layer with a lot of contents. If
this does <i>not</i> wrap so that it is under the other
columns, it is good. I would like it to wrap in a box.
</div>
<div class="clearit"></div>
</div>

</body>
</html>

(o<
//\ =^..^=

meow · December 16th, 2003, 09:02 AM

Where did the "Edit" button go? Didn't it use to be one?

Anyway, 'clear: left' and 'clear: both' both work in this case. :D

(o<
//\ =^..^=

jacob · December 16th, 2003, 09:31 AM

Thanks for the replies. I think I will study the float and clear properties. There is a lot of possibilities here I can see. Thanks again.

Jacob :)