473,841 Members | 1,790 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How do i place text at the bottom of a div ?

As obviously vertical allign is not meant to do this, what are my
options ?
Jul 21 '05 #1
8 26520
levski <de************ *********@xs4al l.nl> wrote:
As obviously vertical allign is not meant to do this, what are my
options ?


Presuming that the div has a fixed height (or preferably a fluid
height and min-height)....

display: table-cell; vertical-align: bottom; applied to the div (Not
supported by IE)

position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)

Apply padding-top to the div to move content downwards (not perfect
and you need to guess the value of the padding as you don't know for
sure how big the text will be).

There may be other solutions depending on the full details of your
design.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 21 '05 #2
> position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)


I was planning to use this solution on my website, but I was unaware of
any problems with this method. If you would, please elaborate on why
this solution is risky, and what sort of problems it might lead to.

Thanks,

Don
Jul 21 '05 #3
Don G wrote:
position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)

I was planning to use this solution on my website, but I was unaware of
any problems with this method. If you would, please elaborate on why
this solution is risky, and what sort of problems it might lead to.

Thanks,

Don

experience learns us that nested positioning easily triggers bugs in IE

but .. sometimes it works :)
Jul 21 '05 #4
Don G wrote:
position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)


I was planning to use this solution on my website, but I was unaware of
any problems with this method.


Bottom positioning is quirky in some browsers, though I don't have a
list handy at the moment. Broken browsers may position at the bottom of
the viewport rather than the bottom of the container.

If you use this method, I suggest you do extra testing.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #5
In article <gb************ *************** *****@4ax.com>, Steve Pugh
<st***@pugh.net > wrote:
levski <de************ *********@xs4al l.nl> wrote:
As obviously vertical allign is not meant to do this, what are my
options ?


Presuming that the div has a fixed height (or preferably a fluid
height and min-height)....

display: table-cell; vertical-align: bottom; applied to the div (Not
supported by IE)

position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)

Apply padding-top to the div to move content downwards (not perfect
and you need to guess the value of the padding as you don't know for
sure how big the text will be).

There may be other solutions depending on the full details of your
design.

Steve


Thanks for your swift reply, it was indeed a fixed size div, I alread
did what you proposed, positioning a container absolute within the
containing relative div. Like this:
http://www.e-psychiater.nl/testsite/...sychiater.html
What I don't understand are two things:
1. the containing element is 90px high and the fontsize is 48px, so
you would think I need a top-padding of 90-48=42 px ?
WRONG: I have to use 45px, why ?
2. What is causing the space in front of the P from Psychiater, I have
to position the container around the text -3px to the left ?
Thanks for the display table-cell, but I have to be IE compliant 8-(
Detlef
Jul 21 '05 #6
Don G <ma******@yahoo .com> wrote:
position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)


I was planning to use this solution on my website, but I was unaware of
any problems with this method. If you would, please elaborate on why
this solution is risky, and what sort of problems it might lead to.


Others have mentioned the bugs that some browsers have with
positioning in general and bottom in particular.

But even when working perfectly there may be problems. You can't know
how big the text will be so you can't know how tall the positioned
element will be. As the positioned element has been taken out of the
document flow it doesn't contribute to div's height. So the top of the
text may well end up spilling out the top of the div and overlapping
any elements that preceeded the div. If the div is near the top of the
page the text may even extend off the top of the browser window.

This sort of thing can happen whenever absolute positioning is used
but seems to happen more often when absolute positioning is used as a
substitute for IE's lack of support for half the decent stuff in CSS2.
:-(

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 21 '05 #7
levski <le****@neverle vskiland.com> wrote:
Steve Pugh <st***@pugh.net > wrote:
levski <de************ *********@xs4al l.nl> wrote:
>As obviously vertical allign is not meant to do this, what are my
>options ?
Presuming that the div has a fixed height (or preferably a fluid
height and min-height)....

position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)


Thanks for your swift reply, it was indeed a fixed size div, I alread
did what you proposed, positioning a container absolute within the
containing relative div. Like this:
http://www.e-psychiater.nl/testsite/...sychiater.html
What I don't understand are two things:
1. the containing element is 90px high and the fontsize is 48px, so
you would think I need a top-padding of 90-48=42 px ?
WRONG: I have to use 45px, why ?


