Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Vertical align to bottom of floating div

Posted on 2010-08-19
8
Medium Priority
?
842 Views
Last Modified: 2013-11-19
Referencing the attached image, any ideas about how to achieve this layout using floats (rather than tables)?

The part that's giving me trouble is the bottom-left set of links, that should be aligned to the bottom of the container.  Also, the width of the container is not fixed - it shouldn't have width specified at all, and expand to fit it's contents.

I'm not worried at all about fonts, borders, padding, colors, etc, just trying to achieve the attached macro concept using CSS, best-practices and w/out tables.

TYIA
ee-layout-sample.jpg
0
Comment
Question by:moagrius
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 2

Expert Comment

by:goducks
ID: 33481359
I would start by building a DIV container for the entire thing, then start splitting up your inner areas (links and image) into DIV blocks.

The outer container should have a style="position: relative;" set to it.  The inner DIV's should all be style="position: absolute;" with positioning from left, right, top, bottom accordingly.

For your example, the lower left link should have style="position: absolute; left: 0px; bottom: 0px;" and that should get you going with the rest.
0
 
LVL 19

Author Comment

by:moagrius
ID: 33481389
the problem i ran into with absolute positioning is that i don't know the widths of the columns.

e.g., in the left-most column, the text of a link might be as short as "bob" or as long as "lorem ipsum dolor sit ahmet".  the image should appear to the right of this column, and again i won't know the width, and the final column (right-most) should appear to the right of that.  with absolute positioning, i'd need to pre-plot those positions - which is impossible.  am i missing something?
0
 
LVL 2

Expert Comment

by:goducks
ID: 33481771
What if you set a predefined width to the div's?  I mean, you will need to limit it at some point so the text doesn't wrap or extend over the graphic.  If you float all your div's and give them all display: inline, you should be able to do this.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 19

Author Comment

by:moagrius
ID: 33481856
the left column needs to expand to fit the links.  the middle column (image) will begin after the left column, and the right column will be after the image column.

i can't define the width of the columns (except the right-most) - all content is dynamically generated.  a link might be a single character of a hundred.  the image might be 50px or 500px.  the description might have just a title or several hundred words.

what i'm describing is easily achieved using tables, and sizes + positions appropriately, but i want to do it with floating divs, not tables.

in the attached example (using tables), all the above requirements are met - despite the size of the links, the size of the image, or the length of the description.

thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" > 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="robots" content="noindex, nofollow" />
	<title>Title</title>
	
	<style type="text/css">
		td {
			vertical-align : top;
		}
		td.links {
			text-align : right;
		}
		td.links.bottom {
			vertical-align : bottom;
		}
		td.description {
			width : 150px;
		}
	</style>
	
</head>

<body>

<table>

	<tr>
		<td class="links">
			<a href="#">Link</a>
			<br />
			<a href="#">Another Link</a>
		</td>
		<td rowspan="2">
			<img src="http://static.howstuffworks.com/gif/code-breakers-1.jpg" />
		</td>
		<td class="description" rowspan="2">
			<h1>Title</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</td>
	</tr>

	<tr>
		<td class="bottom links">
			<a href="#">Link</a>
			<br />
			<a href="#">Another Link</a>
		</td>
	</tr>

</table>

</body>
</html>

Open in new window

0
 
LVL 2

Expert Comment

by:goducks
ID: 33481916
Ok... (not going to look at that table example - I hate em now that I use DIV's exclusively)... here's how I would do it.  But first, some rules:

1.  Column width is not controlled.  Horizontal scrolling must be allowed?
2.  Columns must expand based on their content.
3.  Wrapping or overlapping is not allowed.

Knowing those rules, this is what I would do (sorry, you'll need to do the dirty work, but I'll explain most).

1.  Create three div wrappers - these are your columns.  The wrappers should have the following style info (floating might be an option too):
style="position: relative; display: inline;"
2.  Don't get caught setting heights or widths in the column wrappers!

LEFTMOST COLUMN:
1.  The left most column is a wrapper for your two text items.
2.  Create two div's inside of this column.  The first div is your top link.  The bottom div is your bottom link(s).  Each div should have the following style info:
style="position: absolute; width: 100%; display: inline; text-alignment: right; left: 0px;"
3.  The top div in this column should have the extra style info:
style="top: 0px;"
4.  The bottom div in this column should have the extra style info:
style="bottom: 0px;"

MIDDLE COLUMN:
1.  This one is easy.  Create one div inside this column to hold your image.  The div should have the following style info:
style="position: absolute; top: 0px; left: 0px;"

RIGHT COLUMN:
1.  This column should also only have one div with the following style info:
style="position: absolute; top: 0px; left: 0px; width: 150px;"
2.  Your text would be embedded in this div.

That should do the trick.
0
 
LVL 19

Author Comment

by:moagrius
ID: 33482068
hmm thanks for the reply, but that won't work for several reasons.  with absolute positioning set up like that, they'll all appear on top of each other.  also, not sure why you're using display inline with absolute positioning, since once an element is positioned absolutely, it's taken out of the standard page flow so display settings no longer matter.  also, it's not valid to have block level elements within inline elements, so using display:inline would disallow anything like lists or paragraphs...

EDIT:  just to make sure, i went ahead and wrote it up as described.  my initial presumptions were correct - all content appears top left, each layer over top of the previous.

thanks anyways
0
 
LVL 19

Author Comment

by:moagrius
ID: 33483776
got it.

the solution is:

container div with overflow:auto to clear floating contents.

within container, add a div for bottom-left link list with position: absolute, bottom : 0px

within that also have 3 columns with standard floats containing top links, image, and description
0
 
LVL 2

Accepted Solution

by:
goducks earned 2000 total points
ID: 33486919
You're right, using inline was a miss.  And none of the other stuff I said helped?  Really?
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question