16 replies [Last post]
Luke2000
Offline
Enthusiast
Last seen: 16 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

This should be a series of divs side by side with a 1px white border between. So far so good. I then want an image in each div that is aligned to the right and bottom. I can get it to go right (text-align: right;) but it wont go to the bottom, i tried vertical-align: bottom; but no joy. Any suggestions? Also, any ideas on how to stop the divs overlapping when the window is re-sized and made very narrow, i dont want to use float: left; because i want the divs to stay on the same row, side by side. Thankyou in advance, Luke.

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body { margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px; }

div.main1 { width: 20%;
background-color: #9afde0;
border: 1px solid #ffffff;
height: 250px;
text-align: right;
position: absolute;
top: 100px;
left: 0%; }

div.main2 { width: 20%;
background-color: #9afde0;
border: 1px solid #ffffff;
height: 250px;
text-align: right;
position: absolute;
top: 100px !important;
left: 20%; }

div.main3 { width: 20%;
background-color: #9afde0;
border: 1px solid #ffffff;
height: 250px;
text-align: right;
position: absolute;
top: 100px !important;
left: 40%; }

div.main4 { width: 20%;
background-color: #9afde0;
border: 1px solid #ffffff;
height: 250px;
text-align: right;
position: absolute;
top: 100px !important;
left: 60%; }

div.main5 { width: 20%;
background-color: #9afde0;
border: 1px solid #ffffff;
height: 250px;
text-align: right;
position: absolute;
top: 100px !important;
left: 80%; }

</style>
</head>
<body>
<div class="main1"><img src="graphics/knowledge.jpg" alt="#" width="150" height="150" /></div>
<div class="main2"><img src="graphics/technology.jpg" alt="#" width="150" height="150" /></div>
<div class="main3"><img src="graphics/insight.jpg" alt="#" width="150" height="150" /></div>
<div class="main4"><img src="graphics/equals.jpg" alt="#" width="150" height="150" /></div>
<div class="main5"><img src="graphics/effectivevisualsolutions.jpg" alt="#" width="150" height="150" /></div>
</body>
</html>

Luke2000
Offline
Enthusiast
Last seen: 16 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

UPDATE

I have resolved the problem of vertical-align by setting the height to line-height and vertical-align: baseline and then adding 100px padding to the top of the div. Know all I need to do is figure out a way to stop the divs (and pics) overlapping when the window is made narrower. (I do not want to use float though as the images MUST stay on the same row, side by side) Thankyou.

Luke2000
Offline
Enthusiast
Last seen: 16 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Doh!!!!!

Actually, that vertical alignment solution only works in IE. In FF or NN etc. it just adds another 100px padding to the top of the div and keeps a 100px padding at the bottom (even with padding-bottom: 0px; ) Please help me, I am getting desperate... lol.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 48 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

divs and vertical-align?

Lose the absolute positioning. Float the divs inside a container with the necessary width. Set the line-height equal to the div height and use vertical-align: bottom;.

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 18 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

divs and vertical-align?

How about this?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body { 
margin:0;
padding:0;
background-color:#fff;
}
ul, li {
margin:0;
padding:0;
}
ul {
float:left;
width:100%;
}
li {
float:left;
width:20%;
border-left: 1px solid #ffffff;
background-color: #9afde0;
position:relative;
height:250px;
margin-right:-2px;
display:inline;
}
li img {
position:absolute;
bottom:0;
right:0;
}
</style>
</head>
<body>
<ul>
<li><img src="wine.jpg" alt="#" width="150" height="150" /></li>
<li><img src="wine.jpg" alt="#" width="150" height="150" /></li>
<li><img src="wine.jpg" alt="#" width="150" height="150" /></li>
<li><img src="wine.jpg" alt="#" width="150" height="150" /></li>
<li><img src="wine.jpg" alt="#" width="150" height="150" /></li>
</ul>
</body>
</html>

Luke2000
Offline
Enthusiast
Last seen: 16 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Thankyou v much...

I am such a noob. I will try it out now, thankyou Laughing out loud

Luke2000
Offline
Enthusiast
Last seen: 16 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Thankyou BonRouge and Wofl

That worked perfectly in IE and FF etc. All I need know is some way of making sure the images dont overlap when the window is re-sized and made too narrow for them all top fit on, thankyou Laughing out loud

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 18 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

divs and vertical-align?

Do you mean a minimum width? Like this?

Luke2000
Offline
Enthusiast
Last seen: 16 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

I am jealous....

Lol, yes. Thats exactly what I need. I tried min-width: 150px; in the li script...

Quote:
li {
float:left;
width-min: 150px;
width:20%;
border-left: 1px solid #ffffff;
background-color: #9afde0;
position:relative;
height:250px;
margin-right:-2px;
display:inline;
}

...but that didn't work. Just viewed your source, I got it in the wrong place. I have so much to learn. Thankyou for all your help Smile

Luke2000
Offline
Enthusiast
Last seen: 16 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Firefox, Opera, Netscape...

I added the relevant code and it now works fine in IE. Is there anyway of adding a similar code so that it will work for Opera, FF and NN? Im sorry for being such a nuisance, I really appreciate your help, thankyou.

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 18 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

divs and vertical-align?

It works fine.

Luke2000
Offline
Enthusiast
Last seen: 16 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Weird...

Your right it does. I must have got a bit of syntax wrong, srry. Thanks again, I really owe you one:)

Mr. K
Offline
newbie
Last seen: 16 years 19 weeks ago
Joined: 2005-09-19
Posts: 9
Points: 0

text alignment

Hi, I'm having a very similar problem but dealing with text not an image. Could someone tell me how to do the following:

I have a div with an image as a background and I would like to place a small header in that same div in the right-bottom corner. I can align it to the right with text-align, but how do I align it with the bottom. I found lots of different answers regarding vertical alignment on the net, but it was all quite confusing; I thought that there must be some short, clean solution to this.

Thanks,
Mariusz

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

divs and vertical-align?

div { position:relative; }
h# { position:absolute; bottom: 0; right: 0; }

The h# obviously goes inside the div.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mr. K
Offline
newbie
Last seen: 16 years 19 weeks ago
Joined: 2005-09-19
Posts: 9
Points: 0

text alignment (netscape)

Your solution works perfect with IE but Netscape still shows the text few pixels above the bottom of the div that contains the header.

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 18 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

divs and vertical-align?

Try removing the margins of the header.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

divs and vertical-align?

Mr K can you please not jump into a thread with your own question it's considered hijacking and causes confusion, you should start a new topic.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me