플로팅 div는 다른 플로팅 div 아래로 계속 이동합니다

내 사이트는 사이드 메뉴 div와 메인 콘텐츠 div로 구성됩니다. div를 왼쪽으로 띄우고 백분율을 사용하여 열이 전체 페이지를 채 웁니다. 그러나 205px 너비보다 작고 메인 콘텐츠가 780px보다 작아지기를 원하기 때문에 분 너비도 사용하고 있습니다. 사이트는 너비가 985 픽셀보다 작아야하지만 화면을 채울 수있을만큼 유연한 콘텐츠를 원합니다.플로팅 div는 다른 플로팅 div 아래로 계속 이동합니다

내 문제는 크기가 985px 미만인 창 크기를 조정하면 메인 콘텐츠 div가 사이드 메뉴 아래로 이동한다는 것입니다. 어디로 잘못 가고 있습니까?, div는 사이드 메뉴 옆의 동일한 위치에 있어야하지만 가로 스크롤 막대가 시작되어야합니다. 그러면 내용이 화면을 채 웁니다.

Fiddle

html로 :

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <link rel="stylesheet" type="text/css" href="test.css" /> 
</head> 
<body> 

<div id="wrapper"> 

    <div id="side-bar"> 
     <p>side bar</p> 
    </div> 

    <div id="main-content"> 

     <div id="content"> 
      <p>some content</p> 
     </div>  

    </div> 

</div> 


</body> 
</html>

는 CSS :

body 
{ 
margin:0; 
padding:0; 
font-size:100%; 
font-family:Arial; 
} 

p 
{ 
margin:0; 
padding:0; 
} 

#wrapper 
{ 
width:100%; 
min-width:985px; /*site no smaller than 985px wide*/ 
height:auto; 
} 

#side-bar 
{ 
width:15%; 
min-width:205px; /*nav sidebar no smaller than 205px wide*/ 
min-height:672px; 
background-color:Gray; 
float:left; 
} 

#main-content 
{ 
width:85%; 
min-width:780px; 
min-height:672px; 
background-color:Maroon; 
float:left; 
} 

#content 
{ 
width:740px; 
height:500px; 
background-color:#ccc; 
margin:0 auto; 
}

출처

2013-12-09 user2982873

누군가가 답변을 올렸지 만 어떤 이유로 지금은 사라져서 문제를 해결할 수 없습니다.

최소 너비가 985px 인 래퍼를 만들었습니다. 그 다음 측면 및 주요 콘텐츠 사업부에 대한 비율 값을 각각 15 % & 85 %로 사용했습니다. 그러나 나는 985px 랩퍼의 15 %와 85 %를 고려하지 않았습니다.

사이드 바의 너비가 205px의 최소 너비 인 경우 15 %이지만, 985px의 15 % 만 147.25px이므로 여분의 픽셀이 사이드 바 아래의 기본 콘텐츠 div가됩니다.

희망이 맞나요? 도와 줘서 고마워. :)

출처

2013-12-11 12:11:14 user2982873

이유 주요 콘텐츠 사업부가 메뉴 DIV 아래에가는 길에 기인 그 박스 모델 공장. 메인 콘텐츠 div를 인라인 블록으로 변경하면 메뉴의 오른쪽에 머물러있게됩니다. 어떻게 할 수 있는지 알려주는 jsfiddle입니다.

#main-content 
{ 
    display:inline-block 
    width:85%; 
    min-width:780px; 
    min-height:672px; 
    background-color:Maroon; 
    float:left; 
}

출처

2013-12-09 15:59:26 evasilchenko

안녕하세요, 제게 다시 돌아와 주셔서 감사합니다. 안타깝게도 아무 제안도 없습니다. 브라우저 창을 잠그기 시작하면 주 콘텐츠 div가 여전히 사이드 바 아래로 이동합니다. – user2982873

@ user2982873 그건 이상한 일입니다. jsfiddle은 Chrome과 Firefox에서 제대로 작동합니다. jsfiddle을 클릭하여 결과를 보거나 붙여 넣은 CSS를 시도 했습니까? – evasilchenko

수평면이 충분한 경우에만 같은면으로 부양 된 블록은 서로 옆에 머물러 있습니다.

가로 스크롤 막대가 실제로 필요한 경우 테이블 레이아웃 (디스플레이 : table-row, display : table-cell)을 실험 해 보겠습니다.

출처

2013-12-09 15:59:54

주요-콘텐츠 DIV 후 사업부를 만들고 그것을 'clearfix'및 다음 스타일의 클래스 제공 : 나는 문제가 당신이 인 수레를 삭제되지 않습니다 것 같아요

.clearfix{ 
     clear:both; 
    }

을 왜 컨테이너 div (래퍼) 엉망입니다.

출처

2013-12-09 16:00:52 user3034378

플로팅 div는 다른 플로팅 div 아래로 계속 이동합니다

답변

관련 문제