CODEWITHSUNDEEP
csshtml
Luc
Luc

Reputation: 17072

Div positionning

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

(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;
  height: 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 ?

Upvotes: 0

Views: 133

Answers (6)

zer0w1dthspace
zer0w1dthspace

Reputation: 1052

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

Upvotes: 0

Dave
Dave

Reputation: 6179

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.

Upvotes: 0

Edurne Pascual
Edurne Pascual

Reputation: 5667

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).

Upvotes: 0

simnom
simnom

Reputation: 2620

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/

Upvotes: 2

arnehehe
arnehehe

Reputation: 1398

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

Upvotes: 0

mgalgs
mgalgs

Reputation: 16739

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.

Upvotes: 0

Related Questions