Two columns with CSS and html ain't working

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.

Is that all of the html code? If yes, you're missing a closing </div> tag for the container. Most of the time, if an item is showing below another then it means that the containing div is not wide enough to display them side-by-side. Use a tool like firefox dev toolbar to take a look and see what's causing the issue. — evasilchenko
– evasilchenko, Commented Aug 9, 2011 at 17:31
Did you tried using display: inline; for #headline and #userlogin? — JMichelB
– JMichelB, Commented Aug 9, 2011 at 17:31
a jsfiddle is usually very helpful to show your point. Consider adding that. — Madara's Ghost
– Madara's Ghost, Commented Aug 9, 2011 at 17:31
Theres no div missing, as long as i can see in the editor. I created a jsfiddle to help it out: jsfiddle.net/cNqqJ — gmemario
– gmemario, Commented Aug 9, 2011 at 17:56

Rion Williams · Accepted Answer · 2011-08-09 18:11:23Z

2

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; }

edited Aug 9, 2011 at 18:11

answered Aug 9, 2011 at 17:31

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

gmemario Over a year ago

I added float:left already but the thing is that the bottom part comes up behind then, like the body wasn't filling a space.

Rion Williams Over a year ago

@Gilson - could you make a jsFiddle or a screenshot possibly displaying what it looks like or what you are trying to accomplish. It's a bit difficult trying to visualize.

gmemario Over a year ago

I added the line display:inline-block; on #headline and #userlogin it kind of helped, but they are not aligned properly :/

Rion Williams Over a year ago

I think I got what you are trying to accomplish - are you talking about how those two areas ignore the "body" area in the background?

gmemario Over a year ago

I want a layout with the header, thats the logo and the menus and right below on the left i want the news block and on the right the login block and bellow those two the footer with copyright and all that stuff. If i use float: left; on both of then they stay side by side the way i want, but the footer comes up and screw it up

|

Marc B · Accepted Answer · 2011-08-09 17:31:36Z

0

You'd need to float the #headerline and #userlogin divs, otherwise what you're seeing is expected behavior.

Try adding a

float: left;

to the #headline div

answered Aug 9, 2011 at 17:31

Marc B

362k44 gold badges433 silver badges508 bronze badges

Comments

Dan · Accepted Answer · 2011-08-09 17:32:21Z

0

You need to add float left to the sections that you want side by side. Check this out http://jsfiddle.net/danielcgold/aD2yH/

answered Aug 9, 2011 at 17:32

Dan

3,3585 gold badges38 silver badges58 bronze badges

Comments

Jason Gennaro · Accepted Answer · 2011-08-09 17:32:53Z

0

You could just add float:left; to your two divs

Example: http://jsfiddle.net/jasongennaro/JRumr/

You could also use display:inline-block;

Second example: http://jsfiddle.net/jasongennaro/JRumr/1/

answered Aug 9, 2011 at 17:32

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Comments

Rion Williams · Accepted Answer · 2011-08-09 17:35:12Z

0

Couple of things. First off the #container tag never terminates, close it.

Second off, you need to float your two columns:

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

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

edited Aug 9, 2011 at 17:35

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

answered Aug 9, 2011 at 17:32

Dmitri Farkov

9,7411 gold badge32 silver badges45 bronze badges

1 Comment

gmemario Over a year ago

I added float:left already but the thing is that the bottom part comes up behind then, like the body wasn't filling a space.

Collectives™ on Stack Overflow

Two columns with CSS and html ain't working

5 Answers 5

7 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related