growing <div>s

J

jason

Two <div> areas side by side. When one grows downward, I'd like the
other to do so as well. Any way to do this as well. I tried nesting,
but no success.
 
A

Andy Dingley

Two <div> areas side by side. When one grows downward, I'd like the
other to do so as well.
Click to expand...

This is table-style behaviour and isn't supported by the HTML / CSS
flow model.

If it's important to you, then use a <table>. I wouldn't use the table
display properties in CSS, as they're poorly supported.

The alternatives tend to involve either JavaScript, or setting rigid
sizes onto elements. Overall I see the table approach as being
preferable. If you're insistent that adjacent elements maintain
relative sizing, then you're already committing yourself to table-like
concepts.
 
J

jason

Rigid might work so long as the areas are individually scrollable when
they outgrow the set. I wonder how I can do that. I'm using an asp.net
2.0 contentplaceholder inside the div, which varies in size based on
content.
 
J

jason

looks like this will do it overflow:auto;">


<div style="position:absolute;
left:100px;
top:100px;
width:100px;
height:100px;
background-color:#ffffff;
overflow:auto;">
</div>
 
R

richard

looks like this will do it overflow:auto;">


<div style="position:absolute;
left:100px;
top:100px;
width:100px;
height:100px;
background-color:#ffffff;
overflow:auto;">
</div>
Click to expand...

Yeah that should work but I'd drop the height.
Have you tried doing the same thing but with a "container" division for
both?
Use the above style for the container as well and see what happens.
Instead of inline, do the style in the <head>.
Then you'd show something like:

<div id="container">
<div id="box1">hello</div>
<div id="box2">goodbye</div>
</div>

The idea behind the container is to keep the boxes from breaking when not
desired.
 
A

Andy Dingley

Toby said:
It is -- it's just not supported by Internet Explorer.
Click to expand...

Sorry - I worded that poorly.

IE and FF both support "CSS table style" behaviour, although it's (not
entirely unreasonably) only reliably available for the <table> element.
IE doesn't support the CSS display property setting display: table-*;
on other elements.

What I should have said is that you're reduced to using tables (and
arguably mis-using them) because what you really need here is
"newspaper column" layout and HTML / CSS doesn't support that at all.
Although XSL:FO can do it (for many output formats).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

growing <div> 1
Clickable Div Block 1
How to make a div select work? 5
Incrementing getelementbyid 1
growing <div>s keeping then ending at the same stop 0
How can I hide a div using an event listener on multiple checkboxes? 6
Im having trouble containing a title an image and a button 2
Help with code 0

Members online

No members online now.
Total: 33 (members: 0, guests: 33)
Robots: 228

Forum statistics

Threads
473,763
Messages
2,569,563
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top