page structure question

[vito]

besides using frame or table, i studied div span and related but unable to
locate if there is the exact info. to achieve the effect of creating 2
blocks, e.g.


p1 text p2 text
p1 text p2 text
p1 text p2 text
p1 text p2 text
p1 text p2 text
p1 text
p1 text p3 text
p1 text p3 text
p1 text p3 text
p1 text p3 text
p1 text p3 text

or even change p1 text to an image or so

 

[Neredbojias]

besides using frame or table, i studied div span and related but
unable to locate if there is the exact info. to achieve the effect of
creating 2 blocks, e.g.


p1 text p2 text
p1 text p2 text
p1 text p2 text
p1 text p2 text
p1 text p2 text
p1 text
p1 text p3 text
p1 text p3 text
p1 text p3 text
p1 text p3 text
p1 text p3 text

or even change p1 text to an image or so

Search for "2 column layout".

 

[Jim Moe]

besides using frame or table, i studied div span and related but unable to
locate if there is the exact info. to achieve the effect of creating 2
blocks, e.g.

p1 text p2 text
p1 text p2 text
p1 text
p1 text p3 text
p1 text p3 text

Search for "two column layout css".

 

[vito]

p1 text p2 text

Search for "two column layout css".

After adopting the following style, i somehow achieve the effect of
separating left & right blocks. however, i find when a browser window is
rescaled to a smaller size, the right one will shift towards the bottom of
the left part. is that the keyword "float" producing the result? how can i
"fix" the right block? thanks.

#nav{
float:left;
width:240px;
}
#main {
float:right;
width:500px;
}

 

[Jim Moe]

After adopting the following style, i somehow achieve the effect of
separating left & right blocks. however, i find when a browser window is
rescaled to a smaller size, the right one will shift towards the bottom of
the left part. is that the keyword "float" producing the result? how can i
"fix" the right block? thanks.

#nav { float:left; width:240px; }
#main { float:right; width:500px; }

Yes, that is how floated elements work, a bit like inline elements.
Think about how words or images behave when there are two or more in a line.
There are a couple of ways to avoid the wrap:
- Set the widths to a percentage, or at least #main. The column(s) then
adjust to fit the available space (aka: fluid, liquid).
- Wrap the two columns in a div and set that div's width to a value
greater than the sum of the two elements' width + padding + margins +
borders (aka: fixed width, rigid).

 

[Jaxtraw]

besides using frame or table, i studied div span and related but
unable to locate if there is the exact info. to achieve the effect of
creating 2 blocks, e.g.


p1 text p2 text
p1 text p2 text
p1 text p2 text
p1 text p2 text
p1 text p2 text
p1 text
p1 text p3 text
p1 text p3 text
p1 text p3 text
p1 text p3 text
p1 text p3 text

or even change p1 text to an image or so

The easiest and most stable way to do this is with a table layout. Keen
CSSmongers will say that that's a terrible thing to do, but CSS as it stands
just isn't well enough specified to reliably produce general page layout- in
particular the "float" system is a mess, particularly how it reacts to
window resizing etc. IMV it's fundamentally flawed because it insists on a
paradigm in which a page is inherently one document- whereas most
structures such as yours are really more than one document that happen to be
on the same page.

Like many people, I keenly tried to switch over from tables to CSS but after
frustrating and disappointing results switched back. I'll be happy to use
CSS for layout again, once it's been revised to a useful state.

CSS is of course excellent for everything else- setting fonts, colours,
borders, margins, and so on. But for the general page framework, it's
hopelessly undercooked. You'll think you've got it working then resize the
page in some browser and the whole thing slides apart with DIVs flying
everywhere. People who claim that CSS works for this generally are using
horrendous nests of DIVs that try to constrain things- more complex than
tables ever are. The fact that people feel very proud just to manage a 3
column layout in CSS proves how awful it is- this should be a simple,
rudimentary layout to achieve. Most column layouts in CSS are really kludges
with margins shoving the columns about- even when they work, they're far
from the spirit of what CSS was supposed to be about, and half these magic
formulae collapse when somebody resizes the text in Firefox. As to absolute
positioning- brrrrr. Should be banned except for people with an Advanced CSS
Pilot's License.

Anyway, I'm rambling. To reiterate, I'd recommend scrapping even trying it
with DIVs, and just knock up a nice simple table. You can still give the
<td>s classes and IDs to customise them as you wish.

<table>
<tr>
<td rowspan="2">
p1 text
</td>
<td>
p2 text
</td>
</tr>
<tr>
<td>
p3 text
</td>
</tr>
</table>

Ian

 

[vito]

Anyway, I'm rambling. To reiterate, I'd recommend scrapping even trying it
with DIVs, and just knock up a nice simple table. You can still give the
<td>s classes and IDs to customise them as you wish.

<table>
<tr>
<td rowspan="2">
p1 text
</td>
<td>
p2 text
</td>
</tr>
<tr>
<td>
p3 text
</td>
</tr>
</table>

Ian

Your answer is elegant, yet my description is over-simplified. as p1 is
indeed from another table, therefore it becomes difficult to use table.

i feel hopeless, if using frame, the php codes can't handle well. using css,
the wrapping problem occurs...

anyway, thanks for pointing out the drawback of using css