Pushing two divs to the bottom of a parent

HTML & CSS
1

Hi there everyone!

I’ve done tons of Googling, but none of the Sitepoint threads or SE pages fixed my issue. The problem I’ve got is this:

http://schw.im/linkpics.html

I’m trying to get the “filed under” and “views” lines to push to the bottom of the row. I haven’t been able to figure out how to make this happen. Could someone point out what I’m doing wrong?

Thanks for your time!

2

Couple things I think you don’t understand (not to be insulting! Not intended.)

Position coordinates (top/right/bottom/left) only work on elements with the position property set to a value other than static. So fixed/absolute/relative. It does not work normally on regular elements.

You cannot set vertical-align on floated elements. It will do nothing.

Honestly the best way would be to just set those left/right column elements to position:absolute and throw it to the bottom. Put some padding on the parent so that the static in-flow content won’t rub up against it.

So do the following steps

  1. Set position:relative on that parent <td> (note that this technically might not work in the future. I won’t get into it now but you might be safe. I’d do it TBH

  2. Set your left column CSS to this

    .leftcolumn {
    position:absolute;
    left:120px;
    bottom: 0;
    }

  3. Make your right column CSS this

    .rightcolumn {
    position:absolute;
    right:0;
    bottom:0;
    }

Delete those random BR tags that you have in there. You can also remove that extra div with style=“width:100%;”. Why is that there? Your markup should reflect this.

    <td style="position: relative;">
      <div class="imgcontainer">
        <img src="test.png">
     </div>
    <div class="contentcontainer">
       <a href="http://schw.im/Pn" alt="The worst Nobel Prize ever awarded"><b>The worst Nobel Prize ever awarded</b></a> - SciShow explores the grim story of the lobotomy, the medical procedure that earned its inventor perhaps the most regrettable Nobel Prize in history.
      <div class="leftcolumn">
    	<p>Filed Under: <b>Science</b>, Health, Technology</p>
      </div>
      <div class="rightcolumn">
        <p><b>Views:</b> 2 <b>Comments:</b> 0</p>
      </div>
    </div>
  </td>

Note the TD only has the position:relative because I set it inline for testing.

3

Hi there Ryan, and thanks very much for your help. You’re absolutely right that my grasp of this is less than firm and I’m going to prove that right now.

I made the changes you stated and my front page looks super fantastic. However, I’ve messed something up in my stylesheet. When you look at a link page: http://schw.im/QB

You can see that my stylesheet seems to be flowing over the page. Searching the source, however, I can’t find the things that are printing on the page in it.

I’m scanning the stylesheet, but I can’t find what I’ve messed up. Is there any chance you see what I’ve done wrong?

4

I’d recommend validating your page.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fschw.im%2FQB&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Get the major errors worked out then we can go from there.

5

Could you give a screenshot of what you are seeing please? Not sure I 100% am seeing what you are seeing. I see a messed up page but perhaps I’m not understanding you fully. Screenshots help :slight_smile: .

6

Sorry, I took the screenie and forgot to include it:

The text you’re seeing on the screen that’s part of the css can’t be found in the page source.

7

I think my webdev addon is acting up. it’s showing up on the w3c page as well :smile:

8

Yeah…I think that’s just you. Clear your cache maybe? Do other browsers show that for you?

Either way, validate that page.

Also change your doctype to <!doctype html>

HTML4.01 transitional doctype (transitional in general) is supposed to be used as you’re transitioning your page from old code to new code. This is not applicable here.

9

Yeah from what you originally described, I wasn’t seeing that. A screwed up page, yes but not actual CSS declarations.

Glad you figured it out.

That doesn’t appear to be CSS rules. Just random HTML code.

10

Thanks very much for your help, Ryan.

I changed the doctype and it caused some issues in the page, so I really need to proceed through the validation process to fix all the stuff I’ve cobbled together.

Thanks so much for everything!

11

Ultimately it’s for the best.

You’re welcome.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.