can anyone help me make this table in to a div layout? i hear it the new and best way but i get stuck when i want to position the divs in the editable region. and how to put a div in a div. it a bit confusing for this beginner !

 

<div class="thrColLiqHdr" align="left" id="mainContent"><!-- TemplateBeginEditable name="content" -->

<table width="770" border="0" cellspacing="10" cellpadding="10">

<tr>

<td width="227" rowspan="2"><p>d</p>

<p> </p>

<p> </p>

</td>

<td colspan="2">d</td>

</tr>

<tr>

<td width="234"><p>d</p>

</td>

<td width="209">d</td>

</tr>

</table>

<p> </p>

<!-- TemplateEndEditable --> </div>

 

if any one can help me that would be great!

It's hard to say anything without the context. Not sure what's doing or suppose to do. There's many ways of doing things.

 

You got a live sample or more of the HTML?

give me some more details and i will beable to help

from what I can tell, the layout is something like this

 

+-------------|--------------------+

|--------------|--------------------+

+_________|_______|_______+

 

yeah, I know, not the best diagram...

how to put a div in a div?

 

<div id="Something1" style="overflow: hidden; float: right; width: 100%; height: 318px;">
 <div style="float: left; margin-top: 0px; width: 376px;" id="Something2">
[b]table/text, whatever you want[/b]
	  <div id="Something3" style="border: 0pt none; margin: 0pt; padding: 0pt; float: right; width: 11px; height: 150px;">
[b]Something here[/b]
	  </div>
 </div>
</div>

 

heres an exemple and i guess you already know basic stuff bout CSS.

I tihnk the overall code for the structure i "drew" above would be:

 

<div id="table" style="width: 400px;">
<div style="float: left; width: 199px; height: 200px; border: 1px solid #000; border-right: 0px;">
  some stuff
</div>
<div style="float: left; width: 198px; height: 200px; border: 1px solid #000;">
 <div style="float: left; width: 198px; height: 99px; border-bottom: 1px solid #000;">
top right block
 </div>
 <div style="float: left; width: 98px; height: 99px; border-right: 1px solid #000;">
 bottom middle block
 </div>
 <div style="float: left; width: 98px; height: 99px;">
 bottom right block
 </div>
</div>
</div>

 

seems easier to use a table, to be honest

I think the overall code for the structure i "drew" above would be:

 

seems easier to use a table, to be honest

 

As i know, even you use <div> tags you'll need to use tables somehow in it... else you'll have millions of div for your website and you'll probly get lost somewhere in it or forget to close one or things like that.

if you are displaying tabular data (eg a database dump) then use a table. Otherwise, use real code...

As i know, even you use <div> tags you'll need to use tables somehow in it... else you'll have millions of div for your website and you'll probly get lost somewhere in it or forget to close one or things like that.

 

Hi. That made me think of the Firefox developer tools, especially "html tidy". It will tell you immediately whether there's any unclosed elements, etc. etc. - could be useful to you.

well, i started to work differently few months ago... when i open a div, table or whatever i close it immadiatly on the next line then put what i want in it, etc so i guess it wont be useful anymore with the method im workin. Also im not coding often as i prefer to design

I usually put comments in next to the closing tags as well - like </div> // Wrapper end to keep track.

Without knowing the purpose it's a bit pointless really.

 

As Penguin said, if it's tabular data then a table should be used. If it's for a layout purpose then we need to see the layout. Translating a random chunk of soup will just result in another random piece of markup.