Jump to content

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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...