How to make text stay in box or some area? HTML CSS

Question

I have problem with my website. I'm trying to make two "boxes" next to each other with text in them. But, text from the left one is overlaying the text in right box. Here's screenshot of website, so you know how it looks. Screenshot of website My code is here. I've written that in html and css. But i think that matters only classes "pozadie", "box-1", "box-2", "textvboxe". Please help me.

I tried to explain it properly.

  body { background: #DF7401; background-size: cover; font-family: Arial; color: white; } .pozadie { position: absolute; width: 70%; background: url(pozadie2.png) repeat; height: 120%; box-shadow: 0 0 6px 2px #000000; margin-left: 16%; margin-top: 7%; z-index: -50; } .box-1 { width: 45%; height: 40%; background: #DF7401; box-shadow: 0 0 6px 2px #DF7401; margin-left: 2%; float: left; margin-top: 6%; } .box-2 { width: 45%; height: 40%; background: #DF7401; box-shadow: 0 0 6px 2px #DF7401; margin-right: 2%; float: right; margin-top: 6%; } p { margin-left: 3%; font-family: Helvetica; font-size: 15px; color: #FFFFFF; margin-right: 3%; position: absolute; } .textvboxe { margin-left: 0%; font-family: Helvetica; font-size: 15px; color: #008000; margin-right: 3%; margin-top: 23%; } h2 { text-align: center; font-family: Helvetica; font-size: 25px; color: #FFFFFF; margin-top: 9%; } 

 <div class="pozadie"> <div class="box-1"> <div class="obrazokvboxe"><img src="chudnutie.png"></div> <h2>Chudnutie</h2> <div class="textvboxe"> <p> Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela. Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela. </p> </div> </div> <div class="box-2"> <div class="obrazokvboxe"><img src="zdravie.png"></div> <h2>Zdravá výživa</h2> <div class="textvboxe"> <p> Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela. </p> </div> </div> </div> 

Answer 1

You need to remove position:absolute from p tag class. It should be

p {
         margin-left: 3%;
         font-family: Helvetica;
         font-size: 15px;
         color: #FFFFFF;
         margin-right: 3%;
          position: relative;
      }

You also need to make height of your div bigger.

Answer 2

Remove position: absolute in <p> tag.

  body { background: #DF7401; background-size: cover; font-family: Arial; color: white; } .pozadie { position: absolute; width: 70%; background: url(pozadie2.png) repeat; height: 120%; box-shadow: 0 0 6px 2px #000000; margin-left: 16%; margin-top: 7%; z-index: -50; } .box-1 { width: 45%; height: 40%; background: #DF7401; box-shadow: 0 0 6px 2px #DF7401; margin-left: 2%; float: left; margin-top: 6%; } .box-2 { width: 45%; height: 40%; background: #DF7401; box-shadow: 0 0 6px 2px #DF7401; margin-right: 2%; float: right; margin-top: 6%; } p { margin-left: 3%; font-family: Helvetica; font-size: 15px; color: #FFFFFF; margin-right: 3%; } .textvboxe { margin-left: 0%; font-family: Helvetica; font-size: 15px; color: #008000; margin-right: 3%; margin-top: 23%; } h2 { text-align: center; font-family: Helvetica; font-size: 25px; color: #FFFFFF; margin-top: 9%; } 

  <div class="pozadie"> <div class="box-1"> <div class="obrazokvboxe"><img src="chudnutie.png"></div> <h2>Chudnutie</h2> <div class="textvboxe"> <p> Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela. Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela. </p> </div> </div> <div class="box-2"> <div class="obrazokvboxe"><img src="zdravie.png"></div> <h2>Zdravá výživa</h2> <div class="textvboxe"> <p> Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela. </p> </div> </div> 

Answer 3

 Remove position: absolute in <p> tag.
.pozadie class, height: auto;

  body { background: #DF7401; background-size: cover; font-family: Arial; color: white; } .pozadie { background: rgba(0, 0, 0, 0) url("pozadie2.png") repeat scroll 0 0; box-shadow: 0 0 6px 2px #000000; height: auto; margin-left: 16%; margin-top: 7%; position: absolute; width: 70%; z-index: -50; } .box-1 { width: 45%; height: 40%; background: #DF7401; box-shadow: 0 0 6px 2px #DF7401; margin-left: 2%; float: left; margin-top: 6%; } .box-2 { width: 45%; height: 40%; background: #DF7401; box-shadow: 0 0 6px 2px #DF7401; margin-right: 2%; float: right; margin-top: 6%; } p { margin-left: 3%; font-family: Helvetica; font-size: 15px; color: #FFFFFF; margin-right: 3%; } .textvboxe { margin-left: 0%; font-family: Helvetica; font-size: 15px; color: #008000; margin-right: 3%; margin-top: 23%; } h2 { text-align: center; font-family: Helvetica; font-size: 25px; color: #FFFFFF; margin-top: 9%; } 

 <div class="pozadie"> <div class="box-1"> <div class="obrazokvboxe"><img src="chudnutie.png"></div> <h2>Chudnutie</h2> <div class="textvboxe"> <p> Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela. Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela. </p> </div> </div> <div class="box-2"> <div class="obrazokvboxe"><img src="zdravie.png"></div> <h2>Zdravá výživa</h2> <div class="textvboxe"> <p> Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela. </p> </div> </div> </div>