How to move text to a new line below floated elements

Question

I want to use two buttons next to each other on all wide of screen on my page. But I can figure out how to move "text" to the next line.

input.tlacidlo {
width: 38%;
display: inline;
float: left;
margin: 10px 5px 20px 20px;
cursor: pointer;
font-weight: bold;
background: #3366cc;
color: #fff;
border: 1px solid #3366cc;
border-radius: 5px;
-moz-box-shadow: 6px 6px 5px #999;
-webkit-box-shadow: 6px 6px 5px #999;
box-shadow: 6px 6px 5px #999;
}
input.tlacidlo:hover {       
color: #fff;         
background: #1dc801;         
border: 1px solid #fff;
}

<form><input class="tlacidlo" type="button" value="získajte zľavu 10%" /></form>
<form><input class="tlacidlo" type="button" value="získajte 3,6% zľavu z ceny nákupu + 5€" /></form>
Text

You can see it on my website: https://www.akosizarobitpeniaze.sk/booking-zlava-promo-kod-voucher/

Possible duplicate of [What is the best way to clear the CSS style "float"?](https://stackoverflow.com/questions/490184/what-is-the-best-way-to-clear-the-css-style-float) — TylerH, Dec 12 '17 at 17:29

score 0 · Answer 1 · answered Dec 12 '17 at 17:29

Like following

input.tlacidlo {
width: 38%;
display: inline;
float: left;
margin: 10px 5px 20px 20px;
cursor: pointer;
font-weight: bold;
background: #3366cc;
color: #fff;
border: 1px solid #3366cc;
border-radius: 5px;
-moz-box-shadow: 6px 6px 5px #999;
-webkit-box-shadow: 6px 6px 5px #999;
box-shadow: 6px 6px 5px #999;
}
input.tlacidlo:hover {       
color: #fff;         
background: #1dc801;         
border: 1px solid #fff;
}

<form><input class="tlacidlo" type="button" value="získajte zľavu 10%" /></form>
<form><input class="tlacidlo" type="button" value="získajte 3,6% zľavu z ceny nákupu + 5€" /></form>
<div style="clear:both;">Text</div>

score 0 · Answer 2 · answered Dec 12 '17 at 17:31

Put the text in ANY type of container and add (via a class) clear: both to that:

input.tlacidlo {
  width: 38%;
  display: inline;
  float: left;
  margin: 10px 5px 20px 20px;
  cursor: pointer;
  font-weight: bold;
  background: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
  border-radius: 5px;
  -moz-box-shadow: 6px 6px 5px #999;
  -webkit-box-shadow: 6px 6px 5px #999;
  box-shadow: 6px 6px 5px #999;
}

input.tlacidlo:hover {
  color: #fff;
  background: #1dc801;
  border: 1px solid #fff;
}

.newclass {
  clear: both;
}

<form><input class="tlacidlo" type="button" value="získajte zľavu 10%" /></form>
<form><input class="tlacidlo" type="button" value="získajte 3,6% zľavu z ceny nákupu + 5€" /></form>
<p class='newclass'>Text</p>

score 0 · Answer 3 · answered Dec 12 '17 at 17:35

How to do it without changing the markup:

Add

form + form:after {
  content:'';
  display:block;
  clear:left;
}

input.tlacidlo {
width: 38%;
display: inline;
float: left;
margin: 10px 5px 20px 20px;
cursor: pointer;
font-weight: bold;
background: #3366cc;
color: #fff;
border: 1px solid #3366cc;
border-radius: 5px;
-moz-box-shadow: 6px 6px 5px #999;
-webkit-box-shadow: 6px 6px 5px #999;
box-shadow: 6px 6px 5px #999;
}
input.tlacidlo:hover {       
color: #fff;         
background: #1dc801;         
border: 1px solid #fff;
} 

form + form:after {
  content:'';
  display:block;
  clear:left;
}

<form><input class="tlacidlo" type="button" value="získajte zľavu 10%" /></form>
<form><input class="tlacidlo" type="button" value="získajte 3,6% zľavu z ceny nákupu + 5€" /></form>
Text

Thank you, I like this solution, however it doesnt show up on AMP pages, is there any solution? — Andrej Laciak, Dec 12 '17 at 17:59
No, sorry, I don't know AMP. Everything I've ever read about it suggests that I should give it a wide berth, and your comment just reinforces that. — Alohci, Dec 12 '17 at 18:33

How to move text to a new line below floated elements

3 Answers3