Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



SEO Class in Chicago, IL

Learn How To Optimize Your Website on July 26, 2013


Looking for personalized in-depth SEO training among your peers?



High Rankings is offering a 1-day customized SEO training class in Chicago. Class size is limited so please sign-up now if you want in!



 


Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!



Photo
- - - - -

Css Positioning


  • Please log in to reply
8 replies to this topic

#1 lyn

lyn

    HR 6

  • Active Members
  • PipPipPipPipPipPip
  • 940 posts
  • Location:London, Ontario

Posted 20 April 2005 - 09:44 PM

Got a problem with positioning an element in CSS that's been wearing out me and the designer on the project. We're feeling our way through a tableless layout and things are looking good, but the designer wants an effect that we can't quite seem to hit.

The layout includes a header area at the top, a CSS flyout menu on the left and a vertically divided body area. The tricky element is a featured image and caption which we would like to keep bolted to the lower right corner of the body area. The body text can run above the image container ordinarily but should wrap around the div if the window is skinnied up enough to make the text run longer. Simply doing a float:right doesn't make it because, if the window is skinnied up too much, it will wrap around and then under the div. Anything we've tried that keeps the div positioned at the bottom also prevents the text from wrapping to the left of it.

Any suggestions on how we keep the div pushed to the bottom of the screen and still let the text wrap to the left? huh.gif

Thanks for all hints!

L.

#2 Randy

Randy

    Convert Me!

  • Moderator
  • 17,540 posts

Posted 21 April 2005 - 06:55 AM

hmm... That's a good one Lyn !

I can almost visualize a way to do it using css and a bit of javascript, sort of akin to a JS watermarking script I wrote ages ago. But that wouldn't do it all either.

Hopefully someone will have an easy answer. If not, I'll try to find some time to tinker with a couple of ideas to see if I can find anything that'll be workable.

#3 Raphael

Raphael

    The Limey Cowboy

  • Active Members
  • PipPipPipPipPipPip
  • 722 posts
  • Location:New England

Posted 26 April 2005 - 11:48 AM

Well, I just spent a highly unproductive 2 hours trying to do this and failing miserably wink.gif

If you ever get it working, post it here wink.gif

#4 Edvin Eshagh

Edvin Eshagh

    HR 3

  • Active Members
  • PipPipPip
  • 84 posts

Posted 26 April 2005 - 01:05 PM

Thought I'm sure it can be done with enough time spent, you may want to try the following.

Sometimes I use a div wrapper to gurantee a certain width size. Thus, when the browser is resized the page aspect ration is maintained, and then the horizontial scroll bars appear.

CODE
<div id="wrapper" style="width:10em">  

  <!-- 1px Min Width -->
  <div id="minWidth"
         style="width:300px;height:1px;font-size:1px;font-height:1px;margin:0px 0px; padding:0px 0px"></div>

  <div id="main">CONTENT</div>
</div>


#5 Raphael

Raphael

    The Limey Cowboy

  • Active Members
  • PipPipPipPipPipPip
  • 722 posts
  • Location:New England

Posted 26 April 2005 - 01:22 PM

Question, lyn:

What if there's too much text for the window?

Basically, what I'm asking is this:

Should the image container live at the bottom of the *window* or the bottom of the containing div? (which may perhaps be off the bottom of the window and need to be scrolled down to get)

Also, if there's not very much text, should the image container still live at the bottom of the *window*, leaving a big blank area above it?

#6 sweepthelegnate

sweepthelegnate

    HR 6

  • Active Members
  • PipPipPipPipPipPip
  • 903 posts
  • Location:Dallas, Texas

Posted 26 April 2005 - 08:47 PM

it might help if we could check it out for real...

#7 Raphael

Raphael

    The Limey Cowboy

  • Active Members
  • PipPipPipPipPipPip
  • 722 posts
  • Location:New England

Posted 27 April 2005 - 09:23 AM

Just do what I did, throw up a dummy page with an outer container containing some text, and try and place a square container in the lower-right corner.

Takes 2 minutes to write the base code for that, and then a few hours of banging your head against CSS2 to figure out that it can't be done wink.gif

Or at least, I can't do it wink.gif

#8 Raphael

Raphael

    The Limey Cowboy

  • Active Members
  • PipPipPipPipPipPip
  • 722 posts
  • Location:New England

Posted 27 April 2005 - 09:26 AM

Here ,cut and paste this and start from here.

CODE
<html>
<head>
<style>

body {
    padding: 0px;
    margin: 0px;
}
.outer {
    height: 100%;
    width: 100%;
    border: 1px solid red;
}

.text {
    padding: 5px;
}

.imageholder {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}

</style>

