0

Hi Guys
I am trying to create a two columns text using two divs beside each other or in two columns of a table but setting them vertically to appear on the TOP.The problem is when ever I want to use any CSS/HTML elements the browsers do not care to the style any more!

As you can see I did not use any text element like <p> or <h> at following html and the text takes style format and stands at the top but when I try to start the text with any of <p> or <h> the text appears at the middle!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table
{
border-collapse:collapse;
}
table.welcome
{
text-align:left;
}
td.welcome{
width: 425px;
text-align:justify;
vertical-align:top;
}
td.space{
width: 60px;

}

</style>
</head>

<body>
<table class ="welcome">
<tr>
<th>Welcome</th>

</tr>
<tr>
<td class ="welcome">Ensure you are not spamming, plugging or linking to your product, service or website anywhere within your post.</td>
<td class="space"></td>
<td class ="welcome">Ensure you are not spamming, plugging or linking to your product, service or website anywhere within your post.</td>
</tr>
</table>

</body>
</html>

Can you please let me know what I am doing wrong here?

Thanks

3
Contributors
5
Replies
6
Views
6 Years
Discussion Span
Last Post by Behseini
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

h3 { display: inline;}  /* removes space before and after the heading elements */

.column {
	width: 278px;
	float: left;  /* places divisions on the same line */
}

.space { margin-left: 66px;}

</style>
</head>

<body>
<div>

<h3>Welcome</h3><br>
<div class="column">Ensure you are not spamming, plugging or linking to your product, service or website anywhere within your post.</div>
<div class="column space">Ensure you are not spamming, plugging or linking to your product, service or website anywhere within your post.</div>

</div>
</body>
</html>

Paragraphs and heading elements insert a new line both before, and after, the element. To remove this, use the display property the way I did above.

Regards
Arkinder

0

Hi Arkinder,
Thanks for your time and complete comment.This is exactly what I was looking for.The only problem which I have now is adding a separate line(<hr />) to end of the div.

<div>
<h3>Welcome</h3><br>
<div class="column">Ensure you are not spamming, plugging or linking to your product, service or website anywhere within your post.</div>
<div class="column space">Ensure you are not spamming, plugging or linking to your product, service or website anywhere within your post.</div>
</div>
<br />
<hr />

when I add the <hr /> after the div (even after the <br>) the line has been added to the rest of second div!
Can you please let me know why this is happening?

Once again thanks for your time

0

No problem, and Ips is correct. Although clear: left; would be a little more practical since there aren't any elements being floated to the right.

Regards
Arkinder

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.