I'm trying to share a <div> with a contact form and an <ul> both of which are inside their own <div>'s. HELP! THX!

Question

How do I get the my <ul> to float right and display horizontally?

<div>  
            <div>
                <h1 id="contact">Contact</h1>
            </div>

        <div class="contact-form">
    <fieldset>    
        <form action="demo_form.asp" class="form">
          <label for="first-name">First Name</label>
            <input type="text" name="FirstName" id="first-name" placeholder="John">
          <label for="last-name">Last Name</label>
            <input type="text" name="LastName" id="last-name" placeholder="Doe">
          <label for="email">Email</label>
            <input type="text"  name="Email" id="email" placeholder="john@doe.com">
          <label for="subject">Subject</label>
            <input type="text" id="subject" placeholder="Hello">
          <label for="question">Ask</label>
          <textarea id="question" name="UserQuestion" placeholder="Tell us something"></textarea>
          <button name="submit">Submit</button>
        </form>
  </fieldset>
</div>


            <div>
                <ul>
                    <li>Address:  Bedford Road</li>
                    <li>City: XXXXX</li>
                    <li>State: Florida</li>
                    <li>Hours: 9am - Whenever</li>
                    <li>Phone: xxx.xxx.xxxx</li>
                </ul>
            </div>

</div>

Answer 1 · 2015-11-10T21:08:55Z

November 10, 2015 9:08pm

Right on, Ryan! Kudos for putting forth the effort. If you have any more questions, don't hesitate to ask. In my experience, the Treehouse people are very nice and always glad to help.

Keep up the good work. :)

Answer 2 · 2015-11-09T22:34:05Z

November 9, 2015 10:34pm

I'm not sure what you want to float right and display horizontally. But to float something right all you need to do is add a

float: right;

to the selector of the element that you want placed to the right. IMPORTANT NOTE the float rule can affect other elements on the page. That is what the clear property is for. Learn more here.

To display something horizontally, try setting the display of the element to inline or inline-block. Learn more here.

Also, your HTML will be easier to read if you adhere to a more standard and hierarchical indenting. Here is a div nested inside a div which is nested inside another div.

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

Formatting like this makes it easier tell if there are errors like tags that haven't been properly closed or ones that have been accidentally closed twice.

Hope that helps. Good luck

Answer 3 · 2015-11-09T23:39:57Z

November 9, 2015 11:39pm

Echoing Robert Manolis, there's no way for us to know what you want to align horizontally.
Without seeing your CSS, it's difficult to know what you're doing.

Please tell us specifically what you want to do & provide both HTML & CSS so we can see what you're actually doing.

Answer 4 · 2015-11-19T19:33:54Z

November 19, 2015 7:33pm

Not sure if you guys are still interested but heres what I have thus far. Still very amateur-ish but hey its a start I guess.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="biopage.css"> 

        <title>Bio-Resume</title>
    </head>

<body>

    <div id="homeSection" class="sect sectionOne"></div>
    <ul class="nav">
        <li><a class="box" id="home" href="#homeSection">Home</a></li>
        <li><a id="about" href="#aboutSection">About</a></li>
        <li><a id="development" href="#developmentSection">Development</a></li>
        <li><a id="meet" href="#meetSection">Meet-Ups</a></li>
        <li><a id="education" href="#educationSection">Education</a></li>
        <li><a id="contact" href="#contactSection">Contact</a></li>
    </ul>


    <div>
        <header class="first">
            <img src="IMG_0659.jpg" class="img-profile">
                <h2 class="contactinfo">Ryan X. XXXXXXX</h2>
                    <h3 class="contactinfo">Programmer</h3>
                        <h4 class="contactinfo">Tampa, Fl.</h4>
        </header>
    </div>

    <div>
    <div id="aboutSection" class="subSction"></div>
        <h1 id="myBackground">About</h1>
            <p id="twoPara">

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"<br><br>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC<br><br>
            </p><br><br>
    </div>

 <div>
 <div id="developmentSection" class="sect sectionTwo"></div>
    <h1 id="Achievements">Personal Development</h1>
        <p class="logoPara">Click on logo for more information.</p><br><br>
     <div id="img_cont">
         <a href="https://teamtreehouse.com/ryanbilello" ><img src="treehouse250.png"></a><br><br>
         <a href="https://www.codeschool.com/account/prizes"><img src="codeschool250.jpg"></a><br><br>  
         <a href="https://www.codecademy.com/users/NoleCode/achievements"><img src="codeacademy250.png"></a><br><br>
     </div>
