INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

CSS - Elastic div, text and picture alignment

CSS - Elastic div, text and picture alignment

(OP)
I'm trying to use CSS for a layout that would be a piece of cake using tables, but is driving me crazy trying to do the same thing with CSS.

I want a wide, narrow rectangular div. I want an image aligned with the right edge and in the remaining horizontal space to the left, I want a block of text centered horizontally in the remaining space and centered vertically in the div. (see attached image)

Ideally, the div height would automatically stretch to the height of the image so I didn't have to explicitly set the div height to make it match the image.

Additionally the div would stretch horizontally when the layout stretched, with the image remaining aligned to the right edge of the div.

Any ideas?




RE: CSS - Elastic div, text and picture alignment

Quote:

I'm trying to use CSS for a layout that would be a piece of cake using tables,

So why not use a table for that part??

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: CSS - Elastic div, text and picture alignment

(OP)
I could use a table, I guess, but I'm trying to learn more about CSS and it's just frustrating that I can't figure this out... seems like it should be a pretty basic layout element, but it's sure turned out to be a pain in the neck.

RE: CSS - Elastic div, text and picture alignment

Vertical centering is an advanced trick and usually involves some type of JQUERY, unless you have a fixed dimension container with fixed text then it just comes down to manipulating the padding.

What you are trying to do it pretty simple

CODE

