CODEWITHSUNDEEP
htmlcss
Fluxcapacitor
Fluxcapacitor

Reputation: 393

Why does <p> element jump out of div and appear in next line below?

element is "jumping" out of its div and appearing one line below, outside the div. The element is floated right. There are two div elements, one holding a logo and business address, the next one down holding a drop-down menu and welcome statement. The drop-down menu is floated left. I did not include the html for the menu. This was not happening until today, but I do not know what I changed to cause this. I have not changed anything with the menu. Thanks for help. Happy New Year!

 <div id="head_1">
    <img src="images/Logos/Acts4_Logo.png"/>
   <p> P.O. Box 4524 </br>
       Waterville </br>
       </br>
       (444) 444 - 4444 </br>
        www.Acts.org 
   <p>
 </div>

 <!-- menu and statement -->
 <div id="head_2">
   <p>Keeping Families Warm in Winter</p>

 #contain {  /* wrapper for all content*/
    margin-right: 17%;
    margin-left: 10%;
    background-color: white;
    padding: 0px 10px 1px 10px;
 }

#content {  /* all text and photos */
   margin-top: 20px;
   background-color: white;
}

#head_1 p {     /* Acts address */
  float: right;
  text-align: right;
  font-size: 11pt;
}


#head_2 p {  /* keep fams warm */
  float: right;
  font-family: "cursive standard";
  font-size: 26pt;
}

Upvotes: 0

Views: 208

Answers (1)

jmore009
jmore009

Reputation: 12923

I'm not entirely sure what the issue is but you do have some issues with your html:

  1. <div id="head_2"> is not closed, but I'm going to guess that was just left out in your example and not in your actual code.

  2. You have an open <p> instead of a close

  3. the <br/> tags are closed wrong (you have </br>:

    <div id="head_1">
  <img src="images/Logos/Acts4_Logo.png"/>
  <p> P.O. Box 4524 </br> <---------------------#3 all of these should be <br/>
  Waterville </br>
  </br>
  (444) 444 - 4444 </br>
  www.Acts.org 
  <p> <--------------#2 should be </p>
</div>

<!-- menu and statement -->
<div id="head_2">
  <p>Keeping Families Warm in Winter</p>
</div> <----- #1 Missing

Also you need to clear floats which you may or may not be doing. It appears that #contain is your wrapper so you can add overflow: hidden to that if it is in fact a parent to #head_1 and #head_2

FIDDLE

Upvotes: 1

Related Questions