Unable to get a two column layout to display properly

I am new to ruby on rails and html\css.  I am trying to code a simple home page that has two large buttons side by side and I just cant figure out what is not working with it.   At this time, the two "buttons" are actually just two columns that I am trying to get lined up underneath the site navigation that is located in the upper right corner.

Here is what I am trying to get it to look like:

What I am trying to get the home page to look like

But here is what I get:

What the home page looks like -unfortunately
Navigation in the upper right hand corner is handled by ruby on rails at app/views/layouts/application.html.erb.  Let me know if necessary, I can provide the code from this as well.

I am trying to use the div class "wrapper" to group the two buttons together:  Signup on the left and Signin on the right.  Here is the code for the app/views/pages/home.html:

 
<div class ="wrapper">

    <!-- Signup -->

    <div class="sign_up">
        <h1>sign up</h1>

        <p>it's free! </p>

        <%= link_to "sign up", '#', :class => "signup_button round" %>
    </div>



    <!-- Signin -->
    <div class="sign_in">

        <h1>sign in</h1>

      <p>email:</p>

      <p>password:</p>

    </div>
</div>


<footer>
  <%= image_tag("logo.gif") %>
</footer>

Open in new window



We are using blueprint css.  Here is the entire custom. css located in the public folder:

 
header {
    padding-top: 20px;
}

/*section {
    margin-top: 1em;
    font-size: 120%;
    padding: 20px;
    background: #d5d7d7;
}*/

section h1 {
    font-size: 200%;
}


/* Links*/
a {
    color: #d5d7d7;
    text-decoration: none;
}

a:hover {
    color: #fb6a00;
    text-decoration: underline;
}

footer img {
    display: block;
    margin-top: 30em;
    margin-left: auto;
    margin-right: auto;
}

/* Header Navigation*/

nav {
    float: right;
}

nav u1 {
    margin: 0;
    padding: 0;
}

nav u1 li {
    list-style-type: none;
    display: inline-block;
    padding: 0.2em 0;
}

nav u1 li a{
    padding :0 5px;
    font-weight: bold;
}

div.wrapper{
    width: 720px;
    margin-top: auto;
}

/* custom font rule*/
@font-face{
    font-family: custom;
    src: url('../fonts/custom.ttf') format('truetype');
}


/* sign up */
div.sign_up{
    float: left;
    background: #d5d7d7;
    padding: 10px;
    width: 290px;
    border: 10px white;
    color: #fb6a00;
    text-align: center;
}

div.sign_up h1{
    font-size: 500%;
    color: #fb6a00;
    font-weight: bold;
    font-family: 'custom';
}
div.sign_up p{

    font-family: 'custom';
    font-size: 200%;
}

/* sign in */
div.sign_in{
    float: right;
    background: #d5d7d7;
    padding: 10px;
    width: 290px;
    border: 10px #fb6a00;
    color: #fb6a00;
    text-align: center;
}

div.sign_in h1{
    font-size: 500%;
    color: #fb6a00;
    font-weight: bold;
    font-family: 'custom';
}

div.sign_in p{
    text-align: left;
    font-family: 'custom';
    font-size: 200%;
}

Open in new window


Things that I am trying to accomplish and haven't been able to figure out yet:

Why do the buttons get aligned at the bottom and end up underneath the footer image?

How can I get the two buttons to align underneath the site navigation?

How can I enforce that both the buttons are the same size:  Currently the right button is larger than the  left button.

TIA
southrayAsked:
Who is Participating?
 
deegoy418Commented:
Hi

I have created a sample page to solve your issue, plz have a look. index.html
0
 
Farzad AkbarnejadDeveloperCommented:
Hello,
Don't use footer tag. Use div instead of. footer is in HTML 5 and I didn't feel its effect in Firefox 4!

-FA
0
 
Roman GhermanSenior Software EngineerCommented:
Als try to use the "clear:both" style to clear the float.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
JESiiCommented:
If you're going to be doing more of this with Ruby/Rails, I recommend the BlueprintCSS gem/framework: http://www.blueprintcss.org/. It's a "grid" framework, and makes it extremely easy to format pages into all kinds of multiple column formats, with easy positioning.  

It also works perfectly with the SimpleForm gem: https://github.com/plataformatec/simple_form which also has outstanding support on Google Groups: http://groups.google.com/group/plataformatec-simpleform.

Finally, the Compass gem: http://billsaysthis.com/content/compass-blueprint-rails.php & https://github.com/chriseppstein/compass/tree serves up all this and more in a great format.

If you're going to use Ruby on Rails, these are part of the "Rails Way" of doing things. Compass is getting lots of support these days, as are the included gems such as Hampton Catlin's Haml (http://haml-lang.com/) and Sass (http://sass-lang.com/) both of which are easy to use and make life MUCH easier for you in Rails.
0
 
JESiiCommented:
BTW, Rails now supports HTML5 by default and I've used it in Firefox and Chrome without any problems. The nice thing about the Blueprint is that it has support for working around all the IE wierdness that Microsoft has subjected the world to.
0
 
southrayAuthor Commented:
Thankd to everyone who has contributed to this question.  I am embarassed that I havent had the chance to respond earlier.  I have been swamped with work at my day job and have had to postpone my ror and html stuff for a while.  I will definately follwo later and award points where necessay.  

Once again thanks!
0
 
deegoy418Commented:
have you got solution for the issue..?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.