페이지 크기가 조정될 때 DIVS가 충돌하지 않도록하는 방법 (바닥 글)?

페이지 크기가 조정될 때 div가 충돌하지 않도록하는 방법 (바닥 글)? 온라인을 봤는데 제가 찾고있는 것을 찾을 수 없었습니다.이 질문에 이미 답변을했다면 사과드립니다.

바닥 글을 작성하는 중이며 페이지 크기를 조정할 때 제품, 회사, 지원, 지원을 포함하는 네 가지가 서로 충돌하는 것을 방지하는 방법을 알고 싶었습니다.

어딘가에 최소 너비를 넣어야한다고 가정합니다. 4 개의 중첩 된 div로 새 div를 만들고 최소 너비를 적용하는 것이 가장 좋은가요? 더 나은 방법이 없다면 이것이 작동할까요?

또한 페이지 중앙에 div를 균등하게 배치하고 싶습니다.

HTML :

<footer>
<div id="insidefooterfixone">
     <h5>Product</h5> 
    <ul>
        <li>Domains</li>
        <li>Hosting</li>
        <li>Server</li>
    </ul>
</div>
<div id="insidefooterfixtwo">
     <h5>Company</h5> 
    <ul>
        <li>Team</li>
        <li>Our Customers</li>
        <li>Blog</li>
        <li>Terms of Service</li>
        <li>Privacy Policy</li>
        <li>Security</li>
    </ul>
</div>
<div id="insidefooterfixthree">
     <h5>Support</h5> 
    <ul>
        <li>Help Documents</li>
        <li>API Documents</li>
        <li>Tutorials</li>
        <li>FAQ - Database</li>
        <li>System Status</li>
    </ul>
</div>
<div id="insidefooterfixfour">
     <h5>Support</h5> 
    <ul>
        <li>[email protected]</li>
        <li>01223 000000</li>
    </ul>
</div>
<div id="disclaimerfix">
    <p>2002-2014 Dataconnectivity Ltd.</p>
</div>
</footer>

CSS :

footer {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
background-color: #3a3a3a;
list-style: none;
height: 450px;  
float: left;}

#insidefooterfixone h5, #insidefooterfixtwo h5, #insidefooterfixthree h5, #insidefooterfixfour h5 {
text-align:left;
margin-bottom: 0;
color:#FFFFFF;  }

#insidefooterfixone li, #insidefooterfixtwo li, #insidefooterfixthree li,   #insidefooterfixfour li {
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9; }

#insidefooterfixone ul, #insidefooterfixtwo ul, #insidefooterfixthree ul,     #insidefooterfixfour ul{
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9; }

#insidefooterfixone {
position: relative;
top: 0px;
left: 31.3%;
width: 150px;    }

#insidefooterfixtwo {
position: relative;
top: -115px;
left: 39.667%;
width: 150px;   }

#insidefooterfixthree {
position: relative;
top: -298px;
left: 48%;
width: 150px;    }

#insidefooterfixfour {
position: relative;
top: -458px;
left: 56.33%;
width: 150px;}

데모 : http://fiddle.jshell.net/6Lgdx/

감사.

추신 : 4 div 정렬에 대해 걱정하지 마십시오 (다른 응용 프로그램으로 전송할 때 모두 변경되는 것 같습니다)