CODEWITHSUNDEEP
csshtml
neuquen
neuquen

Reputation: 4189

Place divs side by side

I've read through tons of stackoverflow looking for an answer to this question. Everyone says use float: left, float:right, overflow: hidden, display: block, etc. but none of it is working for me. I'm thinking it has something to do with my margins, but I've been playing around with it and can't find an answer.

I want my Welcome message to display to the left of my two divs. I'm basically trying to copy the twitter homepage (www.twitter.com).

Fiddle: http://jsfiddle.net/CuwA6/

HTML:

<body>          
     <div id="content">
        <div id="welcome">
            <h1>Welcome!</h1>
            <h2>Blah blah blah...</h2>
        </div>

        <div id="login">
        <form>
            <h3>Please Sign In</h3>
            <input type="text" name="email" placeholder="Username or Email" /><br/>
        <input type="text" name="password" placeholder="Password" /><br/>
            <input type="submit" value="Sign In" />
        </form>
        </div>

        <div id="signup">
        <form>
            <h3>Sign up</h3>
            <input type="text" name="name" placeholder="Full Name" /><br/>
        <input type="text" name="email" placeholder="Email" /><br/>
            <input type="text" name="password" placeholder="Password" /><br/>
            <input type="submit" value="Sign Up" />
        </form>
        </div>
    </div>

    <div id="bird">
       <img alt="" src="img/Bird.png" />
</div>

CSS:

body {
    background: url(img/picture2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#welcome {
    margin: 0 30%;
    text-align: center;
    vertical-align: middle;
}
#login, 
#signup {
    margin: 10px 50%;
    background-color: #F0F0F0;
    padding: 0px 25px 25px 15px;
    border: 1px solid;
    border-radius: 15px;
    width: 300px;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
}
#bird {
    z-index: 0;
    position: fixed;
    bottom: 0px;
    left: 0px;
}
input {
    margin: 3px 0px;
    padding: 5px;
    width: 100%;
}

Upvotes: 1

Views: 651

Answers (3)

Angelique
Angelique

Reputation: 936

I would solve this issue by creating a new div to contain both sign in/up forms, in effect creating 2 columns/channels for your content (welcome to the left, forms to the right). I've forked your original jsFiddle here and have added some ugly background colors to make it clear where each DIV starts and ends. Especially when you're working with otherwise "invisible" DIVs and floats, I find that adding garish background colors often helps me come to grips with where things are landing/beginning/ending.

In this example, I've updated your #welcome DIV and added the following, too:

#welcome {
    background:green;
    float:left;
    width:35%;
    text-align: center;
    vertical-align: middle; }
#form-boxes {
    background:orange;
    float:left;
    width:65%; }

Upvotes: 2

Harry
Harry

Reputation: 89780

You can try removing the margin and adding float:left to your welcome message like below:

#welcome {
    float:left;
    width: 40%; //added as an edit to the answer based on feedback
    text-align: center;
    vertical-align: middle;
}

Updated Demo

Note: Removing margin is optional. But doing this would make sure part of the text doesn't get hidden under the login div.

Upvotes: 2

j08691
j08691

Reputation: 208002

Floating the welcome div left will move it to the left of your other divs.

#welcome {
    margin: 0 30%;
    text-align: center;
    vertical-align: middle;
    float:left;
}

jsFiddle example

Upvotes: 4

Related Questions