2 replies [Last post]
Pichel
Offline
newbie
Last seen: 16 years 28 weeks ago
Joined: 2004-01-26
Posts: 4
Points: 0

Hello there,

There are 4 floating DIVs on my site http//www.pixelbase.co.uk/ewvh/stage .

I'm trying to have all of them aligned at the bottom - it is either aligned correctly in IE6 or Safari/Mozilla/Camino - I'm struggling to get it to work in all of them. I'm happy with the positioning of the big left DIV. It's the right ones I'd like to get aligned with the left DIV at the bottom.

Any help with this is greatly appreciated.

The relevant code and CSS of the right 3 DIVs is as follows (sorry, this is a bit long, but I can't see how to simplify this even more)

#events {
height 198px;
width 150px;
float right;
}
#newsletter {
border 1px solid #666666;
float right;
height 95px;
width 150px;
margin-right 5px;
margin-bottom 5px;
}
#gallery {
border 1px solid #666666;
float right;
height 93px;
width 150px;
margin-right 5px;
margin-top 5px;
}
#eventscolright {
float right;
height 200px;
width 150px;
margin-left 10px;
}
#events h3,#newsletter h3, #gallery h3 {
height 15px;
border 1px 1px 0px 1px solid #666666;
margin 0px;
padding 3px 3px 3px 5px;
}
#events p,#newsletter p,#gallery p {
font-size x-small;
padding 5px;
margin 0px;
}

--------------

<div id="eventscolright">
<div id="newsletter">
<h3>Newsletter</h3>
<p>Newsletter text</p>
</div>
<div id="gallery">
<h3>Gallery</h3>
<p>Gallery text</p>
</div>
</div>


<div id="events">
<h3>Events</h3>
<div id="eventsmain"><p>events text</p></div>
</div>

</div>

--------
Many thanks,
Michael

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 39 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

and another float problem

Ok

Your page is being displayed in quirks mode, so the box model will be incorrect in IE6, and can't guarantee what is happening with all the other browsers, but they may be ok

Above your Doc Type you have this -

<?xml version="1.0" encoding="iso-8859-1"?>

for which IE throws itself into quirky mode.

Move it below the doc type like thus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>

Once you do that you may find differences.
----------

Seen this quite a few times - can anyone tell me if there is an editor out there, using this in first line.
<?xml version="1.0" encoding="iso-8859-1"?>

Regards
Day

The only way to learn is to do it yourself

Pichel
Offline
newbie
Last seen: 16 years 28 weeks ago
Joined: 2004-01-26
Posts: 4
Points: 0

and another float problem

Daybreak,

thanks ever so much... you'll be glad to hear that I found the problem myself a couple of days ago. I read Mr. Zeldman's latest work and suddenly it all became clear to me. I removed the code completely and since then I'm having far less bother.

The comment is put in by DW MX - my docs are created as XHTML compliant.

Anyway - many thanks for your help again!

PM