Majid NK Majid NK - 3 years ago 205
HTML Question

HTML/CSS: Unwanted gap when box of text is embedded within other box of text

I am wondering why the 4th line of text in green box is not starting from left like 5th line? why there is that gap? How can I make the 4th line also start as left as 5th line?

enter image description here

The code for above page I have written is as below:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>

<style type="text/css">

div
{ text-align: justify; text-justify: inter-word; }

.t1 { font-size: 30px; margin:0px; padding:10px; background:green;}
.t2 { font-size: 10px; margin:20px; padding:10px; background:red;
width: 200px; float:left;}

</style>

</head>

<body>
<div>
<p class="t2"> This is red box. This is red box. This is red box. This is red box. This is red box. This is red box. This is red box.
This is red box. This is red box. This is red box. This is red box. </p>

<p class="t1"> This is green box. This is green box. This is green box. This is green box. This is green box. This is green box. This
is green box. This is green box. This is green box. This is green box. This is green box. This is green box. This is
green box. This is green box. This is green box. This is green box. This is green box. This is green box. This is green
box. This is green box. This is green box. This is green box. This is green box. This is green box. This is green box.
This is green box. This is green box. This is green box. This is green box. This is green box. This is green box. This
is green box. This is green box. This is green box. This is green box. This is green box. This is green box. This is
green box. This is green box. This is green box. This is green box. This is green box. This is green box. This is green
box. This is green box. This is green box. This is green box. This is green box. This is green box. This is green box.
This is green box. This is green box. This is green box. This is green box. This is green box. This is green box.
</p>
</div>

</body>
</html>


Thank you

Answer Source

This works well:

.t2 { font-size: 10px; margin:20px 20px 0px 20px; padding:10px 10px 0px 10px; background:red; 
      width: 200px; float:left;}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download