CODEWITHSUNDEEP
css
John Doe
John Doe

Reputation: 2060

form displaying elements wrong

I am trying to create a form with the form part to the left with a background-color of gray. I want this to float to the left and have a red box where the errors will be show up directly to the right. But if you look at how it is displayed in my link http://www.yourfantasyfootballreality.com/createleaguevalidation.php you will see that the box just displays below the form and that the form doesn't have a gray background color. Can someone please help me make the form background part gray and have the red box displayed to the right...

 <html><head><title>Create a League</title></head>

<body>

<center><h1>Create a League</h1></center>



<div class="form width:400px; height:200px; background-color:gray;">
<form action="createleaguevalidation.php" method="POST">
League Name:       <input style="margin-left:0px;" type="text" name="leaguename" value="<?=$leaguename?>" /><br />
Number of Members: <input type="text" name="members" value="<?=$members?>"/><br>
League Password:   <input type="password" name="leaguepassword" value="<?=$leaguepassword?>"><br>
<input type="submit" value="Register" name="action">
</form>
</div>

<div style="background-color:red; height:200px; width:200px; float:left;">
</div>

</body>
</html>

Upvotes: 0

Views: 110

Answers (1)

random_user_name
random_user_name

Reputation: 26160

Your problem lies in this line from your site: 

<div class="form width:400px; height:200px; background-color:gray;">

It should probably read something more like so to be valid:

<div class="form" style="width:400px; height:200px; background-color:gray;">

Although I would recommend NOT styling it with inline styles, but rather have an external stylesheet. In that way, you could simplify the html like so:

<div class="form">

And you would have the css like so:

div.form {
     width:400px; 
     height:200px; 
     background-color:gray;
 }

Also, if you want the red box to appear to the right, given your current styling, you'd want to add a float: left; to your div.form element, like so:

div.form {
     width:400px; 
     height:200px; 
     background-color:gray;
    float: left;
 }

Upvotes: 4

Related Questions