Fate Fate - 1 month ago 7
CSS Question

I can't seem to float my right column to the right of my page

I have my website up at Vivascoaching the main page is still incomplete because I am working on the content to add but if you mouse over about us and click meet our coaches you will see what I mean. My contact form is appearing underneath all the coach information and I would like it to be beside it on the right. I can't seem to get this to work even though I floated both their respective columns to the left. Can some one please help me out? I added the HTML and CSS snipets as well just in case:



header{
margin: 0px auto;
background-color: white;
border-bottom-style: solid;
}

body{

font-family: "Comic Sans MS", sans-serif;
}

h1,h2,h3{
color: #0f43f0;
}


a:link {
color: #0f43f0;
text-decoration: none;
font-size: 120%;
}


a:visited{
color: #0f43f0;
}

img {
max-width: 100%;
}


footer{
clear: both;
text-align: center;
background-color: white;
border-top-style: solid;
width: auto;
}

footer p{
margin-top: 10px;
color: #0f43f0;

}

/*----------------DROP DOWN STYLING-----------*/

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: #0f43f0;
color: white;
}


li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}


/*-------NAV STYLING------------*/

#mainlinks li{
float:left;
margin-left: 80px;
}



/*---------- COLUMN STYLING ----------*/

.linkswrapper{
color: #0f43f0;
}

#container {
width: 960px;
margin: 0 auto;
overflow: auto;
}

.middle_column{
float:left;
text-align:center;
width:700px;
padding:10px;
margin-left: 30px;
}


.right_column{
float: left;
text-align:center;
width:260px;
margin-left: 70px;
overflow: visible;
}




/*---------- Media Queries for Responsive design --------------*/

@media screen and (max-width:959px) {
#container{
width:100%;
}
}


@media screen and (max-width:640px){
#container{
width:100%;
}

img {
max-width:100%;
}
}


@media screen and (max-width:480px){
#container{
width:100%;
}
}

<!DOCTYPE HTML>
<html>
<head>
<title>Vivas Coaching-Main</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/normalize.css">
</head>

<body>

<header>
<a href="index.html"><img src="Images/logo.png" alt="logo" style=" width: 465; height: 135; margin-left: 10px;"></a>
</header>

<div class="linkswrapper">
<nav id="mainlinks">
<ul>
<li><a class="active" href="index.html" title="Main">Main</a></li>

<li class="dropdown">
<a href="aboutus.html" class="dropbtn" title="About Us">About Us</a>

<div class="dropdown-content">
<a href="meetourcoaches.html">Meet Our Coaches</a>
<a href="visionandvalues.html">Vision and Values</a>
</div>
</li>

<li class="dropdown">
<a href="courses.html" title="Courses">Courses</a>

<div class="dropdown-content">
<a href="satprep.html">SAT Prep</a>
<a href="actprep.html">ACT Prep</a>
<a href="subjecttutoring.html">Subject Tutoring</a>
<a href="summercamp.html">Summer Camp</a>
<a href="satactwinterbootcamp.html">SAT/ACT Winter Boot Camp</a>
</div>
</li>


<li><a href="register.html" title="Register">Register</a></li>
</ul>
</nav>
</div>

<div id="container">
<div id="middle_column">
<img src="Images/elaine.png" alt="Elaine">
<h1><i><u>Lead Coach Elaine Aguasvivas</u></i></h1>

<p>Coach Elaine earned a Bachelor of Arts in Economics from William Smith College. Because of her Economics background, she has had the opportunity to intern in places such as the United States State Department and the International Trade Commission both in Washington, DC. Professionally, Coach Elaine has 3+ years of experience as a College Adviser directly assisting students plan for and apply to college. As a full-time SAT Prep Coach, her passion is to prepare college minded students to achieve their highest potential scores in tests such as the SAT and the ACT.</p>
<p>Coach Elaine has successfully prepared students for SAT / ACT / SSAT tests as a profession for over two years now. It is her passion to motivate and equip students to achieve their highest possible score. On average, her students increase 250 points, with her highest increase at 410 points. What sets her apart is her ability not only to tutor but to coach her students.</p>
<p><i>"These are intimidating tests and students should receive all the support they need to overcome shortcomings and combat test anxiety. My goal with every student is to instill confidence in them through the mastery of best strategies"</i>- Coach Elaine</p>
<p>On Sundays, you can always find her at Blueprints Church in Wellington as she is one of its founding members. She serves actively as a Youth Leader mentoring young adults in her church.</p>
</div>

