CODEWITHSUNDEEP
csshtmlweb
user5207173
user5207173

Reputation: 3

Button interfering with table below it?

I have a problem with a webpage I'm currently working on:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Title</title>
</head>
<body>
  <form action="/cgi-bin/play.cgi" method="GET">
    <input type="submit" title="Play" class="play-button" value="">
  </form>
  <span class="number">1252</span><br>
  <table>
...

CSS:

.play-button {  
  background: url(/images/play-button.png) no-repeat;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border: none;
  float: left;
}

.number {
  color: white;
  float: right;
}

The code above results in a button in the left and a number in the right side, both on the same line. Below is a centered table. My problem is that the table is pushed 32px to the right, like if the button and table was the same line.

I want the form to be completely centered, so how can I stop the button interfering with things below it?

Upvotes: 0

Views: 27

Answers (1)

Quentin
Quentin

Reputation: 943562

The elements before the table are floating.

The point of float is to let the content that follows it move up beside it.

clear the table if you don't want it to do that.

Upvotes: 1

Related Questions