크기를 조정할 때 이동하지 않고 플로팅하는 방법은 무엇입니까?

Question

내 웹 사이트를 모든 해상도에 맞게 배치하여 모든 것을 중앙에 배치하고 창을 축소하면 모두 왼쪽으로 이동하고 중지합니다. 그러나 창을 축소하면 뉴스 피드가 설문 조사 아래로 떨어집니다.

을 Heres CSS 코드 : 컨테이너가 최소 폭과 그 문제를 해결할 수 있습니다 최대 폭을 div에주는

#poll { 
float: left; 
margin: 0px 20px; 
} 

#newsfeed { 
float: right; 
margin: 0px 20px; 
} 

<div id="poll"> 
<form method="post" action="http://poll.pollcode.com/t78ar8"><table border=0 width="244" bgcolor="EEEEEE" cellspacing="2" cellpadding="0"><tr><td colspan="2" height="10"><font face="Tahoma" size="2" color="000000"><b>What game site do you visit most?</b></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="1" id="t78ar8answer1"></td><td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer1">Ign</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="2" id="t78ar8answer2"></td><td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer2">GameSpot</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="3" id="t78ar8answer3"></td><td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer3">GameFAQs</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="4" id="t78ar8answer4"></td><td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer4">GamerZone</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="5" id="t78ar8answer5"></td><td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer5">Mmohut</label></font></td></tr><tr><td colspan="2" height="10"><center><input type="submit" value=" Vote ">&nbsp;&nbsp;<input type="submit" name="view" value=" View "></center></td></tr></a>&nbsp;</font></td></tr></table></form> 

    </div> 
    <div id="newsfeed"> 
    <!-- start sw-rss-feed code --> 
    <script type="text/javascript"> 
    <!-- 
    rssfeed_url = new Array(); 
    rssfeed_url[0]="http://news.yahoo.com/rss/gaming"; 
    rssfeed_frame_width="500"; 
    rssfeed_frame_height="720"; 
    rssfeed_scroll="on"; 
    rssfeed_scroll_step="6"; 
    rssfeed_scroll_bar="on"; 
    rssfeed_target="_blank"; 
    rssfeed_font_size="14"; 
    rssfeed_font_face=""; 
    rssfeed_border="on"; 
    rssfeed_css_url="http://udel.edu/~ssell/newsfeed.css"; 
    rssfeed_title="on"; 
    rssfeed_title_name=""; 
    rssfeed_title_bgcolor="#3366ff"; 
    rssfeed_title_color="#fff"; 
    rssfeed_title_bgimage="http://"; 
    rssfeed_footer="off"; 
    rssfeed_footer_name="rss feed"; 
    rssfeed_footer_bgcolor="#fff"; 
    rssfeed_footer_color="#333"; 
    rssfeed_footer_bgimage="http://"; 
    rssfeed_item_title_length="50"; 
    rssfeed_item_title_color="#666"; 
    rssfeed_item_bgcolor="#fff"; 
    rssfeed_item_bgimage="http://"; 
    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="off"; 
    rssfeed_no_items="0"; 
    rssfeed_cache = "7872565d53aadc6c14b4ab1bb3f79bdb"; 
    //--> 
    </script> 
    <script type="text/javascript" src="rss-feed.js"></script> 
    <!-- end sw-rss-feed code --> 
    </div> 

Answer 1

당신이 반응 디자인 또는 이와 유사한 스위치를 사용하지 않으려면 하나의 간단한 해결책 : 컨테이너를 포장하십시오 CSS #

와 함께 다른 컨테이너 (#wrapper)와 함께 "#poll"및 "#newsfeed"

#wrapper { 
min-width:500px; /* 500px = max. sum of box model width values of #poll and #newsfeed" */ 
width: auto !important; /* IE>=7 */ 
width: 500px; /* IE<7 */ 
} 

Answer 2

.
귀하의 설문 조사 & 너비와 마진을 조합 한 것이 귀하의 컨테이너의 최소 너비를 초과하지 않는지 확인하십시오.

예 :

HTML :

<div id="container"> 
<div id="poll"> </div> 
<div id="newsfeed"> </div> 
</div> 

CSS :

#container { 
max-width:1240px; 
min-width:600px; 
} 
#poll { 
float:right; 
max-width:620px 
min-width:280px; 
margin:0 20px; 
} 
#newsfeed { 
float:left; 
max-width:620px; 
min-width:280px; 
margin:0 20px; 
}