Question

I am trying to align these divs side by site, but can not. How do i do it?

    <center>

    <div class="lgsn">

        <div class="login"></div>


        <div class="signup"></div>

    </div>

<center>

and CSS

.lgsn
{
    width: 100%;
    height: 100%; 
    position: fixed;
}

.login, .signup
{
    background-color: #000;
    width: 450px;
    height: 350px; 
    border-radius: 4px; 
    opacity: 0.50; 
}

Answer 1

A few things you should consider.

1. I suggest getting rid of that center tag. It’s depreciated and goes against the separation rule (keep it simple… semantics and decision-making on the markup; style, color and fonts in the CSS). As an alternative to the center tag, you’re going to want to use text-align: center; as a declaration on the CSS side. Remember that text-align: center; aligns the text to the center of it’s parent, so if the parent is displayed inline, that solution will still be centering your text, but the effect of it won’t be noticeable by you. In other words, to center text in a displayed block parent, use text-align: center;. To center the whole div (Note: centering the div… not the text) of a displayed block element, use margin: 0 auto;.
2. You have several options on how to take displayed block elements and make them side-by-side. In most situations, your best option is to use a float (another sometimes useful option is display: inline-block). It may not seem obvious at first because the learned use is to float images as seen in magazines and news paper to get text to wrap around an image, however, floating a div will work to wrap one div around another. The value for float can be left, right, inherit or the default none.
3. It’s also extremely important to remember what a float actually does. It makes things wrap. That means when you start to noice “weird” behavior with divs being floated, it’s because you’re forgetting what the browser thinks of a float as. (I.E., the browser is wrapping things you didnt intend for it to wrap, such as divs or blocks below the float-applied div) Usually, it’s a good indication that your float has to be cleared. To do that, you use the syntax clear: both. (substitute both for right or left if you’re wanting to only clear a float to the right or a float to the left) applied to a usually empty (it really doesn’t need to be empty, but it seems that it’s become convention to do so) element placed where required. The value for clear can be left, right, none, inherit or both.

Good resources.

The below resources are recommended for you to learn further in-depth on what a float is truly capable of. Please take your time to go through the below links.

• http://css-tricks.com/all-about-floats/
• (TLDR:) http://css-tricks.com/video-screencasts/42-all-about-floats-screencast/
• https://developer.mozilla.org/en-US/docs/CSS/float
• On the ride hand side of this page, there are tons of float-related issues. Take a moment to look through them before posting a float issue, it’s probably been covered before.