</div>

 <div>
 <div id="meetSection" class="subSection"></div>
    <h1 id="meetMeet">Meet-Ups</h1>      
        <div id="me">
            <a href="https://meetup.com" ><img src="OpenCode.jpeg"></a><br><br>
            <a href="https://meetup.com"><img src="FrontEnd.jpeg"></a><br><br>  
            <a href="https://meetup.com"><img src="JScript.jpeg"></a><br><br>
        </div>
    </div>

<div>
<div id="educationSection" class="sect sectionThree"></div>
    <h1 id="school">Education</h1>

        <p class="classOf"><strong><i>C/O 2007</strong></i></p>
    <div id="Garnet">
        <a href="https://fsu.edu/"><img src="SchoolSeal.png"></a><br><br>          
     </div>
</div>

<div>  
    <div>
    <div id="contactSection" class="subSection"></div>
        <h1 id="contactContact">Contact</h1>
</div>

    <div class="contact-form">
        <fieldset>    
            <form action="ajax/contact.php" class="form" class="ajax">
                <label for="first-name">First Name</label>
                    <input type="text" name="FirstName" id="first-name" placeholder="John">
                <label for="last-name">Last Name</label>
                    <input type="text" name="LastName" id="last-name" placeholder="Doe">
                <label for="email">Email</label>
                    <input type="text"  name="Email" id="email" placeholder="john@doe.com">
                <label for="subject">Subject</label>
                    <input type="text" id="subject" placeholder="Hello">
                <label for="question">Ask</label>

                <textarea id="question" name="UserQuestion" placeholder="Tell us something"></textarea>
                    <button name="submit">Submit</button>
            </form>
        </fieldset>
    </div>
</div>

    <div>
        <ul class="homeOffice">
            <li>Address:XXXXX Bedford Road</li>
            <li>City: Tampa </li>
            <li>State: Florida</li>
            <li>Hours: 9am - Whenever</li>
            <li>Phone: X13.XXX.92XX</li>
        </ul>
    </div>
<div> 

    <div>
        <hr id="stop">
        <ul class="socialBottom">
            <li><a href="http://www.facebook.com"><img src="1446847639_facebook_online_social_media.png"></a></li>
            <li><a href="http://www.twitter.com"><img src="1446847648_twitter_online_social_media.png"></a></li>
            <li><a href="http://www.linkedin.com"><img src="1446847658_linked_in_online_social_media.png"></a></li>  
            <li><a href="http://www.google.com"><img src="1446847674_google_plus_online_social_media.png"></a></li>
        </ul>
            <p class="copyright">&copy; 2015 RyanBilello.com<p>
    </div> 
</div> 

</footer>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="BioPage.js"></script>
</body>

</html>

/* BioPage CSS */

h4{
    padding-bottom: 50px
}

.first{
    border-bottom: solid thin;
    background-image: url(chicago.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    padding-top: 50px;
    margin-top: 100px;
    margin-bottom: 250px;
}

.img-profile{
    display: block;
    height: 20%;
    width: 20%;
    margin: auto;
    border-radius: 100px;
}

.contactinfo{
    text-align: center;
    line-height: 10px;
    color:whitesmoke;
    }

.logoPara{
    text-align: center;
    font-style: italic;
    font-size: 20px;
    }

.nav {

    text-align: center;
    margin-top: 75px;
    }

.nav li{
    display:inline;
    padding: 35px;

}

.nav li a{
    text-decoration: none;
    font-size: 30px;
    color:black;
    border: 2px solid #000; 
    padding: 7px;
}

.nav li a:hover{
    color: firebrick;
}

.socialBottom{
    text-align: center;
    clear: both; 
}

.socialBottom li {
    text-decoration: none;
    display: inline;
}

.socialBottom img{
    width:60px;
    text-align: center; 
    padding:10px 50px 0 50px;
     }

.homeOffice:nth-child(1){
    margin-top: 100px;
    padding-top: 5px;
}

.homeOffice li{
    font-size: 25px;
    margin-top: 35px;
    margin-left: 55%;
    padding-top: 10px;
    padding-left: 50px;
    list-style-type: none;
    line-height: 20px;
}

.copyright{
    text-align: center;
}

.classOf{
    text-align: center;
    font-size: 20px;
    color:grey;
}

/*IDs start here*/

#myBackground{
    text-align: center;
    margin-top: 50px;
    font-size: 50px;
}

#twoPara{
    display: inline-block;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 100px;
    line-height: 1.5em;
     margin-bottom: 250px;
    /*margin-bottom: 100px;*/
    font-size: 20px;
}

#Achievements{
    text-align: center;
    margin-top: 50px;
    font-size: 50px;
}

#contactContact{
    text-align: center;
    margin-top: 50px;
    font-size: 50px;
}

#meetMeet{
    text-align: center;
    margin-top: 50px;
    font-size: 50px;
}

#img_cont {
    display: table;
    width: 90%;
    margin-left: 13%;
    margin-top: 5%;
    margin-bottom: 25%;
}

#img_cont a {
  display: table-cell;
  text-align: center;
  width: 16%;

}

#img_cont img {
    height: 150px;
    width: 100px;
    max-width: 150px;
    margin-top: 100px;
    margin-bottom: 100px;
    padding-top: 5%;
}

#me{
    display: table;
    width: 90%;
    margin-left: 13%;
    margin-top: 5%;
    margin-bottom: 25%;
}

#me a{
    display: table-cell;
    text-align: center;
    width: 16%;
}

#me img{
    height: 150px;
    width: 100px;
    max-width: 150px;
    margin-top: 100px;
    margin-bottom: 100px;
    padding-top: 5%; 
}

#Garnet{
    display: table;
    width: 90%;
    margin-left: 13%;
    margin-top: 5%;
    margin-bottom: 25%;
    padding-left: 30%; /*not the correct way to align center but works for now */
}
#Garnet a{
    display: table-cell;
    text-align: center;
    width: 16%;
}
#Garnet img{
    height: 200px;
    width: 200px;
    max-width: 150px;
    margin-top: 100px;
    margin-bottom: 100px;
    padding-top: 5%;
}

#school{
    text-align: center; 
    margin-top: 50px;
    font-size: 50px;
}

#wrangle{
    background-color: aqua;
}

/*Meet-Ups*/

#stop{
    clear: both;
    border-color: firebrick;
}

/* Contact Form CSS*/
.contact-form {
  width: 400px;
  padding: 30px 10px 10px;
  border: 0;
  background-color: black;
  float: left;
  margin-left: 20%;
  margin-top: 100px;
  margin-bottom: 100px; 
}

fieldset {
  border: 0;
}

.form {
  background: rgba(240,240,240,1);
  background: -moz-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 14%, rgba(219,207,199,1) 51%, rgba(240,240,240,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(240,240,240,1)), color-stop(14%, rgba(240,240,240,1)), color-stop(51%, rgba(219,207,199,1)), color-stop(100%, rgba(240,240,240,1)));
  background: -webkit-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 14%, rgba(219,207,199,1) 51%, rgba(240,240,240,1) 100%);
  background: -o-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 14%, rgba(219,207,199,1) 51%, rgba(240,240,240,1) 100%);
  background: -ms-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 14%, rgba(219,207,199,1) 51%, rgba(240,240,240,1) 100%);
  background: linear-gradient(to right, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 14%, rgba(219,207,199,1) 51%, rgba(240,240,240,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#f0f0f0', GradientType=1 );
  border: 1px solid #c9c9c9;
  border-radius: 10px;
  padding-top: 30px;
  padding-bottom: 5px;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

label, input, button, textarea {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: black;
}

label{
  float: left;
  position: relative;
  top: 5px;
  text-align: right;
  width: 110px;
  margin-right: 15px;
  margin-bottom: 5px;
  -webkit-box-sizing: border-box; 
  /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box; 
  /* For legacy (Firefox <29) Gecko based browsers */
  box-sizing: border-box;
}

input, textarea {
  width : 225px;
  padding: 5px 5px 5px;
  margin-bottom: 5px;  
  -webkit-box-sizing: border-box; 
  /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box; 
  /* For legacy (Firefox <29) Gecko based browsers */
  box-sizing: border-box;
  outline: none;
  border-radius: 5px;
  border: 1px dashed rgba(0,0,0,0.2);
}

textarea {
  max-width: 225px;
  height: 90px;
  overflow: auto;
  line-height: 14px;
}

button {
  display: block;
  margin: 15px auto;
  padding: 5px 30px;
  border-radius: 15px;
  border: none;
}
/* CSS for contact form ends here */

// $BioPage: jQuery

$(document).ready(function(){
    setBindings();
});

function setBindings() {
    $('.nav a').click(function(e){
        e.preventDefault();
        var sectionID = e.currentTarget.id + "Section";

        $('html body').animate({
        scrollTop:$('#' + sectionID).offset().top    
        }, 1000)

    })

}

Welcome to the Treehouse Community

Looking to learn something new?

Ryan B.

Ryan B.

I'm trying to share a <div> with a contact form and an <ul> both of which are inside their own <div>'s. HELP! THX!

4 Answers

Robert Manolis

Robert Manolis

Robert Manolis

Robert Manolis

Ethan Rips

Ethan Rips

Ryan B.

Ryan B.

Ryan B.

Ryan B.