The line-height is normally a aboit 10-20% taller than the font-size.

What's more, in your case you want the baseline of the font to be at
the bottom of the div, not the bottom of the font.
2. What is causing the space in front of the P from Psychiater,


Between the hyphen and P? Or do you mean before the E?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 21 '05 #8
In article <f9************ *************** *****@4ax.com>, Steve Pugh
<st***@pugh.net > wrote:

I mean the whitespace before the "P", that is now not visible as I have
applied -3px left to the div container.
I already tried to set the margin and padding to 0px to make sure the
text would start right at the beginning of the div, but I have a
gutfeeling it has to do with the "em"box ?
Or do you mean before the E?

Jul 21 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
5115
by: Terry | last post by:
Trying my hand at table-less design. Looking for an XHTML 1.0 strict, CSS2 compliant solution. Here's the result I'm looking for: Div I: Some header text DIV II: Some text and a form which should be vertically centered Div III: Rest of content DIV II is the one I cannot resolve. It should span the whole page width, no matter the size of its content. 'Text A' should be aligned to the left, 'Form B' should be aligned to the right but...
3
48427
by: Michael Goldbach | last post by:
Hi, I'm currently encountering a problem with vertical alignment of text in a DIV that drives me mad. I'm having a DIV with a fixed height (say 50px) which contains some text from which I don't know if it will be rendered in one line or two. But that text should absolutely be bottom-aligned since the space between the bottom border-line and the text must always be the same and
14
2689
by: Viken Karaguesian | last post by:
Hello all, It stinks being a newbie! One thing that I'm not sure about with CSS is: where is the "proper" place to put font attibutes? This has me a little confused. Take the below style sheet (which is a work in progress) as an example. If I don't put the font attributes in the <body> <p> and <td> tags, the font will not appear the way I want (when I work in FrontPage, anyway). It doesn't seem to be enough to put the font attributes in...
4
8732
by: Tom Cat | last post by:
Hi, I'm trying to move my site from table layout to div/span CSS layout. I have a chunk of text and images within a div tag. At the end of that chunk, but still within the div tag, is an HR. For layout, the div is min-height:250px tall, which means if you've got standard settings, the text and images end about 50px before the end of the div. Of course with HR 50px before the end if the div, it looks funny as the next element looks...
2
2112
by: george.leithead | last post by:
Hi all, I have a very strange problem! In following Web page (which is generated from a CMS System), the navigation to the left 'dissapears' when you roll the mouse over the links? It does not do this in all browsers either. I have found it to happen in IE 7 and the latest patched IE 6. I have tried to find out the reason, but keep finding strange behaviour! You will see at the bottom of the HTML, I have a comment. If you follow...
8
3369
by: Edward | last post by:
I used to do this all the time in HTML-table layouting. How do I do this in CSS? -------------------------------------------------- <table width="400px"> <tr> <td bgcolor="beige">one line of text</td> </tr> <tr> <td bgcolor="#eeeeee" align="center">this is another line of text</td>
9
5138
panachepad
by: panachepad | last post by:
I arrived here from a websearch that found this thread from your archives: http://www.thescripts.com/forum/thread97805.html It helped me to understand that I am on the right track, but I still have one problem surrounding this issue. I am trying to make a <div> block that contains a) a link b) an arrow or an image of an arrow c) another link d) another link floated off to the far right All of this must be on one horizontal line. The...
4
7822
by: TheCeej | last post by:
I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm pretty sure I know what the problem is already. I just don't know how to fix it. I'd be very grateful of any help. I'll post what I'm trying to do, what keeps happening, what I believe the problem is, the link to my page and the css, and things...
3
1414
by: qxyuestc | last post by:
#!/usr/bin/env python import sys import os from tkinter import * def callback(self): #int this snippet, all menu entries use the same callback... print("callback")
0
9709
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10934
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10668
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10303
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9446
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
7025
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5694
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4498
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3140
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.