Jump to content

Aligning


dalawh
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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

Link to comment
Share on other sites

<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?
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...