Aligning

[dalawh]

I am having a little trouble with aligning <div> in my webpage.I want to move the <div> with "TIME GOES HERE" all the way down to the top of the grey navigation bar.

[niche]

We need to see your code or get a link from you to be greatest help. In the meantime, I'd look at your margins or put something before the divs.

[dalawh]

We need to see your code or get a link from you to be greatest help. In the meantime, I'd look at your margins or put something before the divs.

It is something like...

<div class="container"><div class="blue_area">  <div class="left_side">    <!-- THE LEFT SIDE OF THE PICTURE    Includes float:left; width:70%;    -->  </div>  <div class="right_side">   <!-- Includes float:left; width:30%; -->   <div class="search">    <!-- DARK BLUE AREA -->  </div>  <div class="time">    <!-- SKY BLUE AREA -->  </div>  </div>  <!-- NAVIGATION CODE GOES HERE    Style include clear:both;   --></div><div class="grey_area">  <!-- NAVIGATION CODE GOES HERE    Style include clear:both;   --></div></div>

That is how it looks. Gotta figure out how to position it to the bottom.

[tnd1000]

Hi there. It might help if you posted your CSS, as well (the more information, the better). As far as I can see, you might want to play around with margin-top and margin-bottom. It involves some trial-and-error, but I often use it for positioning elements and it works pretty well.

[dalawh]

Hi there. It might help if you posted your CSS, as well (the more information, the better). As far as I can see, you might want to play around with margin-top and margin-bottom. It involves some trial-and-error, but I often use it for positioning elements and it works pretty well.

That seems like a really bad way to position things. Is there any align setting that puts it on the bottom?

[dsonesuk]

<div class="container"><div class="blue_area">  <div class="left_side">    <!-- THE LEFT SIDE OF THE PICTURE    Includes float:left; width:70%;    -->  </div>  <div class="right_side">   <!-- Includes float:left; width:30%; -->   <div class="search">    <!-- DARK BLUE AREA -->  </div>  </div>  <!-- NAVIGATION CODE GOES HERE    Style include clear:both;   --></div><div class="grey_area">  <!-- NAVIGATION CODE GOES HERE    Style include clear:both;   -->  <div class="time" style="margin-top: -#px;"> <!-- where # = height 'time' element -->    <!-- SKY BLUE AREA -->  </div></div></div>

[dalawh]

<div class="container"><div class="blue_area">  <div class="left_side">	<!-- THE LEFT SIDE OF THE PICTURE	Includes float:left; width:70%;	-->  </div>  <div class="right_side">   <!-- Includes float:left; width:30%; -->   <div class="search">	<!-- DARK BLUE AREA -->  </div>   </div>  <!-- NAVIGATION CODE GOES HERE	Style include clear:both;   --></div><div class="grey_area">  <!-- NAVIGATION CODE GOES HERE	Style include clear:both;   -->   <div class="time" style="margin-top: -#px;"> <!-- where # = height 'time' element -->	<!-- SKY BLUE AREA -->  </div>  </div></div>

Doesn't that move the time into the search area?

[Krewe]

No he moved it into the contact area and moved it up, so it's looks like it is sitting on the contact area.

[dalawh]

What I just noticed is that dsonesuk moved the time div to the grey area and by making the margins the size of the time div, it goes up by that much. Am I right?

[dsonesuk]

There's two options Take it that both div with 'class time', and div with class 'grey_area' have height of 25px;25px (1)

<div class="grey_area">   <div class="time">Time goes here</div> </div>

.grey_area {height:25px; background-color: grey;}  .time {height:25px; width: 200px; float: right; margin-top:-25px; background-color: sky blue; line-height:25px;}

OR (2)Same html as (1)

.grey_area {height:25px; background-color: grey; position: relative;} .time {height:25px; width: 200px;position: absolute; top:-25px; right:0; background-color: sky blue; line-height:25px;}

[dalawh]

Oh okay. That makes sense. Learning new things every day.