</head>
<body>
    <div class="outer">
 <div class="text">
     <p>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse lacus erat, imperdiet id, posuere et, malesuada vel, turpis. Duis venenatis. Maecenas enim nulla, venenatis nec, euismod vitae, semper sed, ligula. Nam in massa ac eros sodales rhoncus. Sed sed turpis quis mauris tempor euismod. Nulla mattis lacinia est. Aenean imperdiet, neque vel vulputate congue, ligula sapien gravida risus, eget tristique mi nunc et urna. Quisque scelerisque leo sit amet lorem. Nam sed enim ac urna pulvinar luctus. Maecenas molestie pede ac sapien. Donec risus. Donec faucibus lectus ac purus. Pellentesque fringilla, lectus et eleifend mattis, leo arcu scelerisque quam, in tristique nisl quam eget wisi. Nulla venenatis erat at wisi.
     </p><p>
     Integer ornare, tellus non faucibus auctor, sem felis viverra leo, et adipiscing velit mauris tempor neque. In euismod lorem at sapien. Vivamus eleifend pharetra est. Ut lorem felis, varius in, elementum sed, blandit eget, erat. Maecenas dignissim, pede et semper porttitor, ligula sapien vulputate wisi, ac placerat risus nisl et wisi. Proin tempor ante sit amet enim. Morbi hendrerit sapien ac mauris. Integer porta, turpis quis pellentesque vehicula, lorem risus nonummy purus, vel egestas erat neque in wisi. Ut dui nibh, congue id, pretium quis, venenatis ut, sapien. Donec imperdiet nulla in sem. Integer arcu. Duis venenatis libero in enim adipiscing dictum. Pellentesque interdum sem et mi. Aliquam massa sapien, egestas eget, gravida at, laoreet sit amet, risus. Sed vulputate. Suspendisse potenti. Integer lobortis. Maecenas faucibus lectus nonummy dui. Nulla facilisis nibh non quam. Nullam dictum neque nec dolor.
     </p><p>
     Sed ultrices tempus ligula. Etiam feugiat. Nulla volutpat pede a turpis. Donec lacus ante, rhoncus eget, molestie nec, lobortis sed, orci. Cras mi quam, interdum id, fermentum ac, suscipit sit amet, magna. Vestibulum risus. Pellentesque dapibus vulputate nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum mi elit, ultrices sit amet, scelerisque sed, venenatis ut, quam. Maecenas sem magna, scelerisque vitae, viverra a, tincidunt non, odio.
     </p><p>
     Curabitur nisl ligula, iaculis varius, mollis ac, pharetra et, ipsum. Nulla ante. Sed est libero, imperdiet id, luctus ac, accumsan eget, mi. Maecenas eros leo, vehicula sed, placerat eu, dignissim quis, sem. Suspendisse euismod. Vivamus nisl. Phasellus a purus vitae felis tempor congue. Sed aliquam. Proin orci enim, volutpat ut, consectetuer at, euismod a, mi. Nam dapibus porta arcu. Donec quis libero id ipsum iaculis dignissim. Praesent ligula. Nunc dapibus magna nec arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nisl ante, elementum eleifend, imperdiet a, volutpat hendrerit, ante. Aliquam aliquet. Vivamus vel erat eget justo pulvinar auctor. Maecenas eget magna. Cras vestibulum faucibus ligula. Suspendisse congue risus quis massa.
     </p>
 </div> <!-- end text div -->
 <div class="imageholder">
     &nbsp;
 </div> <!-- end imageholder div -->
    </div> <!-- end outer div -->
</body>
</html>


#9 lyn

lyn

    HR 6

  • Active Members
  • PipPipPipPipPipPip
  • 940 posts
  • Location:London, Ontario

Posted 29 April 2005 - 10:56 PM

QUOTE(Raphael @ Apr 27 2005, 10:23 AM)
Takes 2 minutes to write the base code for that, and then a few hours of banging your head against CSS2 to figure out that it can't be done wink.gif
View Post


Yup - that's pretty much what we did.
Except after a few hours of head banging, I posted here, then went and helped my designer bang his heda on it for a while.
Went home & banged my own on it for a while more.
And so on.

Raphael, to answer your question, I guess we were really looking for the box to live at the bottom of the current div, since we actually wanted a footer for some birdseed at the bottom of the page. If there was just wee bit of copy, it would be fine floating above the box.

Sorry I didn't get back here sooner - I actually thought the thread had died a couple days after my first post.

Thanks all for the taking on the headaches. thumbup1.gif I'm afraid we walked away from the problem and revised our layout - site has to be live on Monday!

I'd still love to see a solution if anyone gets inspired - there's always the next site!

L.

Added: oh yeah: if there was a pile of copy, it would push everything down so the container remains in the lower right with the copy filling the space to its left.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users