Lining 4 RSS feeds up side by side

HTML & CSS
1

I’ve got 4 RSS feeds that are working well, but they are currently stacked, and I want them side by side. I’ve tried wrapping them in a div and then using “display:inline-block”, but it didn’t work. I also have used float:right on the div for each feed. This put three of them next to each other, with one on the bottom, and on the right side is where the div actually is, with a small amount of text in it (which I have to have because of where I got the feeds). The feeds themselves aren’t even staying in the divs. Hopefully someone can help me out here.

Note: I know the css would be better on a stylesheet, and I do have one but when I got the code for the feeds, it already had the css in there. I just haven’t switched it over to the stylesheet yet.

<footer>
    <p>&copy; @DateTime.Now.Year - SC2 MyLink</p>
    <!-- start sw-rss-feed code --> 
    <script type="text/javascript"> 
        <!-- 
        rssfeed_url = new Array(); 
        rssfeed_url[0]="http://www.rssweather.com/zipcode/61601/rss.php";  
        rssfeed_frame_width="270"; 
        rssfeed_frame_height="200"; 
        rssfeed_scroll="on"; 
        rssfeed_scroll_step="6"; 
        rssfeed_scroll_bar="off"; 
        rssfeed_target="_blank"; 
        rssfeed_font_size="12"; 
        rssfeed_font_face=""; 
        rssfeed_border="on"; 
        rssfeed_css_url="https://feed.surfing-waves.com/css/style3a.css"; 
        rssfeed_title="on"; 
        rssfeed_title_name="Peoria, IL Weather"; 
        rssfeed_title_bgcolor="#3366ff"; 
        rssfeed_title_color="#fff"; 
        rssfeed_title_bgimage=""; 
        rssfeed_footer="on"; 
        rssfeed_footer_name="http://www.rssweather.com/"; 
        rssfeed_footer_bgcolor="#fff"; 
        rssfeed_footer_color="#333"; 
        rssfeed_footer_bgimage=""; 
        rssfeed_item_title_length="50"; 
        rssfeed_item_title_color="#666"; 
        rssfeed_item_bgcolor="#fff"; 
        rssfeed_item_bgimage=""; 
        rssfeed_item_border_bottom="on"; 
        rssfeed_item_source_icon="off"; 
        rssfeed_item_date="off"; 
        rssfeed_item_description="on"; 
        rssfeed_item_description_length="120"; 
        rssfeed_item_description_color="#666"; 
        rssfeed_item_description_link_color="#333"; 
        rssfeed_item_description_tag="on"; 
        rssfeed_no_items="0"; 
        rssfeed_cache = "b8c8039956605711f322fb17a47ffbaf"; 
//--> 
    </script> 
    <script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script> 
    <!-- The link below helps keep this service FREE, and helps other people find the SW widget. Please be cool and keep it! Thanks. --> 
    <div style="float: right; text-align:right; width:270px;"><a href="http://www.surfing-waves.com/feed.htm" target="_blank" style="color:#ccc; font-size:10px">feedwidget </a> <a href="http://www.surfing-waves.com" target="_blank" style="color:#ccc;font-size:10px">Surfing Waves</a></div> 
    <!-- end sw-rss-feed code -->
    
    <!-- start sw-rss-feed code -->
    <script type="text/javascript">

<!--
rssfeed_url = new Array();
rssfeed_url[0]="http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=CAT"; rssfeed_url[1]="http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=KMTUY"; rssfeed_url[2]="http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=MMTOF"; rssfeed_url[3]="http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=DE";
rssfeed_frame_width="280";
rssfeed_frame_height="200";
rssfeed_scroll="on";
rssfeed_scroll_step="6";
rssfeed_scroll_bar="off";
rssfeed_target="_blank";
rssfeed_font_size="12";
rssfeed_font_face="";
rssfeed_border="on";
rssfeed_css_url="https://feed.surfing-waves.com/css/style3a.css";
rssfeed_title="on";
rssfeed_title_name="Stock Prices";
rssfeed_title_bgcolor="#3366ff";
rssfeed_title_color="#fff";
rssfeed_title_bgimage="";
rssfeed_footer="off";
rssfeed_footer_name="rss feed";
rssfeed_footer_bgcolor="#fff";
rssfeed_footer_color="#333";
rssfeed_footer_bgimage="";
rssfeed_item_title_length="50";
rssfeed_item_title_color="#666";
rssfeed_item_bgcolor="#fff";
rssfeed_item_bgimage="";
rssfeed_item_border_bottom="on";
rssfeed_item_source_icon="off";
rssfeed_item_date="off";
rssfeed_item_description="on";
rssfeed_item_description_length="120";
rssfeed_item_description_color="#666";
rssfeed_item_description_link_color="#333";
rssfeed_item_description_tag="on";
rssfeed_no_items="0";
rssfeed_cache = "55ca4c5d06e1ebc6dafb55c1177c93b1";
//-->
    </script>
    <script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script>
    <!-- The link below helps keep this service FREE, and helps other people find the SW widget. Please be cool and keep it! Thanks. -->
    <div style="float: right; text-align:right; width:280px;"><a href="http://www.surfing-waves.com/feed.htm" target="_blank" style="color:#ccc;font-size:10px">feedwidget </a> <a href="http://www.surfing-waves.com" target="_blank" style="color:#ccc;font-size:10px">Surfing Waves</a></div>
    <!-- end sw-rss-feed code -->
    
    <!-- start sw-rss-feed code --> 
    <script type="text/javascript"> 
        <!-- 
        rssfeed_url = new Array(); 
        rssfeed_url[0]="http://www.pjstar.com/news?template=rss&mime=xml";  
        rssfeed_frame_width="280"; 
        rssfeed_frame_height="200"; 
        rssfeed_scroll="on"; 
        rssfeed_scroll_step="6"; 
        rssfeed_scroll_bar="off"; 
        rssfeed_target="_blank"; 
        rssfeed_font_size="12"; 
        rssfeed_font_face=""; 
        rssfeed_border="on"; 
        rssfeed_css_url="https://feed.surfing-waves.com/css/style3a.css"; 
        rssfeed_title="on"; 
        rssfeed_title_name="Local News"; 
        rssfeed_title_bgcolor="#3366ff"; 
        rssfeed_title_color="#fff"; 
        rssfeed_title_bgimage=""; 
        rssfeed_footer="on"; 
        rssfeed_footer_name="http://www.pjstar.com/"; 
        rssfeed_footer_bgcolor="#fff"; 
        rssfeed_footer_color="#333"; 
        rssfeed_footer_bgimage=""; 
        rssfeed_item_title_length="50"; 
        rssfeed_item_title_color="#666"; 
        rssfeed_item_bgcolor="#fff"; 
        rssfeed_item_bgimage=""; 
        rssfeed_item_border_bottom="on"; 
        rssfeed_item_source_icon="off"; 
        rssfeed_item_date="off"; 
        rssfeed_item_description="on"; 
        rssfeed_item_description_length="120"; 
        rssfeed_item_description_color="#666"; 
        rssfeed_item_description_link_color="#333"; 
        rssfeed_item_description_tag="on"; 
        rssfeed_no_items="0"; 
        rssfeed_cache = "2d81be508f9c768cdf708edfbdde744b"; 
