PDA

Click to See Complete Forum and Search --> : Wrapping Around a Table

NoDQForums
01-12-2007, 05:07 PM
Not sure if this is going to require some CSS or not but I do know it'll require a lot of html. :D

Anyways, I'm working on a new postbit layout for my website. I've attached an image below of exactly what I am trying to accomplish, but basically I am going to take this $post variable, which will contain a various amount of text. I will also have a table to display the user information of who posted the particular topic. Both this table and the $post variable will be inside one main table.

What I'd like to accomplish is right align the user table to the right side inside the main table. Then I'd like any and all text to go to the left of that table and then nest around it so that when the text continues to go on it will actually be displayed underneath the user table. I attached a screen shot of what I'm trying to accomplish. So how can I achieve this?
Annaccond
01-12-2007, 06:21 PM
Just nest tables and use "float" to align "user table" on right side inside main table:


<table>
<tr>
<td>
<table style="float: right">
<tr>
<td>user table</td>
</tr>
</table>
main table content
</td>
</tr>
</table>

Of course you can use more CSS values to customize it (padding etc.).
WebJoel
01-12-2007, 07:38 PM
While technically correct, the above example is using TABLE and that is about 10+ years outdated. "Tables" are for "tabular data" (like spreadsheets, etc.).

Here does the same thing, no tables were used, validates and although it probably looks very foreign to you (if you are still using TABLEs), this is really a better method to acheive what you are asking for.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}
body {padding-bottom:25px;}
</style>
<script type="text/javascript"><!--
// -->
</script>
</head>
<body>

<div style="width:80%; height:auto; border:3px solid gray; padding:16px 4px 8px 10px; margin:6px auto;">

<div style="width:200px; height:auto; border:4px double red; padding:6px 4px; margin-bottom:3px; float:right; clear:right;">
<h4>First DIV</h4>
<p>This is the first DIV, float:right;, it will stay to the right of the larger DIV and auto-expand vertically to accomodate new text.</p></div>
<div style="width:200px; height:auto; border:4px double red; padding:6px 4px; margin-bottom:3px; float:right; clear:right;">
<h4>Second DIV</h4>
<p>This is the second DIV, float:right;, it will stay to the right of the larger DIV and auto-expand vertically to accomodate new text.</p></div>
<div style="width:200px; height:auto; border:4px double red; padding:6px 4px; margin-bottom:3px; float:right; clear:right;">
<h4>Third DIV</h4>
<p>This is the third DIV, float:right;, it will stay to the right of the larger DIV and auto-expand vertically to accomodate new text. Note that THIS dic, while style exactly the same as the two above it, has MORE TEXT, and it STILL styles correctly...</p></div>

<h1>Your first Header Here</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
</div>

</body>
</html>

There are some things that probably won't make any sence, -like, 'why "float:right; clear:right;"?' That is because if you have two or more things 'floated-right' that appear sequentially in the document-flow (one right after the other as you read the HTML) and do not 'clear' the one preceeding it, they are doing to form a 'train', right-to-left, and not 'stack up' one on top of the next, while staying 'to the right' of the container. If you to experiment with this, remove the three "clear:right;" statements and see what happens... it's not pretty anymore...
NoDQForums
01-12-2007, 08:50 PM
Actually the second one really doesn't look foreign to me. I can program PHP like no tomorrow, but I rarily have to do designing and have missed some of the more "basic" styles of design writing that are becoming more and more common. Even something as simple as using float whether in <div> tags or in table tags.
Annaccond
01-12-2007, 10:14 PM
While technically correct, the above example is using TABLE and that is about 10+ years outdated. "Tables" are for "tabular data" (like spreadsheets, etc.).
I agree that such constrctions like table with table and there another table are outdated and is much more better use CSS for positioning, however someone asked about how to make it with tables so I wanted gave the most simple way.
WebJoel
01-13-2007, 10:41 AM
True, -I do that too, and esp. when in the "HTML forum", a question regarding 'how to this w/ TABLEs' should receive a reply 'in TABLE' format, not a scolding dissertation in the virtues of CSS versus the futility of an all-TABLE layout as I might be perceived to be suggesting. -I use TABLEs too. I certainly have a few 'legacy builds' in my folder still, -to be sure! :o I was just providing a nudge in the direction that we should be moving towards. :) There are just so many Dreamweaver/Frontpage afficinado-refugees that make posts about 'my TABLE-based layout isn't looking the same in so-and-so browser as it does in IE/DW/FP... help! :eek: Anyway, I didn't mean to lessen your input (which as I stated, was technically correct for the postee's current ability & page requirements). :)