Creating two tables for a site.

@rdenisecApr 20.2007

I am working on a site and I need to create two tables side by side. One will have the menu and the next one will have the text with a scrolling view so that the two tables are the same length and fit the page at all times. The problem I am having is even though the second table has a scroll effect for longer text, the menu on the right alignment gets thrown off and they are not aligned properly anymore. Can someone show me how to create tables and make them stay the same size at all times or to make the menu stay in place no matter what is in the second menu? ?

to post a comment

HTML

9 Comments(s) _↴

@CharlesApr 20.2007 — #Tables are not intended for layout and they only cause problems when used that way. Hie yourself to the [url=http://www.webdeveloper.com/forum/forumdisplay.php?f=7]CSS forum[/url].

@KDLAApr 20.2007 — #You don't need tables to do that:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;style type="text/css"&gt;
 
 body {text-align: center;}
 #wrapper {display: block; margin: 0 auto; width: 750px; padding: 0;text-align: left;}
 #nav {float: left; display: block; width: 200px; height: 500px; }
 #content {padding-left: 20px; display: block; overflow: scroll; height: 500px;}
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div id="wrapper"&gt;
 &lt;div id="nav"&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada urna et ligula. Etiam feugiat imperdiet elit. Proin non est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ornare lorem eu ligula. Nulla facilisi. In ullamcorper sodales neque. Nullam vestibulum velit ut sapien. Quisque lacus est, vulputate et, aliquet et, volutpat id, sapien. Vivamus porta. Duis urna dui, fringilla eu, scelerisque id, accumsan in, nisi. Proin sed eros. Praesent tempus risus sed leo. Quisque pulvinar consectetuer ante.
 &lt;/p&gt;
 
 &lt;/div&gt;
 &lt;div id="content"&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada urna et ligula. Etiam feugiat imperdiet elit. Proin non est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ornare lorem eu ligula. Nulla facilisi. In ullamcorper sodales neque. Nullam vestibulum velit ut sapien. Quisque lacus est, vulputate et, aliquet et, volutpat id, sapien. Vivamus porta. Duis urna dui, fringilla eu, scelerisque id, accumsan in, nisi. Proin sed eros. Praesent tempus risus sed leo. Quisque pulvinar consectetuer ante.
 &lt;/p&gt;
 &lt;p&gt;
 Sed eget lacus in massa fringilla feugiat. Vestibulum pharetra. Integer orci massa, commodo quis, consequat ac, sodales et, urna. Quisque ut libero et velit pharetra nonummy. Phasellus eget magna. In mauris mi, facilisis sed, placerat id, suscipit nec, elit. Fusce fermentum fermentum dui. Curabitur viverra pharetra velit. Fusce nec nisl vitae lacus placerat scelerisque. Integer sit amet ante vitae nisl ultricies ultrices. Quisque vitae dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer libero. Cras interdum dapibus magna. Curabitur id lorem. Quisque eget est. Proin dapibus arcu at ante. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum fringilla tempor purus.
 &lt;/p&gt;
 &lt;p&gt;
 Aliquam mollis nulla vel arcu. Quisque purus nibh, sodales at, molestie eget, vulputate vitae, orci. Suspendisse potenti. Nunc sit amet eros. In hac habitasse platea dictumst. Pellentesque ornare varius mauris. Pellentesque vitae ligula. Ut tincidunt nisi nec tortor. Donec pede sapien, elementum in, gravida eu, iaculis sit amet, nisi. In sem ipsum, rhoncus eget, laoreet non, tristique a, felis. Proin arcu est, tempor eget, euismod in, tempus vel, dolor. Nullam elementum, risus a congue tempor, tellus eros malesuada ligula, ac mollis elit nibh quis nulla. Etiam mattis congue nisi.
 &lt;/p&gt;
 
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

KDLA

@rbudjApr 20.2007 — #post your code so we can look at it

