Question

I’m trying to put a news column and a login column side by side, but what happens is that one goes below the other.

I already have the header and footer of the page worked out, I just am having some problems with the main part. Here is my code.

CSS Code:

@CHARSET "UTF-8";

#container {
    width: 900px;
    padding: 15px;
}

#headline {
    width: 575px;
    height: 220px;
    background-image: url('/images/background_news.png');
}

#headlinetext {
    padding: 20px;
    width: 280px
}

#userlogin {
    background-image: url('/images/area_login.png');
    width: 273px;
    height: 206px;
}

#logintext {
    padding: 20px;
    width: 273px
}

HTML Code:

<div id="container">
<div id="headline">
    <div id="headlinetext">
    <font size="4">Text</font>
    </div>
</div>

<div id="userlogin"> 
    <div id="logintext">
    <form method="post" action="validateuser.php">
    <label>Usu·rio: </label><br>
    <input type="text" name="username" maxlength="50" size="20" /><br>
    <label>Senha: </label><br>
    <input type="password" name="password" maxlength="50" size="20" /><br>
    </div>
</div>

I created a JsFiddle to help visualize my problem. http://jsfiddle.net/cNqqJ/

The container tag is repeated because I have 3 separate CSS files, not sure if that is a good excuse.

Answer 1

Is this what you are trying to accomplish: Working Demo

You can add float: left; to #userlogin and #headline divs:

#userlogin 
{
    background-image: url('/images/area_login.png');
    width: 273px;
    height: 206px;
    float: left; /* Added */
}

#userlogin 
{
    background-image: url('/images/area_login.png');
    width: 273px;
    height: 206px;
    float: left; /* Added */
}

If you are having issues with the “body” not being used, as you mentioned, you might want to wrap this “login” area inside a wrapper, something like this:

<div id='logincontainer'>
    <div id='headline'>
    ...
    </div>
</div>

with:

#logincontainer { height: 220px; }