0
<ul class="cls">
    <li><a href="#flw">Flowering tree</a></li>
    <li><a href="#frt">Fruits bearing</a></li>
    <li><a href="#rst">Roadside tree</a></li>
    <li><a href="#med">Medicinal</a></li>
</ul>
<p>paragraph</p>

This is my code to add navigation button to the document. The contents of css document for "cls" class are:

p{
    text-align:justify;
    position:relative;
}

.img{
    float:right;
    padding:0 0 20px 30px;
}

ul.cls{
    list-style-type:none;
}

ul.cls li{
    float:left;
}

ul.cls li a{
    display:block;
    padding:16px;
    background-color:#1F618D;
    color:#B2BABB;
    text-decoration:none;
}


p {
  text-align: justify;
  position: relative;
}

.img {
  float: right;
  padding: 0 0 20px 30px;
}

ul.cls {
  list-style-type: none;
}

ul.cls li {
  float: left;
}

ul.cls li a {
  display: block;
  padding: 16px;
  background-color: #1F618D;
  color: #B2BABB;
  text-decoration: none;
}
<ul class="cls">
  <li><a href="#flw">Flowering tree</a></li>
  <li><a href="#frt">Fruits bearing</a></li>
  <li><a href="#rst">Roadside tree</a></li>
  <li><a href="#med">Medicinal</a></li>
</ul>
<p>paragraph</p>

Why does “p” element after “ul” not start in a new line? The contents of the paragraph continue in the same line as navigation.

Daedalus
  • 7,586
  • 5
  • 36
  • 61
Charan K
  • 33
  • 5
  • Remember when asking: It's always good to create a [Minimal, Complete, Verifiable example](https://stackoverflow.com/help/mcve). If your question is missing those details, it either won't be answerable in that form, or it will get you wrong answers that don't address the core problem of your code. Never include this information in comments; always [edit] the question to include relevant information; comments can, and will be deleted for any reason; they are ephemeral, and only meant for clarification. – Daedalus Jul 20 '18 at 05:13
  • @CharanK I've done what I [suggested](https://stackoverflow.com/questions/51435143/why-does-p-emement-after-ul-not-start-in-a-new-line-the-contents-of-paragra#comment89840916_51435143) for you; I've also included [your past edit](https://stackoverflow.com/revisions/51435143/3) that added an html element and mistakenly removed the css code, and I've used the snippet feature for better demonstration purposes. Please remember my advice above in the future. – Daedalus Jul 20 '18 at 05:24

2 Answers2

1

I did an example for you: 

p {
  text-align: justify;
  position: relative;
  background: red;
}

ul.cls {
  list-style-type: none;
  display: flex; /*Make it a flex container*/
  flex-direction: row; /*all flex items on row*/
}

ul.cls li {
  /*removed float:left;*/
}

ul.cls li a {
  padding: 16px;
  background-color: #1F618D;
  color: #B2BABB;
  text-decoration: none;
}
<ul class="cls">
  <li><a href="#flw">Flowering tree</a></li>
  <li><a href="#frt">Fruits bearing</a></li>
  <li><a href="#rst">Roadside tree</a></li>
  <li><a href="#med">Medicinal</a></li>
</ul>
<p>paragraph</p>

float often destroys the natural flow of the elements. I suggest you get yourself into some flexbox here. That's a good alternative and pretty easy to understand and use too.

Greets.

EDIT: Oh and here's a little CodePen to play with. :)

0

The problem you are specifically facing, is that when you float elements, they are removed from the document flow, though they are still considered part of the document as compared to absolute positioning.

I won't get into exactly why this happens, but one way to fix this is by using a clearfix type css class; this class adds in an invisible element using the :after(browser compatability) pseudo-selector after the element to which the class is supplied.

Clear-fixes are explained in greater detail in this answer, where the below class was borrowed from.

p {
  text-align: justify;
  position: relative;
}

.img {
  float: right;
  padding: 0 0 20px 30px;
}

ul.cls {
  list-style-type: none;
}

ul.cls li {
  float: left;
}

ul.cls li a {
  display: block;
  padding: 16px;
  background-color: #1F618D;
  color: #B2BABB;
  text-decoration: none;
}

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
<ul class="cls clearfix">
  <li><a href="#flw">Flowering tree</a></li>
  <li><a href="#frt">Fruits bearing</a></li>
  <li><a href="#rst">Roadside tree</a></li>
  <li><a href="#med">Medicinal</a></li>
</ul>
<p>paragraph</p>

Of course, you can always use Flex Box, as noted in the D.Schaller's answer to this question, however, remember that flexbox isn't always supported in older browsers, so if you use Flexbox, make sure to also account for which browser versions you are officially supporting.

Daedalus
  • 7,586
  • 5
  • 36
  • 61