A Artem Grebenyuk's website

I decided to consolidate all the issues related to the theming of my site into one theme.

I was sent here for advice from Vkontakte.

Let's get straight to the point:

I'm theming Drupal, and I created Page.tpl.php without any problems.

However, I've run into some snags with  Node.tpl.php

So here's what I have:

Css 

.node#wrapper{width:720px; margin:0 auto;}
.node#title{height:20px; width:720px; font-size:20px; font-family:Arial, Helvetica, sans-serif; color:#37B700;}
.node#title::first-letter{text-transform:uppercase} 
.node#title a{color:#37B700; text-decoration:none;}
.node#title a:hover{color:#37B700; text-decoration:underline;}
.node#posttitle{height:10px; width:720px; font-size:9px; font-family:Arial, Helvetica, sans-serif; color:#AAA;}
.node#posttitle::first-letter{text-transform:uppercase}
.node#posttitle a{text-decoration:none}
.node#posttitle a:hover{text-decoration:underline}
.node#img{float:left; margin-right:5px;margin-bottom:5px; border:ridge 2px #CCC}
.node#comments{display:block; width:50px; height:60px; float:right; margin-left:5px; margin-bottom:5px; background:url(images/comment.png); font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:24px; text-decoration:none; text-align:center;}
.node#comments p{ margin-top:13px;}
.node#more{background-image:url(images/more.png);display: block;float: right;height: 28px;line-height: 24px;margin-left: 5px;font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px;text-decoration:none; text-align:center;width: 85px;}
.node#content{width:720px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:justify;}
.node#post{width:738px; height:8px; margin-left:-8px; background:url(../images/postnode.png); clear:both; margin-top:35px; background-repeat:repeat-x; margin-bottom:6px;}
.node#tagsnode{float:left; margin-top: 5px; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.node#tagsnode a{color:#37B700; text-decoration:none;}
.node#tagsnode a:hover{color:#37B700; text-decoration:underline;} 

Html

<div class="node" id="wrapper">
<div class="node" id="title">just text <a href="#">link</a></div>
<div class="node" id="posttitle">just text <a href="#">link</a></div>
<hr width="100%" size="3">
<div class="node" id="img"><img src="logo.png" /></div>
<a href="#" class="node" id="comments"><p>56</p></a>
<div class="node" id="content">The World Wide Web is made up of millions of web servers across the globe. A web server is a program that runs on a computer connected to the network and uses the HTTP protocol to transfer data. In its simplest form, such a program receives an HTTP request over the network for a specific resource, finds the corresponding file on the local hard drive, and sends it back to the requesting computer. More complex web servers can dynamically allocate resources in response to HTTP requests. To identify resources (often files or parts of files) on the World Wide Web, Uniform Resource Identifiers (URIs) are used. To determine the location of resources on the network, Uniform Resource Locators (URLs) are employed. These URL locators combine URI identification technology with the Domain Name System (DNS) — a domain name (or directly an IP address in numeric form) is part of the URL to indicate the computer (more precisely, one of its network interfaces) that executes the code of the required web server.
To view information received from a web server, a special program called a web browser is used on the client computer. The main function of a web browser is to display hypertext. The World Wide Web is inextricably linked to the concepts of hypertext and hyperlinks. Most of the information on the Web is indeed hypertext. To facilitate the creation, storage, and display of hypertext on the World Wide Web, HTML (HyperText Markup Language) is traditionally used, which is a markup language for hypertext. The process of marking up hypertext is called layout, and those who specialize in layout are referred to as webmasters. After HTML markup, the resulting hypertext is placed in a file, and this HTML file becomes the primary resource of the World Wide Web. Once the HTML file is accessible to the web server, it is referred to as a "web page." A collection of web pages forms a website. Hyperlinks are added to the hypertext of web pages. Hyperlinks help users of the World Wide Web easily navigate between resources (files), regardless of whether the resources are on a local computer or a remote server. Web hyperlinks are based on URL technology.</div>
<div><div class="node" id="tagsnode">Tags: <a href="#">One tag</a>, <a href="#">Two tags</a>, <a href="#">Three tags</a></div><a href="#" id="more" class="node">Read more</a></div>
<div class="node" id="post"></div>
</div>

This is how it looks 

Next, I'll integrate it into Drupal: the CSS remains the same, but here's the Node.tpl.php itself (I haven't gotten to the part where comments and all that are displayed yet)

Read more

And here’s how it appears on the site 

So, question number one! How do I get rid of the extra divs that are causing this margin?

Question number two! How can I change the word "tags" to "тэги", have them in a line, and separated by commas?

P.s.    In the responses, please explain what actions are being taken in the modified code so that I can understand similar issues in the future!

P.p.s. The registration captcha is cool; could you tell me where to find it?

P.p.p.s. How can I switch back to typing regular text after inserting code into the theme? I had to disable the visual editor and move the tags around.

P.p.p.p.s. Admins, please adjust the field "Hello, Login" to include a space after the comma!

Sincerely, Grebenyuk Artem