Forum Moderators: not2easy

Message Too Old, No Replies

Floating dd

         

Jake_Carter

6:23 pm on Feb 14, 2011 (gmt 0)

10+ Year Member



I'm not sure if this is possible with CSS, but I'm running out of ideas. I've been working on a project using shopping cart software that does NOT allow me to view the PHP code to adjust the structure. However, I do have access to the CSS.

Here is my issue: on [my site] there are currency flags at the bottom of the footer. Currently, they are all on their own seperate line. I need them all to be on the same line going from left to right. Is this possible with my CSS?

All suggestions are appreciated!

[edited by: alt131 at 6:19 am (utc) on May 19, 2011]
[edit reason] Thread Tidy [/edit]

alt131

7:14 pm on Feb 14, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Jake, and welcome to WebmasterWorld [webmasterworld.com]. :)
I've brought your code over so we can stay on-site. Have I got the right bits?
html
<dl class="CurrencyList">
<dd class="" style="border-bottom: 0px;">
<a href="/?setCurrencyId=1" class="Sel"><span class="Flag"><img src="um.gif" border="0" alt="United States Minor Outlying Islands" /></span><span class="Text">USD</span></a>
</dd>
<dd class="" style="border-bottom: 0px;">
<a href="/?setCurrencyId=2" class=""><span class="Flag"><img src="au.gif" border="0" alt="Australia" /></span>
<span class="Text">AUD</span></a>
</dd>
</dl>

css
.CurrencyList dd {
clear:both;
float:left;
margin:0;
padding:0;
width:200px;
}


Shame you can't change the structure as I think that is a mis-use of a definition list, however, if you look at the css you immediately note the dd's have been set to clear:both. That directs them to make sure there is no other element to their left/right. Comment out/delete the clear and they'll obey float:left and arrange themselves along the "same line". You may just need to adjust the widths so they fit on one line rather than "wrapping" to the next.

Have you tried any of the development tools (firebug for firefox is commonly suggested) - makes spotting this sort of thing so easy, plus you can "try" adjustments before coding them in - really handy when testing.

Jake_Carter

3:57 pm on Feb 15, 2011 (gmt 0)

10+ Year Member



Alt,
Thank you very much for your reply. Following your suggestions I was finally able to figure it out! Thanks again for the help!