473,225 Members | 1,317 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 software developers and data experts.

Text align within a div problem

37
Hi all,
I have a problem with aligning text within a div. I want the text to be aligned at the bottom of the div. What is wrong with his code:
Expand|Select|Wrap|Line Numbers
  1. <div style="height:150px; width:200px; line-height:150px; vertical-align:bottom; border:solid 1px red;">
  2. This text should apear at the bottom of the div!
  3. </div>
  4.  
Feb 11 '08 #1
11 2577
hsriat
1,654 Expert 1GB
Hi all,
I have a problem with aligning text within a div. I want the text to be aligned at the bottom of the div. What is wrong with his code:
Expand|Select|Wrap|Line Numbers
  1. <div style="height:150px; width:200px; line-height:150px; vertical-align:bottom; border:solid 1px red;">
  2. This text should apear at the bottom of the div!
  3. </div>
  4.  
there are two things...
1. You have applied line-height:150px => this will always keep 75 px on both sides of the text. So even if valign=bottom, it will leave 75 px below itself.
2. it doesn't seem to work with DIV, or even P,
try it with TABLE
Feb 11 '08 #2
mynkow
37
I dont care if I use line-heigth or not. I have to align the text at the bottom of the div. I MUST use div, not a table.
10x
Feb 11 '08 #3
Death Slaught
1,137 1GB
Try giving it padding.

Expand|Select|Wrap|Line Numbers
  1. div {
  2.   padding-top:120px;
  3. }
Hope it helps, Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Feb 11 '08 #4
mynkow
37
Yes, good answer. How can I miss that? I can if I am trying to do it with vertical-align. Thanks for the answer. So I have another question. In which situations should I use this sh*t vertical-align in divs?
Feb 11 '08 #5
Death Slaught
1,137 1GB
I've only seen vertical-align used in tables and used to fixed gaps between an image, and other elements. But here's a little information on it.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Feb 11 '08 #6
drhowarddrfine
7,435 Expert 4TB
vertical-align is an inline css property and for table cells. divs are block level so it doesn't work there. It's used to align inline text, images, etc. in relation to the baseline or, more specifially, the generated inline box.
Feb 11 '08 #7
drhowarddrfine
7,435 Expert 4TB
You need to put your text inside an element if you want to position it inside a div. Right now, the text is just part of the div, but if you properly put it in a <p>, as it should be, You could using positioning to place it anywhere inside that div without resorting to padding.
Feb 11 '08 #8
mynkow
37
You need to put your text inside an element if you want to position it inside a div. Right now, the text is just part of the div, but if you properly put it in a <p>, as it should be, You could using positioning to place it anywhere inside that div without resorting to padding.
Can you give me an example because I tried as you wrote but still no effect?

Expand|Select|Wrap|Line Numbers
  1. <div style="height:150px; width:200px;vertical-align:middle; border:solid 1px red;">
  2.         <p>text align test</p>
  3. </div>
Feb 14 '08 #9
You need to put your text inside an element if you want to position it inside a div. Right now, the text is just part of the div, but if you properly put it in a <p>, as it should be, You could using positioning to place it anywhere inside that div without resorting to padding.
I guess he drives at this,
[HTML]<div style="height:150px; width:200px;vertical-align:middle; border:solid 1px red; position:relative;">
<p style=" bottom:0px; position:absolute;">This text should apear at the bottom of the div!</p>[/HTML]

Hope it helps,
Rawan.
Feb 14 '08 #10
drhowarddrfine
7,435 Expert 4TB
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div{position:relative;height:200px;width:400px;out line:1px solid blue}
p{position:absolute;bottom:0}
</style>
</head>

<body>
<div>
<p>Hello</p>
</div>
</body>
</html>[/HTML]
Feb 14 '08 #11
mynkow
37
Thank you for the help!
Feb 18 '08 #12

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: Jonah Bishop | last post by:
I have a puzzling problem with centering text, and I'm hoping that someone here can help me out. First of all, let me state that I am using XHTML 1.0 Strict and CSS for all layout purposes (no...
7
by: Robert Nicholson | last post by:
So I've got one page where I have an image inside a DIV with text-align: center and the image is correctly centered in that block. Making me think that text-align will center the contents of a...
8
by: André Hänsel | last post by:
Hi! When I put a table into a table and try to align it right, it works in IE but not in Firefox. Simplest code to reproduce: <html> <body> <table style="width: 100%"> <tr>
4
by: sweep | last post by:
Hi there, I have a problem with some CSS I'm writing and I was looking for a little help. I have a nav bar at the top and left side of my page in CSS which work fine. The remaining space has a...
4
by: Steven Bethard | last post by:
I have some plain text data and some SGML markup for that text that I need to align. (The SGML doesn't maintain the original whitespace, so I have to do some alignment; I can't just calculate the...
7
by: programming | last post by:
Hi all, i have been having trouble with a login script that works on my windows machine, however when i upload it to the Unix server through VPN, the same script won't work! It won't parse...
1
by: plumba | last post by:
Hi all. I have a form which has a table and within the rows of the table are simple text input boxes. The ONLY problems with this is that when the form is posted (in text format) if the number of...
2
by: ismailc | last post by:
Hi, I need help please! I want to vertical align the text within a text box. I can set the vertical align of the text box but not the text. My text box has a style property of: style...
1
by: littlealex | last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS! In IE6 the text for the following page doesn't display properly - rather than being...
4
by: chazzy69 | last post by:
The problem is as follows, i am inputing text and images from another source via my php script, now when i try to display the text and images into a page of my own styling the text and images skewed...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.