Struggeling with layout - css

[ø]

Hi,
I've been trying to learn some serious CSS so I can put together my website (about time). But I've got some problems fitting it all together - this is probably very easy. I just need some tips on how to chop it up and stuffz :)

First, have a look at this little thingy. I've tried to explain how I've done it as it is now and thingz.

http://img102.imageshack.us/img102/7003/csslayoutgh6.gif
Basically, I've got 3 parts. A header thing and two other elements below it. The one contains text only (left one) and the other one is a contact form. I want it to look like the drawing but that's not what I'm sitting with now - I'll get to that.

The colored lines is how I've used div's to put it together. Or how I've thought.

The problem I've got now is that the contact form (the bottom right element) isn't placed as I want it to (as in the explanation). The contact form is placed below the bottom left element. So it's basically just 3 things on top of each other:)

My question is, how would I go about using the right amount of div's and stuff to make it look like the explanation? How can I place the bottom two elements next to each other?

I so hope you got this. When looking at the drawing thing I did, don't think too much about the lines. That's just the way I thought I'd work with the div's. But apparently it doesn't work. I just need your help on how to change it for the better. Kind of. Thingz :)

Cheers and have a nice day =)

[MTsoul]

4 divs would be enough. 1 for each box, and an outer container.


<div>
<div>header</div>
<div style="width: 50%; float: left">text</div>
<div style="width: 50%;">contact</div>
</div>

That's it :)

[ø]

Thanks man, I'll see if I can get it to work :thumb:

EDIT:

I can see you have made div's without ID names. I want to have that as well so I can control them from an external .css file.

Would this



<div id="header">content</div>
<div id="text">content</div>
<div id="contact">content</div>
and


#text {
width: 50%;
float: left;
}
#contact {
width: 50%;
}
Work?

If so, how do I wrap a container div around them? Cause if I write "<div id="container>" before I write the other divs, I would close it before I get to the end of the divs (when closing the first div) - wouldn't I?

EDIT2:

Here's the HTML and CSS I'm using, just in case :)



<div id="container">
<div id="teaser">
<img src="teaser.png">
</div>
<div id="info">
Content
</div>
<div id="contact">
Content
</div>


#container {

width: 950px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-bottom: 10px;

}

#info {

float: left;
width: 50%;
line-height: 20px;
text-align: justify;

}

#info h2 {

font-family: century gothic;
font-size: 20pt;
font-weight: normal;
margin-bottom: 0.5em;
color: #ee3a96;
line-height: 25px;

}

#info a {

color:#04baf1;
text-decoration:none;
}

#info a:hover {

color:#67848d;
text-decoration:none;

}


#contact {

width: 50%;

}As you can see I tried to make the code I got to fit with the system I had. That bad bad system :P

[MTsoul]

So... does it work? It looks like it does.

[ø]

Heh, no it doesn't - that's why I posted :P

[noTime]

Hang in there. You don't have a problem, you just NEED training. You want a teacher? Pay the man! :D

For now I won't say point-black: you're missing float property somewhere and you haven't got a description for a certain ID.

[ø]

So just a little mistake somewhere then.. again my bad. I'm on it, thanks :)

EDIT:

So I got it to work, thanks :thumb: I didn't put in float on the bottom right div. MTsoul didn't add it in his example that's why I thought it would work.

Anyway, I've still got a problem tho. Um, the bottom div's are like right next to each other, and I wan a space between them. I tried to add right padding to the bottom left and also padding to the right, but then it was just moved under it again. How can I add space between the bottom two?

I know. I'm a beginner :)