Alignment of Nested DIVs in Firefox

alignment issues in FF vs IE

[rthurt]

I have several DIV elements inside another DIV. The alignment works just fine in IE, but aligns to the left in FF. What am I missing?

---Begin HTML----

<div id="body">

<div id="blurb">
</div>

<div id="news">
</div>

<div id="mail">
</div>

</div>

---End HTML---

---Begin CSS---

#body {
text-align: right;
height: 680px;
width: 800px;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
}

#blurb {
margin-top: 20px;
margin-right: 20px;
height: 200px;
width: 400px;
background-image: url(welcome.gif);
background-position: top right;
background-repeat: no-repeat;
background-attachment: scroll;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
}

#news {
margin-top: 20px;
margin-right: 20px;
height: 200px;
width: 400px;
background-image: url(news.gif);
background-position: top right;
background-repeat: no-repeat;
background-attachment: scroll;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
}

#mail {
margin-top: 20px;
margin-right: 20px;
height: 200px;
width: 400px;
background-image: url(email.gif);
background-position: top right;
background-repeat: no-repeat;
background-attachment: scroll;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
}

---End CSS---

Thanks in advance!

~Todd

[Fotiman]

Add this to your #blurb, #news, and #mail styles:

margin-left: auto;

Otherwise, the default seems to be a margin of 0px. Setting it to auto lets is adjust to fit.

-Peter

[rthurt]

Excellent! Thanks. That worked perfectly. This forum and everyone here rules!

~Todd