Member Avatar for Behseini

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
  • 136 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Behseini

Recommended Answers

All 5 Replies

Member Avatar for Arkinder 
<!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

Member Avatar for Behseini

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

Member Avatar for lps

<hr style="clear:both"/>
that should do it

Member Avatar for Arkinder

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

Member Avatar for Behseini

Thanks IPS and Arkinder,

Edited by Behseini because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.