new row in css

Your only choice is to abandon all you know about tables. CSS layouts aren't constructed the same way table layouts are.

With CSS, you can generalize elements into two main categories: block elements and inline elements. Inline elements are elements like the normal text. They keep going from left to right, top to bottom. An image is an inline element as well.

Block elements are, as the name stands, blocks. However, you can move the blocks where you want. With block elements you can use different kinds of position rules. The default setting is static: it is placed "as normally" into the layout, to the first available space. Several divs go into separate lines if you give them no style. Relative positioning is the same as static, except that you can move the block from it's position. Relatively positioned element also becomes a host block for it's inner absolutely positioned elements. Absolutely positioned elements can be set "by pixel" to where you want.

The power of CSS comes from the possibility to manipulate these settings to any element you want. You can make an inline element to be a block element and vice versa. The CSS you can try playing with:

Code:

display : block; display : inline; position : static; /*this is the default setting */ position : relative; position : absolute;

You might also want to reset some settings to make things easier to customize:

Code:

/* rips borders, margins and paddings out of all elements */ * { border : 0; margin : 0; padding : 0; }

Then a reminder: the first thing you have to get right is your HTML. To use CSS and HTML properly, you must use the right tags for the right job. For example, don't use font-tag to make a header: use <h1>, <h2>... etc. for that. Place text in paragraphs (<p>). Only use divs to categorize data, for example:

Code:

<div id="content"> <h1>This is my page</h1> <p>Here you can find information about me.</p> <p>I'm a pretty cool guy.</p> </div> <div id="navigation"> <h2>Main navigation</h2> <ul> <li><a href="index.html">Index</a></li> <li><a href="hobbies.html">My hobbies</a></li> </ul> </div>

It doesn't matter if the things don't look good without CSS. The most important thing with a page without the style is that it is structurally and semantically readable: think that even a blind person using a text browser and screen reader must be able to read the content without a hassle. Every single thing that doesn't belong into the actual content is just extra garbage you probably don't want to have there. With CSS you can pretty much get the result you want. If you want to have a small heading, you can do that. If you want to move the navigation from bottom to the side, you can do that (you might want to wrap everything inside a main div that contains everything else, though...).

Then the last thing to get into the right track: test primarily with Firefox and Opera, maybe with some other non-IE browsers if possible. When you get something that works with them, start fixing what goes wrong with IE. You can do separate IE-fixes with CSS: just make a CSS file for IE and include it to the HTML file using conditional comments:

Code:



This really saves a lot of pain the more you learn about CSS. IE has so many rendering bugs related to basic CSS and webstandards that it takes years to learn enough about them. Thus it is easier to make things work with other browsers and then patch IE. Conditional comments are standards compatible as other browsers read them as normal comments.

Last guideline: it doesn't matter if things don't look 100% the same with every browser as long as things are readable :)

Useful links:
W3C: CSS Property Index
W3C: Index of HTML 4 elements (also shows the list of deprecated tags that you shouldn't use)