Can't get Image to float to the top. Need it next to the form in the page

user_13402015 0
Viewed 44

I have the image formated how I want, I just can't get it to float to the top so it looks nice next to the form I made. I have tried making a div and having that float up to no avail. Help?

header {
  background-color: #030303;
  color: #ffffff;
  height: 60px;
  text-align: left;
  padding-top: 30px;
  padding-left: 3em;
  background-image: url("assets/dndlogo.jpg");
  background-repeat: no-repeat;
  background-position: right;
}

#dndlogo {
  float: right;
  height: 50px;
}

header h1 {
  font-family: Georgia, "Times New Roman", Serif;
  margin-top: 0px;
  font-size: 3em;
  letter-spacing: 0.25em;
}

#schedulebox {
  float: left;
  height: 750px;
  width: 15%;
  float: left;
  background-color: #bd0202;
  text-align: center;
}

#homecontent {
  height: 750px;
  width: 84.3%;
  float: left;
  background-color: #030303;
  color: white;
}

nav {
  overflow: hidden;
  background-color: #030303;
  font-family: Arial;
  float: top;
  margin: 0;
  padding: 0;
  border-radius: 10px;
}

nav li {
  float: left;
  font-size: 20px;
  color: black;
  text-align: center;
  padding: 15px 20px;
  text-decoration: none;
  list-style-type: none;
  color: white;
  height: 15px;
}


/*nav li:hover{
    background-color: white;
    border-radius: 15px;
    transition: 0.5s;
    color: black;
}*/

nav ul {
  margin: 0;
  padding-bottom: 10px;
  padding-left: 0;
}

footer {
  background-color: #030303;
  float: bottom;
  color: white;
}

#schedulebox h1 {
  border-bottom: solid;
  padding-top: 0;
  margin: 0;
}

html {
  background-color: #030303;
}

button {
  background-color: #030303;
  border: none;
  color: white;
  font-size: 20px;
  height: 27px;
}

button:hover {
  background-color: white;
  color: #030303;
  border-radius: 5px;
  transition: 0.5s;
}

main {
  border: white solid;
  border-radius: 10px;
  order-radius: 10px;
}

#wrapper {
  padding: 20px;
}

#schedulebox {
  border-right: white solid;
}

#dragonpic {
  width: 1556.5px;
  height: auto;
}

#homecontent2 {
  border: solid white;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#homecontent h2,
#homecontent h3 {
  padding-left: 10px;
}

#resourcescontent {
  color: white;
  padding-left: 10px;
}

a img:visited {
  border: black;
}

a img:hover {
  border: white solid;
  border-width: thin;
  transition: 0.3s;
}

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  border: none;
  color: white;
  text-decoration: none;
  height: 20px;
  padding: 5px;
  font-size: 20px;
}

a.button:hover {
  background-color: white;
  color: #030303;
  transition: 0.3s;
  border-radius: 5px;
}

#beyondlogo {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  display: block;
  border-radius: 10px;
}

#resourcescontent p,
#resourcescontent h2 {
  text-align: center;
}

form {
  color: white;
}

label {
  float: left;
  display: block;
  text-align: right;
  width: 120px;
  padding-right: 1em;
}

input,
textarea {
  display: block;
  margin-bottom: 20px;
}

#joiningcontent h2 {
  color: white;
  padding-left: 20px;
  width: 20%;
  text-align: center;
}

#joiningpic {
  margin-left: auto;
  margin-bottom: auto;
  width: 50%;
  display: block;
  border-radius: 10px;
}

#joiningcontent {}
<div id="wrapper">
  <header>
    <h1>Dungeons and Dragons: WCTC</h1>
  </header>
  <main class="clearfix">
    <nav>
      <ul>
        <li><a href="index.html" class="button">Home</a></li>
        <li><a href="resources.html" class="button">Resources</a></li>
        <li><a href="joining.html" class="button">Join Us!</a></li>
      </ul>
    </nav>
    <div id="joiningcontent">
      <h2>If you wish to join, provide us with some information so we can contact you!</h2>
      <form>
        <label for="FirstName">First Name:</label>
        <input type="text" id="FirstName" name="FName" required>
        <label for="LastName">Last Name:</label>
        <input type="text" id="LastName" name="LName" required>
        <label for="emailboi">Email:</label>
        <input type="email" id="emailboi" name="Email" required>
        <label for="GuestOrMember">Are you signing up as a Guest?</label>
        <input id="GuestOrMember" type="checkbox">
        <button type="submit" value="submit">Submit</button>
      </form>
      <img src="assets/signuppic.png" id="joiningpic">
    </div>
  </main>
</div>

I'm still a little lost on what to do and I'm fairly new to web development so I appologize for any ameteur mistakes made.

css html
2 Answers

For correct working float, the floated element should be the first. Just move img as a first element in parent, like this:

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
</head>
<body>
<div id="wrapper">
    <header>
        <h1>Dungeons and Dragons: WCTC</h1>
    </header>
    <main class="clearfix">
        <nav><ul><li><a href="index.html" class="button">Home</a></li>  <li><a href="resources.html" class="button">Resources</a></li>  <li><a href="joining.html" class="button">Join Us!</a></li></ul></nav>
        <div id="joiningcontent">
          <img src="assets/signuppic.png" id="joiningpic">
          <h2>If you wish to join, provide us with some information so we can contact you!</h2>
          <form>
            <label for="FirstName">First Name:</label>
            <input type="text" id="FirstName" name="FName" required>
            <label for="LastName">Last Name:</label>
            <input type="text" id="LastName" name="LName" required>
            <label for="emailboi">Email:</label>
            <input type="email" id="emailboi" name="Email" required>
            <label for="GuestOrMember">Are you signing up as a Guest?</label>
            <input id="GuestOrMember" type="checkbox">
            <button type="submit" value="submit">Submit</button>
        </form>

        </div>
    </main>
