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 !<br /><br /><div class="thrColLiqHdr" align="left" id="mainContent"><!-- TemplateBeginEditable name="content" --><br /> <table width="770" border="0" cellspacing="10" cellpadding="10"><br /> <tr><br /> <td width="227" rowspan="2"><p>d</p><br /> <p> </p><br /> <p> </p><br /> </td><br /> <td colspan="2">d</td><br /> </tr><br /> <tr><br /> <td width="234"><p>d</p><br /> </td><br /> <td width="209">d</td><br /> </tr><br /> </table><br /> <p> </p><br /> <!-- TemplateEndEditable --> </div><br /><br />if any><!--/coloro-->--------------<!--colorc--></span><!--/colorc-->|--------------------+<br />+_________|_______|_______+<br /><br />yeah, I know, not the best diagram...<!--content-->
how to put a div in a div?<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><div id="Something1" style="overflow: hidden; float: right; width: 100%; height: 318px;"><br />Â Â Â Â <div style="float: left; margin-top: 0px; width: 376px;" id="Something2"><br />table/text, whatever you want<br />Â Â Â Â Â Â Â Â Â Â <div id="Something3" style="border: 0pt none; margin: 0pt; padding: 0pt; float: right; width: 11px; height: 150px;"><br />Something here<br />Â Â Â Â Â Â Â Â Â Â </div><br />Â Â Â Â </div><br /></div><!--c2--></div><!--ec2--><br /><br />heres an exemple and i guess you already know basic stuff bout CSS.<!--content-->
I tihnk the overall code for the structure i "drew" above would be:<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><div id="table" style="width: 400px;"><br /><div style="float: left; width: 199px; height: 200px; border: 1px solid #000; border-right: 0px;"><br />Â Â some stuff<br /></div><br /><div style="float: left; width: 198px; height: 200px; border: 1px solid #000;"><br />Â Â <div style="float: left; width: 198px; height: 99px; border-bottom: 1px solid #000;"><br />Â Â Â Â top right block<br />Â Â </div><br />Â Â <div style="float: left; width: 98px; height: 99px; border-right: 1px solid #000;"><br />Â Â Â Â bottom middle block<br />Â Â </div><br />Â Â <div style="float: left; width: 98px; height: 99px;"><br />Â Â Â Â bottom right block<br />Â Â </div><br /></div><br /></div><!--c2--></div><!--ec2--><br /><br />seems easier to use a table, to be honest <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/wink.gif" style="vertical-align:middle" emoid="
" border="0" alt="wink.gif" /><!--content-->
<!--quoteo(post=14722:date=Oct 30 2007, 07:27 AM:name=php_penguin)--><div class='quotetop'>QUOTE(php_penguin @ Oct 30 2007, 07:27 AM) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->I <i>think</i> the overall code for the structure i "drew" above would be:<br /><br />seems easier to use a table, to be honest <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/wink.gif" style="vertical-align:middle" emoid="" border="0" alt="wink.gif" /><!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />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><img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->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 style="vertical-align:middle" emoid="" border="0" alt="biggrin.gif" /><!--content-->
I usually put comments in next to the closing tags as well - like </div> // Wrapper end to keep track.<br /><br /><!--content-->
Without knowing the purpose it's a bit pointless really.<br /><br />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.<!--content-->
how to put a div in a div?<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><div id="Something1" style="overflow: hidden; float: right; width: 100%; height: 318px;"><br />Â Â Â Â <div style="float: left; margin-top: 0px; width: 376px;" id="Something2"><br />table/text, whatever you want<br />Â Â Â Â Â Â Â Â Â Â <div id="Something3" style="border: 0pt none; margin: 0pt; padding: 0pt; float: right; width: 11px; height: 150px;"><br />Something here<br />Â Â Â Â Â Â Â Â Â Â </div><br />Â Â Â Â </div><br /></div><!--c2--></div><!--ec2--><br /><br />heres an exemple and i guess you already know basic stuff bout CSS.<!--content-->
I tihnk the overall code for the structure i "drew" above would be:<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><div id="table" style="width: 400px;"><br /><div style="float: left; width: 199px; height: 200px; border: 1px solid #000; border-right: 0px;"><br />Â Â some stuff<br /></div><br /><div style="float: left; width: 198px; height: 200px; border: 1px solid #000;"><br />Â Â <div style="float: left; width: 198px; height: 99px; border-bottom: 1px solid #000;"><br />Â Â Â Â top right block<br />Â Â </div><br />Â Â <div style="float: left; width: 98px; height: 99px; border-right: 1px solid #000;"><br />Â Â Â Â bottom middle block<br />Â Â </div><br />Â Â <div style="float: left; width: 98px; height: 99px;"><br />Â Â Â Â bottom right block<br />Â Â </div><br /></div><br /></div><!--c2--></div><!--ec2--><br /><br />seems easier to use a table, to be honest <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/wink.gif" style="vertical-align:middle" emoid="
" border="0" alt="wink.gif" /><!--content--><!--quoteo(post=14722:date=Oct 30 2007, 07:27 AM:name=php_penguin)--><div class='quotetop'>QUOTE(php_penguin @ Oct 30 2007, 07:27 AM) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->I <i>think</i> the overall code for the structure i "drew" above would be:<br /><br />seems easier to use a table, to be honest <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/wink.gif" style="vertical-align:middle" emoid="
" border="0" alt="wink.gif" /><!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />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><img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->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 style="vertical-align:middle" emoid="" border="0" alt="biggrin.gif" /><!--content-->I usually put comments in next to the closing tags as well - like </div> // Wrapper end to keep track.<br /><br /><!--content-->
Without knowing the purpose it's a bit pointless really.<br /><br />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.<!--content-->