CSS Positioning is going to make me CRAZY!

[Noozer]

With the sample code below, the "results" div will wrap below the "search"
div if it is longer that the "search" div.

The content of these two divs is dynamic so I cannot make the a set width or
height.

How can I ensure that my "results" div does not go below my "search" div?

<div id="container">
<div id="search" style="float: left">
<!-- SOME ASP CODE HERE -->
<input type="text" name="key">
<input type="submit" value="Submit">
</div>
<div id="results">
<span class="heading">Search Results</span>
<!-- ASP CODE TO DISPLAY RESULTS HERE -->
</div>
</div>
<div id="edit">
<!-- MORE ASP GENERATED HTML -->
</div>

 

[Richard]

With the sample code below, the "results" div will wrap below the "search"
div if it is longer that the "search" div.

The content of these two divs is dynamic so I cannot make the a set width
or height.

How can I ensure that my "results" div does not go below my "search" div?

<div id="container">
<div id="search" style="float: left">
<!-- SOME ASP CODE HERE -->
<input type="text" name="key">
<input type="submit" value="Submit">
</div>
<div id="results">
<span class="heading">Search Results</span>
<!-- ASP CODE TO DISPLAY RESULTS HERE -->
</div>
</div>
<div id="edit">
<!-- MORE ASP GENERATED HTML -->
</div>

define "container" with a width and height for one.
"search" then should have a definitive width and height as well.

 

[Lauri Raittila]

With the sample code below, the "results" div will wrap below the "search"
div if it is longer that the "search" div.
Aha

The content of these two divs is dynamic so I cannot make the a set width or
height.

Aha, so provide examples for both.

How can I ensure that my "results" div does not go below my "search" div?

Don't put your search field above results? How about URL? Maybe you could
describe what you would like to happen?

 

[Kris]

"search" then should have a definitive width and height as well.

What if the text inside is larger than the designer anticipated?

 

[rf]

Noozer

With the sample code below, the "results" div will wrap below the "search"
div if it is longer that the "search" div.

The content of these two divs is dynamic so I cannot make the a set width or
height.

How can I ensure that my "results" div does not go below my "search" div?

<snip code>

Give the results div a left margin equal to the width of the search div.

 

[Noozer]

What if the text inside is larger than the designer anticipated?

And that's my problem... 95% of the page is generated dynamically. I do not
know how wide or tall any of the content will be.

I want a column on the left side that is wide enough to hold it's content.

To the right of this I want another "column" that is wide enough to hold
it's content. This second column can go off the right side of the screen if
necessary. I do not want any of this second column to appear below the first
column.

Below these two columns I want a third area. I want the top of this third
area to start at the lowest point of the two columns above.

<div id="container">
<div id="search">
</div>
<div id="results">
</div>
</div>
<div id="edit">
</div>

If I float the container or search DIV, it is no longer contained within the
container DIV.

Also if the search DIV is not as tall as the results DIV, the results DIV
will appear below the search DIV. I want the search DIV to be blank below it
if it isn't as tall as the results DIV.

At this point I think I'll just use tables... I hate them, but at least they
are predictable.

Thanks!





PS ..and no I don't have a sample on the internet.

 

[Noozer]

Noozer
width div?

<snip code>

Give the results div a left margin equal to the width of the search div.

How is this done if you don't know the width of the search div at design
time?

 

[rf]

How is this done if you don't know the width of the search div at design
time?

You do. It is a certain number of ems wide.