@CharlesApr 20.2007 — #You don't need tables to do that:

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;style type="text/css"&gt;
 
 body {text-align: center;}
 #wrapper {display: block; margin: 0 auto; width: 750px; padding: 0;text-align: left;}
 #nav {float: left; display: block; width: 200px; height: 500px; }
 #content {padding-left: 20px; display: block; overflow: scroll; height: 500px;}
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div id="wrapper"&gt;
 &lt;div id="nav"&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada urna et ligula. Etiam feugiat imperdiet elit. Proin non est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ornare lorem eu ligula. Nulla facilisi. In ullamcorper sodales neque. Nullam vestibulum velit ut sapien. Quisque lacus est, vulputate et, aliquet et, volutpat id, sapien. Vivamus porta. Duis urna dui, fringilla eu, scelerisque id, accumsan in, nisi. Proin sed eros. Praesent tempus risus sed leo. Quisque pulvinar consectetuer ante.
 &lt;/p&gt;
 
 &lt;/div&gt;
 &lt;div id="content"&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada urna et ligula. Etiam feugiat imperdiet elit. Proin non est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ornare lorem eu ligula. Nulla facilisi. In ullamcorper sodales neque. Nullam vestibulum velit ut sapien. Quisque lacus est, vulputate et, aliquet et, volutpat id, sapien. Vivamus porta. Duis urna dui, fringilla eu, scelerisque id, accumsan in, nisi. Proin sed eros. Praesent tempus risus sed leo. Quisque pulvinar consectetuer ante.
 &lt;/p&gt;
 &lt;p&gt;
 Sed eget lacus in massa fringilla feugiat. Vestibulum pharetra. Integer orci massa, commodo quis, consequat ac, sodales et, urna. Quisque ut libero et velit pharetra nonummy. Phasellus eget magna. In mauris mi, facilisis sed, placerat id, suscipit nec, elit. Fusce fermentum fermentum dui. Curabitur viverra pharetra velit. Fusce nec nisl vitae lacus placerat scelerisque. Integer sit amet ante vitae nisl ultricies ultrices. Quisque vitae dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer libero. Cras interdum dapibus magna. Curabitur id lorem. Quisque eget est. Proin dapibus arcu at ante. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum fringilla tempor purus.
 &lt;/p&gt;
 &lt;p&gt;
 Aliquam mollis nulla vel arcu. Quisque purus nibh, sodales at, molestie eget, vulputate vitae, orci. Suspendisse potenti. Nunc sit amet eros. In hac habitasse platea dictumst. Pellentesque ornare varius mauris. Pellentesque vitae ligula. Ut tincidunt nisi nec tortor. Donec pede sapien, elementum in, gravida eu, iaculis sit amet, nisi. In sem ipsum, rhoncus eget, laoreet non, tristique a, felis. Proin arcu est, tempor eget, euismod in, tempus vel, dolor. Nullam elementum, risus a congue tempor, tellus eros malesuada ligula, ac mollis elit nibh quis nulla. Etiam mattis congue nisi.
 &lt;/p&gt;
 
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

KDLA[/QUOTE]You've incorrectly mixed HTML with XHTML. And worse, you're using the transitional DTD.

@KDLAApr 20.2007 — #DOCTYPE edited -- cut and pasted wrong string into posting. Thanks for catching that, Charles.

TGIF!!!!!

@CharlesApr 20.2007 — #DOCTYPE edited -- cut and pasted wrong string into posting. Thanks for catching that, Charles.

TGIF!!!!![/QUOTE]Now you've got a different, wrong DOCTYPE. Damn that XHTML!

@KDLAApr 20.2007 — #Better? If not, I give up.

@CharlesApr 20.2007 — #Still wrong, use:

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">[/code]

@KDLAApr 20.2007 — #OK -- Charles is the DOCTYPE God. ?

Actually, for anyone out there, here's a listing of DOCTYPES:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

And, if you're in a hurry or don't know about DOCTYPES, don't rely on Dreamweaver to give the correct one -- either appropriate format or correct syntax. :p

Refer to this article for more information: http://alistapart.com/stories/doctype/

Also in #HTML _↴

Tableless html How to remove onclick command from a child of a div HTML 5 as standalone app

Success!

Help @rdenisec spread the word by sharing this article on Twitter...

Tweet This

Creating two tables for a site.

9 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Creating two tables for a site.

9 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #HTML _↴