Div positionning

I have a div, within this one I need to have 3 others divs:

• 1 on the left (float:left in css helps to position it)

• 2 at the right of the previous one (one on top of each other)

  FIRST    SECOND DIV

  DIV        THIRD DIV

(Maybe a little bit clearer like this)

I do not manage to position them. I end up with the 2 last divs beeing on top of the first one:

<div id="header">
        <div id="logo">Logo goes here</div>
        <div id="caption">Caption</div>
        <div id="nav">Nav</div>
</div>

my css:

#header {
  margin: 0 auto;
  width: 990px;
  height: 130px;
} 
#logo {
  position: relative;
  left: 10px;
  top: 10px;
  width: 289px;
  he开发者_高级运维ight: 110px;
  background: url("images/logo.png");
  float: left;
}
#caption {
  position: relative;
  left: 30px;
  top: 35px;
  font-size: 25px;
  color: #fff;
}
#nav {
  position: relative;
  left: 30px;
  top: 50px;
}

EDIT:

I finally went with this solution:

#header {
  margin: 0 auto;
  width: 990px;
  height: 130px;
}
#logo {
  margin-top: 10px;
  margin-left: 0;
  width: 289px;
  height: 110px;
  background: url("/static/images/logo.png");
  float: left;
}
#caption {
  margin-top: 40px;
  margin-left: 20px;
  font-size: 25px;
  color: #fff;
  float:left;
}
#nav {
  margin-top: 20px;
  margin-left: 20px;
  float:left;
}

All in flaot:left and it seems ok. Is that also a correct way yo go ?

Give this a go:

#header {
  margin: 0 auto;
  width: 990px;
  height: 130px;
      border: 1px solid #fff000;
} 
#logo {
  position: relative;
  left: 10px;
  top: 10px;
  width: 289px;
  height: 110px;
  border: 1px solid #fff000;
  float: left;
}
#caption {
  position: relative;
  float: right;
  width: 650px;
  font-size: 25px;
  color: #fff;
  margin: 10px 10px 10px 0;
      border: 1px solid #fff000;
}
#nav {
  position: relative;
  margin: 10px 10px 10px 0;
  float: right;
  width: 650px;
      border: 1px solid #fff000;
}

Or take a peak at: http://jsfiddle.net/rLcsy/

Floating can be tricky... I think something like step 5 on Learn CSS Positioning in Ten Steps would be a place to start...

Recently I've just quit fiddling and started using the blueprint css framework (at least as a starting point). It might be a good fit for your application.

You will have to add another div to contain the right two.

<div class="container">
<div style="float:left">
left
</div>
<div style="float:right">
   <div>right top</div>
   <div>right bottom</div>
</div>
</div>

Something like that

If you float #logo to the left, #caption and #nav will take the remaining horizontal space, with #caption stacking above #nav by default. Isn't this what you want?

By "relativizing" their positions, you are just breaking what would already work on its own. If you need to add some spacing between the divs, you are better off using margins and paddings. Keep in mind that relative positioning moves the div from it's default place, but the flow for the elements around it will be as if the div were on its place.

So, in summary, try removing (or commenting out) the position, left, and top properties for the three divs (add paddings and margins if you want to add space).

You need to wrap your second and third div and then float...like this...

<div id="header">
    <div id="logo" style="float:left;">Logo goes here</div>
    <div style="float:right;">
      <div id="caption">Caption</div>
      <div id="nav">Nav</div>
    </div>
    <!-- Adding the clear div makes sure you don't accidentally pass float to other elements -->
    <div style="clear:both;"></div>
</div>

I know that you have float:left in your css defined for the logo id; but I put it right on the element to make it obvious what was/was not being floated. When thinking about floating; just think of it as kind of BUT NOT EXACTLY like using spans. You're basically taking a block element and turning it into an inline element. So if you want two elements to be inline, then you must float two elements; as opposed to just one. Keep in mind that the way floating elements is rendered is only relevant to the SIBLINGS of the elements being floated.

The Header should use relative positioning; others should use absolute positioning, then check your Left and Top values