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 biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

vartical align = bottom with CSS?!

Status
Not open for further replies.
fuli42

fuli42

Technical User
Jul 9, 2002
74
HU
Hello!

Could anyone please help me how align a text, or image to the bottom of a DIV?
say:
<div>hello</div>
how do you align 'hello' to the bottom of the div, that is say, 40 pixels high?
I have been using CSS for some time now, I am using TopStyle to define the styles, but the vertical-align style just does not work...

Thank you,
 
Sort by date Sort by votes
Hi,

Have you tried <DIV ALIGN=&quot;BOTTOM&quot;> or <DIV ALIGN=&quot;BASELINE&quot;>

Hope this helps!
greenjumpy.gif
NATE
design@spyderix-designz.com
 
Upvote 0 Downvote
Does it have to be in css using vertical-align or can it be in the div itself, like this:

<div Valign=&quot;bottom&quot; style=&quot;width:400px;height:40px;&quot;>this is a div!</div>


Here is how vertical-align is supposed to work ;-)


I don't think that was meant for who we are using it. Here is a different way if you have to use css because that wasn't working for me, but I'd use the valign above.

<div style=&quot;position:absolute;width:500px;height:300px;background-color:blue;&quot;>
<span style=&quot;position:absolute;bottom:0px;background-color:yellow;&quot;>this is a div!</span>
</div>

Rick if(($question==&quot;has been bugging me&quot;
AND $answer==&quot;fixed the problem&quot;) OR $answer==&quot;really good post&quot;){
print(&quot;Star&quot;);
}else{
print(&quot;Thanks.&quot;);
}
 
Upvote 0 Downvote
are you trying to do something along these lines
<DIV STYLE=&quot;display: block; position: absolute; bottom: 40px;&quot;>text</DIV> Was it something I said?
admin@onpntwebdesigns.com
 
Upvote 0 Downvote
Thank you!

Here is a part of the code:

<STYLE TYPE=&quot;text/css&quot;>
.bottomalign {
width : 200px;
height : 60px;
border : solid;
vertical-align : bottom;
}
</STYLE>
<body>
<div class=&quot;bottomalign&quot;>text to be aligned</div>
</body>

the text remains on top, no matter how I set the vertical-align property.
The goal is to align the text to bottom of the box.
THanks
 
Upvote 0 Downvote
use

[tt]bottom: 0px;[/tt]

instead of vertical-align : bottom; (it doesn't work as expected).
It works in IE5 and Mozilla but doesn't work in Opera.
 
Upvote 0 Downvote
Sorry,
I tried it, but it didn't work (on IE 5.0).
I want to avoid using tables to align the text, but is at all possible with CSS?!

THanks
 
Upvote 0 Downvote
Not too elegant, but I could reach a similar effect by setting the margin-top: 30px;

Anybody has a better idea?
Fuli42
 
Upvote 0 Downvote
Well, I forgot to mention the following.
CSS layout is not the same as tables layout. There are no universal solutions there, and every new attempt is like a challenge.
Almost every thing in it depends on other settings on your page. For example, I offered using &quot;bottom: 0px&quot; after I managed to achieve the desired behavior on some of my test pages. But it's not 100% safe to propose this (or another) solution if you don't see the code where it's going to be implemented.

All this brings doubts that CSS layout is useful in real projects with complex layout (at least now). This, along with lots of browser compatibility problems, leaves CSS layout for experimental area only.
 
Upvote 0 Downvote
Thank you for the help.
For my page the top-margin / top-padding worked, because the size of the &quot;cells&quot; don't change.
I could have used tables, but in fact my goal was to do all the layout with CSS, as now I try to move from standard HTML to XHTML, and XML.
You have to COMPLETELY seperate page design layout from the content.

STarway: I am using TopStyle / HOmesite to write html. I couldn't find the &quot;bottom&quot; property in TopStyle. Did you mean margin-bottom, or something else?

Cheers,

Fuli42
 
Upvote 0 Downvote
Small point,

one thing I found helps is not to set margins or padding for divs where possible, or else leave them as 0. I never set padding or margins of a div to position the content of the div because you probably know some browsers will display this differently.

If you set the width and height of a div, setting padding and margins will ADD to the size, but not in all browsers!

I'd recommend setting up your divs just for page layout then to position your content i'd set the margins or padding of your <p>s or spans.

This make sense? I found it best this way.


É

endamcg-logo1b.gif

 
Upvote 0 Downvote
fuli42,
I mean exactly what I said, the &quot;bottom&quot; CSS property. Read here about it:
Also, using any editor for CSS (or anything else) learning purposes is not a good idea. You miss tons of useful information and get &quot;deformated&quot; view of the picture. Don't rely on them and think yourself.


cian,
Your comment about margins/paddings is good. I also found that you should avoid specifying values (different than zero) in divs that create main layuot blocks of the page.
You should do this for inner block-level elements that are nested inside &quot;layout&quot; blocks - this will help to avoid many layout problems.

Also, about spans - DON'T use them as content containers. It's against their nature. If you can do it in IE it doesn't mean that it should be this way.
<span> is an inline element and it shouldn't contain any formatting code.
That's the way it was designed.
 
Upvote 0 Downvote
Starway:
Thanks, now I understand. It's a CSS2 extension of the top, and bottom property.
Shouldn't it be wiser to use top:40px;, so that older browsers will display it the same? (if the container is 40pxs high?)
Anyway thanks for the info.
 
Upvote 0 Downvote
Yes, you can do it. But it will be fixed to the current container height. If you cannot predict it's height (for example, due to variable text size and it's amount), it will not work.

The whole point is to make similar to <td valign=bottom> so the bottom alignment doesn't change regardless things that may happen on your page. But as you see, it's not that simple to do...
 
Upvote 0 Downvote
Hi Starway:

&quot;about spans - DON'T use them as content containers&quot;

I cheat! :) I found some difficulties with CSS layout, putting two divs side by side as layout columns, should be easy to use float: left etc to position the divs but this layout sometimes breaks and the page layout falls apart. I thought using spans the columns might be &quot;more confortable&quot; sitting beside each other? Is this stupid or is there a better way?

Example::

---------header-----------
left col---content col----
---------footer-----------


É

endamcg-logo1b.gif

 
Upvote 0 Downvote
>>... Is this stupid or is there a better way?
Closer to first than to second :)

I already told why. It will not change anything but will make your code behave unpredictably.
Test your pages not in IE and you'll see what I mean. Or you can also use W3C validator - you'll get many unpleasant words about such <span> usage.

As I already said, there are no universal solutions here. Try, test, read articles about CSS/tableless layout - it's the only way.

Using [tt]float:[/tt] is a good idea (as well as [tt]clear:[/tt]), but remember that this will ruin page layout in NN4 completely. NN4 is not designed for CSS layout, but it is possible to make some simple ones there, therefore I warn you about it.
 
Upvote 0 Downvote
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
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
804
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
826
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
658
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
715
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top