SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2004
    Location
    MN, USA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Right float with vertically positioned left text

    This might be a pretty easy question for some of you css gurus out there, but it's been giving me some headaches. Here's an example of what I'm working with: Test page. I've got a div floated to the right in a container, and text that is on the left. What I'm trying to do is vertically align the text so that it rests on the bottom left corner of the container div.

    I was able to do this for firefox by using position:relative for the container and position:absolute with bottom:0 for the text (link), but then the text doesn't appear at all in IE. I assume that it has something to do with IE not liking bottom:0.

    So how would I go about doing something like this?
    Thanks in advance!

  2. #2
    SitePoint Member
    Join Date
    Jan 2004
    Location
    MN, USA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^bump

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    use second content container floating left and a clear float ? or top margin

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    	<title>Test</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<meta name="author" content="Sean Landman" />
    	<style type="text/css">
    	
    html, body, div
    	{
    	margin: 0px;
    	padding: 0px;
    	}
    	
    .container
    	{
    	margin: 5px;
    	padding:3px 3px 2px 3px;
    	background-color: #ccc;
    	border: 1px solid #000;
    	width: 500px;
    	}
    	
    .right
    	{
    	background-color: #ccf;
    	border: 1px solid #00f;
    	width: 100px;
    	height: 100px;
    	float: right;
    	}
    .left{float:left; margin-top:-20px;}
    .leftx{float:left; margin-top:80px;}
    	
    .clear
    	{
    	clear: both;
    	overflow: hidden;
    	height: 1px;
    	}
    
    	</style>
    </head>
    <body>
    
    
    <div class="container">
    	<div class="right"></div>
    	<div class="clear"></div>
    	<div class="left">some text here or something</div>
    	<div class="clear"></div>
    </div>
    
    
    <div class="container">
    	<div class="right"></div>
    	<div class="leftx">some text here or something</div>
    	<div class="clear"></div>
    </div>
    
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •