How to make this part of my layout work?

How can I make this part of my layout work?

I can't work out how to fix this. Its become so messy and confusing.

    <div style='width: 900px; margin:0 auto'><div style='float: left; width: 312px; height: 197px; background-color: #A857BC'></div>
    <div style='float: left; width: 249px; height: 197px; background-color: #FF80C0'></div>
    <div style='float: left; width: 339px; height: 197px; backgrou开发者_如何学Cnd-color: #8C83FC'></div>
    </div><div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>

</div>

    <div style='width: 900px; margin:0 auto'><div style='float: left; width: 362px; height: 197px; background-color: #A857BC'></div>
    <div style='float: left; width: 147px; height: 197px; background-color: #FF80C0'></div>
    <div style='float: left; width: 391px; height: 197px; background-color: #8C83FC'></div>
    </div><div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>
</div>

You have some stray closing </div> tags in there, make sure they are in balanced pairs.

Right off the bat, you're going to want to include an external style sheet. This will make your life much easier. See my example below.

http://jsfiddle.net/kSxrK/2/

Can you please explain in more detail what you're trying to accomplish. I see the text doesn't appear - but where do you want it?

<div style='width: 900px; margin:0 auto'>
  <div style='float: left; width: 312px; height: 197px; background-color: #A857BC'></div>
  <div style='float: left; width: 249px; height: 197px; background-color: #FF80C0'></div>
  <div style='float: left; width: 339px; height: 197px; background-color: #8C83FC'></div>
</div>
<div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>

<div style='width: 900px; margin:0 auto'>
  <div style='float: left; width: 362px; height: 197px; background-color: #A857BC'></div>
  <div style='float: left; width: 147px; height: 197px; background-color: #FF80C0'></div>
  <div style='float: left; width: 391px; height: 197px; background-color: #8C83FC'></div>
</div>
<div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>

or

<div style='width: 900px; margin:0 auto'>
  <div style='float: left; width: 312px; height: 197px; background-color: #A857BC'></div>
  <div style='float: left; width: 249px; height: 197px; background-color: #FF80C0'></div>
  <div style='float: left; width: 339px; height: 197px; background-color: #8C83FC'></div>
  <div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>
</div>

<div style='width: 900px; margin:0 auto'>
  <div style='float: left; width: 362px; height: 197px; background-color: #A857BC'>        </div>
  <div style='float: left; width: 147px; height: 197px; background-color: #FF80C0'></div>
  <div style='float: left; width: 391px; height: 197px; background-color: #8C83FC'></div>
  <div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>
</div>

depending on what you're trying to accomplish.

That code is ridiculously messy - extra closing tags, inline styles, duplicated styles, inconsistent indentation. Also, you're using single quotes - while there's nothing wrong with that, double quotes are more common. You should have included a picture in your question.

This is my best guess as to what you were trying to go for.

<div style="width:900px; margin:0 auto; position:relative; height:197px">
    <div style="float:left; width:312px; height:100%; background-color:#a857bc"></div>
    <div style="float:left; width:249px; height:100%; background-color:#ff80c0"></div>
    <div style="float:left; width:339px; height:100%; background-color:#8c83fc"></div>
    <div style="background-color: #9cc; position:absolute; top:50px; bottom:50px; left:50px; right:50px">this should be in the middle</div>
</div>
<div style="width:900px; margin:0 auto; position:relative; height:197px">
    <div style="float:left; width:362px; height:100%; background-color:#a857bc"></div>
    <div style="float:left; width:147px; height:100%; background-color:#ff80c0"></div>
    <div style="float:left; width:391px; height:100%; background-color:#8c83fc"></div>
    <div style="background-color: #9cc; position:absolute; top:50px; bottom:50px; left:50px; right:50px">this should be in the middle</div>
</div>

You should listen to the other answers/comments regarding the use of inline styles.