</div>

</body>
</html>

UPDATED2

header{
        background-color: #030303;
        color:#ffffff;
        height: 60px;
        text-align: left;
        padding-top: 30px;
        padding-left: 3em;
        background-image: url("assets/dndlogo.jpg");
        background-repeat: no-repeat;
        background-position: right;
    }
    
    #dndlogo{
        float: right;
        height: 50px;
    }
    
    header h1{
        font-family: Georgia, "Times New Roman", Serif;
        margin-top: 0px;
        font-size: 3em;
        letter-spacing: 0.25em;
    }
    
    #schedulebox{
        float: left;
        height: 750px;
        width: 15%;
        float: left;
        background-color: #bd0202;
        text-align: center;
    }
    
    #homecontent{
        height: 750px;
        width: 84.3%;
        float: left;
        background-color: #030303;
        color: white;
    }
    
    nav {
        overflow: hidden;
        background-color: #030303;
        font-family: Arial;
        float: top;
        margin: 0;
        padding: 0;
        border-radius: 10px;
    }
    
    nav li{
        float: left;
        font-size: 20px;
        color: black;
        text-align: center;
        padding: 15px 20px;
        text-decoration: none;
        list-style-type: none;
        color: white;
        height: 15px;
    }
    
    /*nav li:hover{
        background-color: white;
        border-radius: 15px;
        transition: 0.5s;
        color: black;
    }*/
    
    nav ul{
        margin: 0;
        padding-bottom: 10px;
        padding-left: 0;
    }
    
    footer{
        background-color: #030303;
        float: bottom;
        color: white;
    
    }
    
    #schedulebox h1{
        border-bottom: solid;
        padding-top: 0;
        margin: 0;
    }
    
    html{
        background-color: #030303;
    }
    
    button{
        background-color: #030303;
        border: none;
        color: white;
        font-size: 20px;
        height: 27px;
    }
    
    button:hover{
        background-color: white;
        color: #030303;
        border-radius: 5px;
        transition: 0.5s;
    }
    
    main{
        border: white solid;
        border-radius: 10px;
        order-radius: 10px;
    }
    
    #wrapper{
        padding: 20px;
    }
    
    #schedulebox{
        border-right: white solid;
    }
    
    #dragonpic{
        width: 1556.5px;
        height: auto;
    }
    
    #homecontent2{
        border: solid white;
    }
    
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }
    
    #homecontent h2, #homecontent h3{
        padding-left: 10px;
    }
    
    #resourcescontent{
        color: white;
        padding-left: 10px;
    }
    
    a img:visited{
        border: black;
    }
    
    a img:hover{
        border: white solid;
        border-width: thin;
        transition: 0.3s;
    }
    
    a.button {
        -webkit-appearance: button;
        -moz-appearance: button;
        border: none;
        color: white;
        text-decoration: none;
        height: 20px;
        padding: 5px;
        font-size: 20px;
    }
    
    a.button:hover{
        background-color: white;
        color: #030303;
        transition: 0.3s;
        border-radius: 5px;
    }
    
    #beyondlogo{
       margin-left: auto;
        margin-right: auto;
        width: 50%;
        display: block;
        border-radius: 10px;
    }
    
    #resourcescontent p, #resourcescontent h2{
        text-align: center;
    }
    
    form{
        color: white;
        display: inline-block;
        vertical-align: top;
        max-width: 40%;
        box-sizing: border-box;
    }
    
    label{
        float: left;
        display: block;
        text-align: right;
        width: 120px;
        padding-right: 1em;
    }
    
    input, textarea{
        display: block;
        margin-bottom: 20px;
    
    }
    
    #joiningcontent h2{
        color: white;
        padding-left: 20px;
        width: 20%;
        text-align: center;
    }
    
    #joiningpic{
        margin-left: auto;
        margin-bottom: auto;
        width: 50%;
        border-radius: 10px;
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
    }
    
    #joiningcontent{
    
    }
<div id="wrapper">
    <header>
        <h1>Dungeons and Dragons: WCTC</h1>
    </header>
    <main class="clearfix">
        <nav><ul><li><a href="index.html" class="button">Home</a></li>  <li><a href="resources.html" class="button">Resources</a></li>  <li><a href="joining.html" class="button">Join Us!</a></li></ul></nav>
        <div id="joiningcontent">
          
        <h2>If you wish to join, provide us with some information so we can contact you!</h2>
        
        <form>
            <label for="FirstName">First Name:</label>
            <input type="text" id="FirstName" name="FName" required>
            <label for="LastName">Last Name:</label>
            <input type="text" id="LastName" name="LName" required>
            <label for="emailboi">Email:</label>
            <input type="email" id="emailboi" name="Email" required>
            <label for="GuestOrMember">Are you signing up as a Guest?</label>
            <input id="GuestOrMember" type="checkbox">
            <button type="submit" value="submit">Submit</button>
        </form>
        
        <img src="assets/signuppic.png" id="joiningpic">
            
        </div>
    </main>
</div>

user_31871270

For both the img and the form you need to:

float: left;
display: inline;

This is due to the form being a block level element so you need to float both left and set them to be inline, rather than block. If you put img before form then it will be on the left of the form, put it after the form and it will be on the right of the form.

Be aware that if the image and form do not fit within the width of the browser window then they will wrap and one will be below the other, whichever way round you have them.

https://jsfiddle.net/bryanwadd/o1da8buw/

user_93378290
Related