Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS - Elastic div, text and picture alignment

Status
Not open for further replies.
cmayo

cmayo

MIS
Apr 23, 2001
159
US
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?

q6o87dc
 
Sort by date Sort by votes
I'm trying to use CSS for a layout that would be a piece of cake using tables,
Click to expand...

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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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="[URL unfurl="true"]http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"[/URL] />
<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
| Marketing and Creative Services
 
Upvote 0 Downvote
Vertical centering is an advanced trick and usually involves some type of JQUERY,
Click to expand...


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
 
Upvote 0 Downvote
@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.

css_issue_3.gif
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
| Marketing and Creative Services
 
Upvote 0 Downvote
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: 
[b][COLOR=#0000FF]<style[/color][/b] [COLOR=#009900]type[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text/css"[/color][b][COLOR=#0000FF]>[/color][/b]
html,body
{
[tab]width:100%;
}
div.stretcher
{
[tab]display: block;
[tab]width:100%;
[tab]background:#464646;
[tab]overflow:hidden;
[tab]margin:0;
[tab]padding: 0; 
[tab]text-align: center;
[tab]
[tab]}

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

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

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
 
Upvote 0 Downvote
@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.
 
Upvote 0 Downvote
darryncooke said:
Except using a table for non tabular purposes in web development is a no no.
Click to expand...

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.
 
Upvote 0 Downvote
your example is only of inline, this does not work with block level
Click to expand...

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"


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

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
 
Upvote 0 Downvote

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
| Marketing and Creative Services
 
Upvote 0 Downvote

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

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
 
Upvote 0 Downvote
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: 
[b][COLOR=#0000FF]function[/color][/b] [b][COLOR=#000000]centerText[/color][/b][COLOR=#990000]()[/color]
[COLOR=#FF0000]{[/color]
[tab][b][COLOR=#0000FF]var[/color][/b] theDiv [COLOR=#990000]=[/color] document[COLOR=#990000].[/color][b][COLOR=#000000]getElementById[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'theDiv'[/color][COLOR=#990000]);[/color]
[tab][b][COLOR=#0000FF]var[/color][/b] theHeight [COLOR=#990000]=[/color] theDiv[COLOR=#990000].[/color]scrollHeight[COLOR=#990000];[/color]
[tab][b][COLOR=#0000FF]var[/color][/b] children [COLOR=#990000]=[/color] theDiv[COLOR=#990000].[/color][b][COLOR=#000000]getElementsByTagName[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'p'[/color][COLOR=#990000]);[/color]
[tab][b][COLOR=#0000FF]var[/color][/b] theP [COLOR=#990000]=[/color] children[COLOR=#990000][[/color][COLOR=#993399]0[/color][COLOR=#990000]];[/color]
[tab][b][COLOR=#0000FF]var[/color][/b] pHeight [COLOR=#990000]=[/color] theP[COLOR=#990000].[/color]scrollHeight[COLOR=#990000];[/color]
[tab][b][COLOR=#0000FF]var[/color][/b] topMargin [COLOR=#990000]=[/color] [COLOR=#990000]([/color]theHeight [COLOR=#990000]/[/color] [COLOR=#993399]2[/color][COLOR=#990000])[/color] [COLOR=#990000]-[/color] [COLOR=#990000]([/color]pHeight [COLOR=#990000]/[/color] [COLOR=#993399]2[/color][COLOR=#990000]);[/color]
[tab]theP[COLOR=#990000].[/color]style[COLOR=#990000].[/color]marginTop [COLOR=#990000]=[/color] topMargin [COLOR=#990000]+[/color] [COLOR=#FF0000]"px"[/color][COLOR=#990000];[/color]
[COLOR=#FF0000]}[/color]

----------------------------------
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
 
Upvote 0 Downvote
Even WHEN the OP specifies the container should adjust to the height of the image??
Click to expand...

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
| Marketing and Creative Services
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
653
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
396
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
336
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
264
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
107
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top