<!DOCTYPE html>
<html>
<head>
<style>
div {width:100%; height:200px;text-align:center;background-color:#cccccc;clear:both;padding-left:10px;}
img {float:right;margin-left:10px;}
p {text-align:center;width:100%;padding:10% 0 10px 0;}
</style>
</head>

<body>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
<p>This is text, I am text. I will be center aligned and blah blah blah. Now repeat after me I am some more gibberish and I do what I want.</p>
<br style="clear:both;" />
</div>
</body>
</html> 

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

RE: CSS - Elastic div, text and picture alignment

Quote:

Vertical centering is an advanced trick and usually involves some type of JQUERY,


It doesn't, you simply need to understand how the vertical-align property actually works.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: CSS - Elastic div, text and picture alignment

(OP)
@darryncooke: That's pretty cool and I appreciate the tip, but the vertical centering doesn't seem to work all that well. At some window widths it gets pretty close to being centered, but blows out pretty badly at extreme widths (below).

@ChrisHirst: I think that's pretty much what I was looking for, i.e. a way to make vertical-align work as expected. I read somewhere that vertical-align is applied to the parent element and not to the element being centered, but I still can't get it to work.



RE: CSS - Elastic div, text and picture alignment

Temporary link while I rebuild one of my sites.

But it's a guick reference to vertical-align.

welovecss.org/reference/css/vertical-align/

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: CSS - Elastic div, text and picture alignment

Chris I will respectfully disagree. When it comes to vertical alignment and centering using CSS there are many ways and methods to achieve it, all with caveats. There are methods using line heights, padding, negative margins, computational equations with fixed height containers, setting your display to table-cell etc. However the ONLY foolproof way, especially when using a fluid design, incorporates JQUERY to manually adjust the styling of your element you need center with the change in height of not only the container but also in your case the text element.

the simplest way for you is to enable a min-width for your containing div and a set width for your text element. Then just manipulate the padding as needed.

I also noticed I left a useless clear:both; in the DIV style. That's unnecessary.

@Christ --> your example is only of inline, this does not work with block level. He needs a block of text vertically aligned with an image and all contained within a set parameter. I know how vertical-align:center; works. It's not pretty, nor fun, and in this application your comparison is apples to oranges.

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

RE: CSS - Elastic div, text and picture alignment

I have to agree with Darryn, vertical-alignment is sadly not as straight forward as it should be.

The most direct way of doing it is if you know the height of your containing element. You can the approximate a centered text block using margins.

For instance in this example:

CODE -->

<style type="text/css">
html,body
{
    width:100%;
}
div.stretcher
{
    display: block;
    width:100%;
    background:#464646;
    overflow:hidden;
    margin:0;
    padding: 0; 
    text-align: center;
    
    }

div.stretcher p
{
    text-align:center;
    color:#ffffff;
    overflow: hidden;
    margin: 0;
    padding: 0;
    margin-top: 34px;
}

div.stretcher img
{
    margin:0;
    padding: 0; 
    float:right;
    background-color:#fefefe;
    width:128px;
}
</style>
</head>
<body>
<div class="stretcher">
<img src="Personal/images/User.png"><p>The Text should be center-aligned,<br> both horizontally and vertically <br> 
in the space not occupied by the image</p>
</div>
</body> 


This is the most universal approach I have found..

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: CSS - Elastic div, text and picture alignment

(OP)
@ChrisHirst: The reference you linked goes a long way in explaining why I've had such mixed results with vertical-align, i.e. it only works on inline elements. I'm not sure it'll help me with the project I'm working on, but I'm mainly doing this project to get a better understanding of CSS anyway so in that respect, I'm ahead of the game.

I've been looking at display:table-cell this afternoon where vertical-align works fine. That would probably work for the element in question, but the whole point of this exercise is to learn to lay out pages without using tables, and I don't really buy the argument that it's okay to use display:table-cell for non-tabular data because it's a CSS table.

Still, doing this with CSS doesn't really seem worth the trouble, especially when, as you originally suggested, I can plop an HTML table into that space in about two minutes and be done with it.

RE: CSS - Elastic div, text and picture alignment

Except using a table for non tabular purposes in web development is a no no.

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

RE: CSS - Elastic div, text and picture alignment

(OP)

Quote (darryncooke)

Except using a table for non tabular purposes in web development is a no no.

Which is why I've spent several hours trying to figure out a non-tabular solution but at this point, it seems my choices are to compromise the markup or compromise the layout. Or, as you've suggested, keep digging and find a way to script the dynamic behavior I'm looking for but really... it just seems like I'm expending a ridiculous amount of effort to create a stretchy, vertically-aligned, one-row, two columns table without using any table code.

The best answer for me, I think, is to use vacunita's example and settle for a fixed-height construct and use explicit top & bottom margins to produce my vertically-centered text block.

At any rate, thanks to all for the tips and suggestions. You've helped me advance my command of CSS, which was the whole point of the exercise in the first place.

RE: CSS - Elastic div, text and picture alignment

Quote:

your example is only of inline, this does not work with block level

Yes, as it would be, given that vertical-align only DOES work at inline level.

By the way my reply was in response to "can only be done with jQuery"


Quote:

I also noticed I left a useless clear:both; in the DIV style. That's unnecessary.

Well it was written about seven or eight years ago, when clearing elements were necessary to cope with certain crappy browsers of the day.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: CSS - Elastic div, text and picture alignment

http://www.hardcode.nl/archives_139/article_515-ve...

JQUERY for center vertical align.

Fixed height and padding is the simplest solution to manage, and it's usually the one I employ.

@ChrisHirst - my response was to the OP and JQUERY looked like the best (and only) solution based on his/her set parameter. If it was asked for a fixed dimension container then I would have said padding is the best bet.

Your response is the same one I give my less technically inclined clients/colleagues bigsmile.

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

RE: CSS - Elastic div, text and picture alignment


Quote:

Fixed height and padding is the simplest solution to manage, and it's usually the one I employ.

Even WHEN the OP specifies the container should adjust to the height of the image??

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: CSS - Elastic div, text and picture alignment

If you need to have it dynamically adjust, and don't mind using JS. Something like this should get you pretty close to having the text block centered. If you start from my example above without the margins:

CODE -->

function centerText()
{
    var theDiv = document.getElementById('theDiv');
    var theHeight = theDiv.scrollHeight;
    var children = theDiv.getElementsByTagName('p');
    var theP = children[0];
    var pHeight = theP.scrollHeight;
    var topMargin = (theHeight / 2) - (pHeight / 2);
    theP.style.marginTop = topMargin + "px";
} 

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: CSS - Elastic div, text and picture alignment

Quote:


Even WHEN the OP specifies the container should adjust to the height of the image??

No, that's why my suggestion was for JQUERY, and I stated that. Fixed dimensions is just the easiest to manage IMO. That was a statement in generality.

I feel that you feel offended by something I might have said earlier. If that's the case none was suggested.

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

RE: CSS - Elastic div, text and picture alignment

Nope, forums are all about debate and opinions.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: CSS - Elastic div, text and picture alignment

I find it amazing that we are now on CSS3; can create rounded corners and drop shadows and yet STILL vertical-align drives everyone nuts!

Incidentally does vertical-align work on 'inline-block' elements or only 'inline'?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close