Some Weird Thing With Clear Both Via Css Pseudo :after

Examine this code: HTML

Sometext over here

CSS .one { display: block; float: left; widt

Solution 1:

Try this, add display: block to input:

CSS

.one {
  display: block;
  width: 450px;
  height: 60px;
  padding-top: 25px;
  color: #ffffff;
  font-size: 34px;
  font-weight: 800;
  text-align: left;
}

.two {
  font-size: 150%;
  width: 200px;
  height: 20px;
  display: block;
  margin:0 auto;
}

HTML

<h1class="one">Sometext over here</h1><inputtype="text"placeholder="E-mail"class="two">

DEMO HERE

Solution 2:

The :after clear float trick works on floated element inside the pseudo elements parent.

If you would put the <div style="clear:both"></div> inside the h1 it will not clear the float either, so it has to be a sibling or a parent element of the floated element

So in your case just clear the float on the input

.one {
  float: left;
  width: 450px;
  height: 60px;
  padding-top: 25px;
  color: #ccc;
  font-size:34px;
  font-weight: 800;
}
.two {
  display: block;
  margin: 0 auto;
  font-size: 150%;
  width: 200px;
  height: 20px;
  clear: both;
}

<h1class="one">Sometext over here</h1><inputtype="text"placeholder="E-mail"class="two">

Solution 3:

It would be good if you provide clearfix to parent element try this snippet hope this could help you. I'm also including :before but this is the best way to clear the floats. here is the jsfiddle link https://jsfiddle.net/rhulkashyap/jjv6t6gd/

.one {
  display: block;
  float: left;
  width: 450px;
  height: 60px;
  padding-top: 25px;
  color: #111;
  font-size: 34px;
  font-weight: 800;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.two {
  margin: 0 auto;
  font-size: 150%;
  width: 200px;
  height: 20px;
}

<divclass="clearfix"><h1class="one">Sometext over here</h1></div><inputtype="text"placeholder="E-mail"class="two">