//--> 
    </script> 
    <script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script> 
    <!-- The link below helps keep this service FREE, and helps other people find the SW widget. Please be cool and keep it! Thanks. --> 
    <div style="float: right; text-align:right; width:280px;"><a href="http://www.surfing-waves.com/feed.htm" target="_blank" style="color:#ccc;font-size:10px">feedwidget </a> <a href="http://www.surfing-waves.com" target="_blank" style="color:#ccc;font-size:10px">Surfing Waves</a></div> 
    <!-- end sw-rss-feed code -->
    
    <!-- start sw-rss-feed code --> 
    <script type="text/javascript"> 
        <!-- 
        rssfeed_url = new Array(); 
        rssfeed_url[0]="https://www.cbsnews.com/latest/rss/main";  
        rssfeed_frame_width="280"; 
        rssfeed_frame_height="200"; 
        rssfeed_scroll="on"; 
        rssfeed_scroll_step="6"; 
        rssfeed_scroll_bar="off"; 
        rssfeed_target="_blank"; 
        rssfeed_font_size="12"; 
        rssfeed_font_face=""; 
        rssfeed_border="on"; 
        rssfeed_css_url="https://feed.surfing-waves.com/css/style3a.css"; 
        rssfeed_title="on"; 
        rssfeed_title_name="U.S. News"; 
        rssfeed_title_bgcolor="#3366ff"; 
        rssfeed_title_color="#fff"; 
        rssfeed_title_bgimage=""; 
        rssfeed_footer="on"; 
        rssfeed_footer_name="https://www.cbsnews.com/"; 
        rssfeed_footer_bgcolor="#fff"; 
        rssfeed_footer_color="#333"; 
        rssfeed_footer_bgimage=""; 
        rssfeed_item_title_length="50"; 
        rssfeed_item_title_color="#666"; 
        rssfeed_item_bgcolor="#fff"; 
        rssfeed_item_bgimage=""; 
        rssfeed_item_border_bottom="on"; 
        rssfeed_item_source_icon="off"; 
        rssfeed_item_date="off"; 
        rssfeed_item_description="on"; 
        rssfeed_item_description_length="120"; 
        rssfeed_item_description_color="#666"; 
        rssfeed_item_description_link_color="#333"; 
        rssfeed_item_description_tag="on"; 
        rssfeed_no_items="0"; 
        rssfeed_cache = "cb56ca3efc16103b3d691e5c24f6dfbd"; 
//--> 
    </script> 
    <script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script> 
    <!-- The link below helps keep this service FREE, and helps other people find the SW widget. Please be cool and keep it! Thanks. --> 
    <div style="float: right; text-align:right; width:280px;"><a href="http://www.surfing-waves.com/feed.htm" target="_blank" style="color:#ccc;font-size:10px">feedwidget </a> <a href="http://www.surfing-waves.com" target="_blank" style="color:#ccc;font-size:10px">Surfing Waves</a></div> 
    <!-- end sw-rss-feed code -->
</footer>
2

Hi, ethanforbes89.

Please post the CSS that you are using to layout the footer.

Re-reading your post, why not go ahead and set up a “working page” with the relevant HTML and CSS, and of course the doctype. It sounds “up in the air” right now.

3

There is none. There is no css for the footer. The only css right now for this section of code, is for the feeds, and it is in line and in the code I posted.

4

inline-block should work. I’ll guess that the first problem is that the widths of the four RSS feed boxes total a value greater than the the width of the page, therefore they fourth RSS feed wraps. Floats are unnecessary. It would be helpful to know what your page is supposed to look like and whether or not it is supposed to be responsive.

Set up the CSS properly instead of in-line and post a “working page”. I have to go out now but someone else will probably pick this topic up shortly.

5

I actually finally got it working. Thanks though!

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.