Trying to align text near bottom left of website. Figured out how to do it with an image but not sure how to get it to work with text. Here’s an image of what I have but would like it to align on the bottom left where the white space is (with green bg). Well, I’d actually like it to stay where it is (about 50 px up from bottom at all time regardless of text in main content, etc.
Thanks so much!
It looks like you are using the Wordpress editor, it’s sneaking bogus code in on you. Welcome to Wordpress (:
You can’t see it in the editor but if you view the page source you will find the culprit.
It’s not your fault, WP editor is notorious for doing this. It is placing <br> tags after your images and dropping the text down to a new line. You will have to edit the settings in the WP editor to get rid of them. I don’t know how but I know that others have been able to do it.
(Once again, scroll to the right and look for red. There is also some “p” tags which should not be there.)
[B]<ul id="projects">[/B]
<li>
<a href="http://tomhatley.com/wp-content/uploads/2010/07/projects1.jpg"><img src="http://tomhatley.com/wp-content/uploads/2010/07/projects1.jpg" alt="" title="projects1" width="105" height="97" /></a>[COLOR=Red]</p>[/COLOR]
[COLOR=Red]<p>[/COLOR]New York City Water Supply System[COLOR=Red]</p>[/COLOR]
</li>
<li>
<a href="http://tomhatley.com/wp-content/uploads/2010/07/projects2.jpg"><img src="http://tomhatley.com/wp-content/uploads/2010/07/projects2.jpg" alt="" title="projects2" width="104" height="96" /></a>[COLOR=Red]<br />[/COLOR]
Land Trust for the Little Tennessee
</li>
<li>
<a href="http://tomhatley.com/wp-content/uploads/2010/07/projects3.gif"><img src="http://tomhatley.com/wp-content/uploads/2010/07/projects3.gif" alt="" title="projects3" width="103" height="98" /></a>[COLOR=Red]<br />[/COLOR]
Partnership-based Tribal and University Programs
</li>
<li>
<a href="http://tomhatley.com/wp-content/uploads/2010/07/projects4.jpg"><img src="http://tomhatley.com/wp-content/uploads/2010/07/projects4.jpg" alt="" title="projects4" width="103" height="97" /></a>[COLOR=Red]<br />[/COLOR]
Family Farm in Central North Carolina
</li>
</ul>
[COLOR=Red]<p class="last"> </p>[/COLOR]
Now view the page source of my version of the projects page and you will see that it is not the same.
It looks like you got it under control now, I’ll leave you with it. 
I just viewed your about page and I see you got the <p class=“about”> in there.
I did the same thing but I just set min-height:1000px on the #inner and I eliminated the <p class=“last”>
http://www.css-lab.com/test/sculley/about.html
I just set a larger bottom margin on p.about instead.
[B]p.about[/B] {
font-size:1em;
font-weight:bold;
[COLOR=Blue]margin:.75em 0 3em; [/COLOR]
color:#005D29;
}
------------------------------
#inner {
[COLOR=Blue]min-height:1000px;[/COLOR]/* IE7 haslayout */
background:#FFF;/* background color for right column */
margin-left:12em;/* this is the space for the left column */
}
#inner:after {/* clearfix adaption for float containment */
clear:both;
content:" ";
display:block;
height:0;
font-size:0;
}
* html #inner {[COLOR=Blue]height:1000px;[/COLOR]}/*IE6 haslayout/min-height*/
Your doing good Karen 
I was looking at your pages while you were cleaning them up.
I’ll take a look at the projects page and see what happened.
In the meantime let me go back to something I mentioned earlier in the thread which was tabbing your html out in a structured manor. View the page source of any of your pages in FF and you will probably see that they look nothing like they do in your editor.
The cause of that is copying and pasting my html (from my editor) and then using your editor to make other changes. Our tab indentions are not set up the same and that is why the page has all the whitespace and misaligned div tags when you view the page source via a browser.
For example, I took your “about” page and zeroed out all the tabbing and whitespace. Then I re-tabbed it to get the divs indented in a structured manor.
I use PSPad editor and what I do is select HTML from the main menu and then: Tidy > Tidy clean Document - nowrap, noindent
That zeroes out all indentions and whitespace so I can tab everything out without leftover whitespace from another editor.
Which gave me the html below for the projects page.
I would disagree with the use of the h3 that is wrapped around Tom’s bio, it’s not really a heading and it is not flowing along with the h1. I would set a class on a p tag and increase the font-size and change the color. Something like p class=“tom” maybe. That empty “p” needs to go also, what you would do is just set a larger bottom margin on the new “p” class.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tom Hatley, Heritage & Natural Resources Consulting – About</title>
<link rel="stylesheet" href="http://tomhatley.com/wp-content/themes/Tom_Hatley/style.css" type="text/css" media="screen">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://tomhatley.com/feed/">
<link rel="pingback" href="http://tomhatley.com/xmlrpc.php">
<meta name="generator" content="WordPress 3.0"><!-- leave this for stats -->
</head>
<body>
<div id="wrapper">
<div id="inner">
<img class="header" src="http://tomhatley.com/wp-content/themes/Tom_Hatley/images/header-hr.jpg" width="374" height="130" alt="Tom Hatley, Heritage & Natural Resources Consulting">
<div class="hr"><hr></div>
<div id="left">
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/projects-and-clients/">Projects/Clients</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Publications</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<div id="right">
<div class="post" id="post-2">
<div class="entrytext">
<h1>About</h1>
<p><a href="http://tomhatley.com/wp-content/uploads/2010/07/about-e1278533414611.jpg"><img src="http://tomhatley.com/wp-content/uploads/2010/07/about-e1278533414611.jpg" alt="" title="about" width="200" height="279" class="floatRight"></a></p>
<h3>Tom Hatley is a forester, writer, and historian and recognized leader in the conservation and organizational development community. With over thirty years of experience running organizations, consulting, teaching, and speaking and writing, Tom Hatley brings a unique combination of skills—forester, teacher, writer, manager, fundraiser, and historian.</h3>
<p> </p>
<p>Hatley has a track record on success in resolving or innovating in policy and partnership efforts ranging from design of bilateral environmental assistance to mountain regions, to overcoming the burden of a history of violence in negotiations between tribes and parks, to multi-state biodiversity conservation efforts, to the management of the world’s largest municipal water supply, to creating external university partnerships. Hatley Consulting also draws as well on a network of skilled and senior practitioners in fields such as evaluation, communication, finance, conflict resolution, counselors, and conservation professionals.<br></p>
</div>
</div>
</div>
</div><!--end inner-->
<div id="search">
<form method="get" id="searchform" action="/index.php" name="searchform">
<div>
<label>Search</label>
<input type="text" name="s" id="s" value="">
<input type="submit" id="searchsubmit" value="Go">
</div>
</form>
</div>
<div id="textbox">
<p>34 Wall Street, Suite 707<br>
Asheville, NC 28801<br>
(828) 318-5288<br>
[email]tomhatley@gmail.com[/email]</p>
<p class="copyright">© 2010 All Rights Reserved<br> Tom Hatley</p>
</div>
</div><!--end wrapper-->
</body>
</html>
Thanks Ray. I just cleaned it up and both the CSS and HTML are validated. Not sure why the text on projects page won’t float to right of images.
I appreciate you pointing this out b/c all these things just help. The only thing is that it’s hard to control WP spacing, indents, etc. I actually did exactly what you described (with TIDY Clean) on the project page but it didn’t do a bit of good. No indents show at all. It’s one of the drawbacks about WP. However, I fixed the <br /> thing
Also, you can’t tab in WP. So, when I add CSS rules right into WP, I have to use the space bar. That might be why you’re seeing all the white space and weird spaces.
Yes, it is getting better. You should run your pages through the validator and let it point some things out to you.
I’ll touch on a few things here:
You have declared your content-type meta tag twice, keep the one at the top since it is always a good idea to have it before the title.
<head>
[COLOR=Blue]<meta http-equiv="content-type" content="text/html; charset=utf-8" />[/COLOR]
<title>Tom Hatley, Heritage & Natural Resources Consulting – About</title>
<link rel="stylesheet" href="http://tomhatley.com/wp-content/themes/Tom_Hatley/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://tomhatley.com/feed/" />
<link rel="pingback" href="http://tomhatley.com/xmlrpc.php" />
<meta name="generator" content="WordPress 3.0" /> <!-- leave this for stats -->
<link rel="alternate" type="application/rss+xml" title="Tom Hatley, Heritage & Natural Resources Consulting » About Comments Feed" href="http://tomhatley.com/about/feed/" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://tomhatley.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://tomhatley.com/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Tom Hatley, Heritage & Natural Resources Consulting' href='http://tomhatley.com/' />
<link rel='next' title='Home' href='http://tomhatley.com/' />
<meta name="generator" content="WordPress 3.0" />
<link rel='canonical' href='http://tomhatley.com/about/' />
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
[COLOR=Red]<meta http-equiv="Content-Type" content="text/html; charset=utf-8">[/COLOR]
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
You also have some issues with your alt tag in the header image. You closed it with at quotation mark in the middle of the alt text and you are missing the ampersand - &
Also realize that you are in HTML 4.01 Strict doctype and you are not required to close your img and hr tags.
(scroll all the way to the right and look for red)
<div id="inner">
<img src="http://tomhatley.com/wp-content/themes/Tom_Hatley/images/header-hr.jpg" width="374" height="130" alt=[SIZE=3][B][COLOR=Blue]"[/COLOR][/B][/SIZE]Tom Hatley, [B][COLOR=Red]"[/COLOR][/B]Heritage [B][COLOR=Red]&[/COLOR][/B] Natural Resources Consulting[SIZE=3][B][COLOR=Blue]"[/COLOR][/B][/SIZE] class="header" [B][COLOR=Red]/[/COLOR][/B]>
<div class="hr"><hr [B][COLOR=Red]/[/COLOR][/B]></div>
I always like to set the class on my images before the source so I can always see right away if there is a class associated with it. If the class is at the very end it can be overlooked very easily and make the styles difficult to track down.
If you look back at my pages you will see that I corrected all those things I just mentioned.
Hi Karen,
The problem is that clearfloat div as I mentioned in post#47.
Here is what was happening:
1) The #left column is actually nested in the #inner div along with the #right column. It is shifted left with a negative margin to locate it in #inner’s left margin. That is what makes the equal height columns.
2) Even though it is shifted left everything in the #right column still sees it as a sibling float (which it is). Now when you set clear:both/left on anything in the unfloated #right column it is going to drop below the #left float.
3) You had a 400px bottom margin on the #left #nav menu, and then add the bottom padding for the left column which was there for the AP’d bottom textbox and you get a lot of space that your clearing divs were dropping below.
That was the cause of your problems, I don’t think you really had a good understanding of the basic layout and that is what caused the confusion. Now that you are getting further into the pages and your CSS file is growing it is making things even more complicated for you.
Here is the projects page with the table gone and set up as a simple UL.
http://www.css-lab.com/test/sculley/projects.html
Here is the home page
http://www.css-lab.com/test/sculley/index1.html
And here are all the revised files that I am working with
http://www.css-lab.com/test/sculley/
Now I had removed that 400px bottom margin on your main nav in the left column a long time ago. You were doing that to push the search box down. The problem with that though was that it could wind up in the middle of the left column if there are pages that have a LOT of content in the #right column.
I have positioned the search box just like we did to the bottom textbox. That is, I have AP’d it directly above your textbox. In doing that now we have to go back and add some more bottom padding to the #left column to keep it from sliding under those AP’d boxes. Now your search box will stay at the bottom of the left column at all times and you will not have to depend on the bottom margin of the main nav to position it.
I would suggest you look through the html VERY closely on those links above. You are still wrapping divs around all your ULs’. I have not been doing that, I have been setting ID’s on my UL’s when they get specific styling. I don’t having ANY clearing divs in my html either, they are not needed.
Here is what I have for the main nav in the left column for all pages. You will see all the styles for #nav in the CSS.
<div id="left">
[COLOR=Blue]<ul id="nav"> [/COLOR]
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects/Clients</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Contact</a></li>
[COLOR=Blue]</ul>[/COLOR]
</div>
Here is what I have for the Images in the #right column of the Projects page. (where you have a table currently)
<div id="right">
<h1>Projects and Clients</h1>
[COLOR=Blue]<ul id="projects">[/COLOR]
<li>
<a href="#projects1.jpg">
<img src="images/projects1.jpg" alt="" title="projects1" width="105" height="97">
</a>
New York City Water Supply System
</li>
<li>
<a href="#projects2.jpg">
<img src="images/projects2.jpg" alt="" title="projects2" width="104" height="96">
</a>
Land Trust for the Little Tennessee
</li>
<li>
<a href="#projects3.gif">
<img src="images/projects3.gif" alt="" title="projects3" width="103" height="98">
</a>
Partnership-based Tribal and University Programs
</li>
<li>
<a href="#projects4.jpg">
<img src="images/projects4.jpg" alt="" title="projects4" width="103" height="97">
</a>
Family Farm in Central North Carolina
</li>
[COLOR=Blue]</ul>[/COLOR]
</div>
I have also reworked your #search div and got rid of the UL that only had one list item in order to wrap your form elements in a block element. A simple div does the trick just fine. You can also use the label element to replace the h2 you were using for the “Search” Text.
[COLOR=Blue]<div id="search">[/COLOR]
<form method="get" id="searchform" action="/index.php">
[COLOR=Blue]<div>[/COLOR]
<label>Search</label>
<input type="text" name="s" id="s" value="">
<input type="submit" id="searchsubmit" value="Go">
[COLOR=Blue]</div>[/COLOR]
</form>
[COLOR=Blue]</div>[/COLOR]
One other thing, I set all your typography styles and other resets at the top of the CSS.
http://www.css-lab.com/test/sculley/css/screen.css
That way you can overwrite them in the cascade when you need to make changes on specific pages or elements. Just study through my CSS and be sure to view the page source of my html files since it is not the same as yours. They are leaner since I removed all unnecessary divs and empty clearing divs.
I hope that helps clear things up for you.
I didn’t mean to chew you out earlier in this thread, looking back I see where I got a little frustrated with you. It looks like you are still struggling with floats to me though. That might be what you want to focus your css skills on. I think you would have recognized what was happening if you had a better understanding of floats.
Okay, that’s obvious. I’m embarrassed.
Jason I don’t want to take Karen’s thread completely off topic since the code I was using is NOT having any of the problems related to the test case.
I DO want to hear you out and I am not turning a deaf ear to all that you have said. I would like for you to start another thread since I think that this line-height subject needs a dedicated thread of it’s own as it seems to be the cause of the problems. Maybe call it “X-Browser Line Height Unreliability”.
Along with many other people around here I have always used line-height as a simple multiplier and it never caused any major issues with me.
100%/1.4 = line-height:140% as I always understood it
As far as the OS is concerned, I think that is why I am not able to reproduce your screenshot. I am using XP at the moment and I did change the font to 85%/140% while even changing my dpi to 120 (I know that is what you use) and I still could not reproduce the rounding error. I am going to guess your screenshot was from Vista?
Now, as far as that test case is concerned it is just that “a test case”. I have already said I would not even consider depending on em heights to line up on a live site. Heck even all other browsers were doing the same thing as your FF3 screenshot so it’s not just gecko. That would be enough to keep me from using it.
Ray, when I made your changes to the site (one by one so not sure which one did it b/c I was checking the home page as I made each change), this page dropped the three bottom images in the right section below the search box. My code was (but I changed it to the table b/c I couldn’t figure out the problem and needed it to look right):
<h1>Projects/Clients<h1>
<a href="http://tomhatley.com/wp-content/uploads/2010/07/projects1.jpg"><img src="http://tomhatley.com/wp-content/uploads/2010/07/projects1.jpg" alt="Natural Resources Consulting 1" title="projects1" width="105" height="97" class="floatLeft" /></a>
<div class="clearfloat">
<p>New York City Water Supply System</p>
....and so on with three images using the clearfloat after each image and then the text.
It was working fine until I changed something. I did keep my floats in the CSS file.
If you need me to change the code back to the way it was with the problem, I can do that.
HAVE FUN restarting Oopera everytime you want to increase your font-size since they don’t offer Zoom Text Only!
One of the items on my list of Why I Don’t Use Opera As My Main Browser. I hate zoom with a passion. HATE.
That or I’m just listening to too much Laibach.
Well as far as my example in post#39 is concerned there is no chance for float drop there because only the sidebar is floated. The main content div on the right is a fluid width block with overflow:hidden on it to keep it from sliding under the float.
No 1px overlaps or float drops there are even possible with it and there are not any stacked divs with oddball heights that need to sit next to and line up with a float of their combined oddball heights. The odds of your imaginary condition ever happening like that in a live site are very rare, and to quote you: “I would chunk it and start over” if there were. 
As far as your complaint about gecko you must be referring to some older versions because I don’t get any float drop in FF3.6.3 with this test case.
Float Test: Em Dimension Rounding
Are you referring to FF2 and earlier?
Kind of like how three 1.3em tall elements next to a 3.9em tall float has a random chance of not ending up the same total height. QUALITY.
Ironically FF3 and IE8 were the only ones that passed that test. Of course I only get Smallest-Largest with IE8 but they all stay constant like FF3. All other browsers give the random chance that you mentioned.
HAVE FUN restarting Oopera everytime you want to increase your font-size since they don’t offer Zoom Text Only!
It’s the only way you can run the test case above properly.
Wow. It gets even more complicated. Sounds like elastic sites are just too complicated.?
Which always seems like an attractive idea, until you discover that firefox and other gecko based browsers can be total DIMWITS about calculating anything EM based the same way twice in a row – so using EM for side columns ends up all screwy depending on browser width and centering. Nothing like having float drop or oddball 1px overlaps because gecko developers don’t round off or throw away fractions.
Kind of like how three 1.3em tall elements next to a 3.9em tall float has a random chance of not ending up the same total height. QUALITY.
Wow, thanks Ray. You’re right. Very confused! I actually already converted that file (before you corrected it) into WordPress and it’s now here. Sorry about that. Should have posted that last night before I signed off for bed but I think it’s exactly the same or very close. I’m sure I can look at your changes and transfer them over.
Hi Karen,
I think I like it better with the max-width set at % and the width set in em.
That allows the #wrapper to grow three times (3 text zooms) before the sidebar starts scaling independent of the wrapper.
The link in post#39 has been updated with these changes.
I keep my default browser font-size set at 16 in FF and the results I mentioned above are in relation to that. Without a text-zoom the page is appx. 864px wide when it loads for me. Going by that I set IE6 at a defined width of 860px.
You could use an expression or a script to give IE6 min-max widths but that is up to you.
#wrapper {
[COLOR=Blue]width:54em;
max-width:98%;
min-width:700px;[/COLOR]
margin:20px auto 0;
background:#005D29;/*this is the left column color*/
position:relative; /*set as containing block for absolute textbox div*/
}
* html #wrapper {[COLOR=Blue]width:860px;[/COLOR]}/*IE6 does not support min-max width*/
I know I “should” know but I really don’t understand most of what you did for the set up and don’t even understand the 100% width. I probably should have just stuck with the fixed layout. I’ve taken a lot of courses but some things stick in and some don’t. This fluid stuff is confusing and pretty new to me even though one of the courses I took focused on it. I’m taking the sitepoint CSS course right now too.
This fluid stuff is confusing and pretty new to me even though one of the courses I took focused on it.
I kinda figured you were having trouble with it, I found some other stuff that just didn’t add up either.
The bottom textbox div had content spilling out of it because you were still using my demo height on it. A dark BG color for testing shows what is going on.
I am going through it right now and cleaning it up some. The text in the right column under each of the h2’s really looks like list items to me. You were using <br> tags in the <p> to drop to new lines when those new lines are really subject items.
Anyway, I’ll get the right column set up with paddings for you. You know, you can just nest an inner div for the padding but I really don’t like doing that since it can be done without an extra div.
I’m taking the sitepoint CSS course right now too.
That’s good, I think you’ll do alright once you come to terms with things like the box model and other basic stuff.
Give me a little bit and I’ll post the repaired code.
Okay Karen, I made a lot of changes and there is more that could probably be done. The css/html have been reworked and the css is now called screen.css with that test page below.
(I have a robots.txt file in that “test” folder so it should be safe from google)
http://www.css-lab.com/test/sculley/test.html
http://www.css-lab.com/test/sculley/
I set the text in the right column as list items as I mentioned above, it just seems to be a better solution than “p” tags with line breaks.
I also set your sidebar and bottom textbox in em widths, even though the textbox height was set in em it was still spilling text on zoom. The em width keeps the text contained.
While I was at it I set the #wrapper max-width at 56em so you get the full elastic effect when the sidebar grows.
I hope this doesn’t confuse you even more but if you want to learn about fluid and elastic layouts you may as well jump on in and get your feet wet. One thing to consider is that font-size scaling with ems can get confusing too.