<aside id="right_column">
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!<p>

<form method="post" action="callback.php">

<label for="firstname">First Name: </label>
<input name="firstname" id="firstname" type="text" />

<label for="lastname">Last Name: </label>
<input name="lastname" id="lastname" type="text" />

<label for="email">Email: <span class="required"></span></label>
<input name="email" id="email" type="text" />

<label for="phonenumber">Phone Number:</label>
<input name="phonenumber" id="phonenumber" type="text"/>

<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type answer here">

<label for="message"> Message: <span class="required"></span></label>

<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea>
<input type="submit" id="submit"/>
</form>
</aside>
</div>

<footer>
<p>&copy;VivasCoaching 2016</p>
</footer>

</body>
</html>





I also added some queries to the site to try and get it to look good on mobile and tablet as well. I just learned about queries today. What do you guys think or recommend?

Answer

If you would like content to fit side by side and you want it to be responsive for mobile, you should definitely use the bootstrap framework. I used the code below and removed all css and the header content and was able to get what you were looking for.

<!DOCTYPE HTML>
<html>
<head>
   <title>Vivas Coaching-Main</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../style/main.css">
   <link rel="stylesheet" href="../style/normalize.css">

   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>

<body>



<div class="container">
<div class="row">
<div class="col-md-6">.


  <div >
    <img src="http://vivascoaching.com/Images/elaine.png" alt="Elaine">
    <h1><i><u>Lead Coach Elaine Aguasvivas</u></i></h1>

    <p>Coach Elaine earned a Bachelor of Arts in Economics from William Smith College. Because of her Economics background, she has had the opportunity to intern in places such as the United States State Department and the International Trade Commission both in Washington, DC. Professionally, Coach Elaine has 3+ years of experience as a College Adviser directly assisting students plan for and apply to college. As a full-time SAT Prep Coach, her passion is to prepare college minded students to achieve their highest potential scores in tests such as the SAT and the ACT.</p>
    <p>Coach Elaine has successfully prepared students for SAT / ACT / SSAT tests as a profession for over two years now. It is her passion to motivate and equip students to achieve their highest possible score. On average, her students increase 250 points, with her highest increase at 410 points. What sets her apart is her ability not only to tutor but to coach her students.</p>
    <p><i>"These are intimidating tests and students should receive all the support they need to overcome shortcomings and combat test anxiety. My goal with every student is to instill confidence in them through the mastery of best strategies"</i>-  Coach Elaine</p>
    <p>On Sundays, you can always find her at Blueprints Church in Wellington as she is one of its founding members. She serves actively as a Youth Leader mentoring young adults in her church.</p>
  </div>
   </div>
  <!-- first column -->

<div class="col-md-6">.
  <aside>
    <h2>Contact Us</h2>
    <p>(646)316-8481/<br>(403)718-0159</p>
    <p>Please fill out the information below and we will get back to you as soon as possible!<p>

    <form method="post" action="callback.php">

        <label for="firstname">First Name: </label>
        <input name="firstname" id="firstname" type="text" /><br>

        <label for="lastname">Last Name: </label>
        <input name="lastname" id="lastname" type="text" /><br>

        <label for="email">Email: <span class="required"></span></label>
        <input name="email" id="email" type="text" /><br>

        <label for="phonenumber">Phone Number:</label>
        <input name="phonenumber" id="phonenumber" type="text"/><br>

        <label>*What is 2+2? (Anti-spam)</label>
        <input name="human" placeholder="Type answer here"><br>

        <label for="message"> Message:  <span class="required"></span></label><br>

        <textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea><br>
        <input type="submit" id="submit"/>
    </form>
  </aside>
</div>
</div>
<!-- second column -->
</div>
</div>
<!-- row  -->
<!-- container  -->

<footer>
  <p>&copy;VivasCoaching 2016</p>
</footer>

</body>
</html>

screenshot