이전 플로트를 지우지 않고 플로트 오른쪽

플로트 컨테이너에 banner과 main을 랩핑하는 것이 확실하지만 아래에있는 HTML의 제약 조건이 주어지면 sidebar을 맨 위로 '뛰어 넘기'위한 다른 방법이 있습니다. ?이전 플로트를 지우지 않고 플로트 오른쪽

http://html-bin.appspot.com/aghodG1sLWJpbnIMCxIEUGFnZRjJ0wYM

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Floats</title> 
    <style> 

     #banner { 
      width: 70%; 
      float: left; 
      padding: 10px; 
      border: 1px solid blue; 
     } 

     #main { 
      width: 70%; 
      float: left; 
      padding: 10px; 
      border: 1px solid orange; 
     } 

     #sidebar { 
      width: 25%; 
      float: right; 
      padding: 10px; 
      border: 1px solid green; 
     } 

    </style> 
</head> 
<body> 

    <div id="banner"> 
     Banner 
    </div> 

    <div id="main"> 
     Main 
    </div> 

    <div id="sidebar"> 
     Sidebar 
    </div> 

</body> 
</html>

출처

2011-10-07 TheDeadMedic

당신은 메인과 사이드 바는 페이지의 높이를 채우려시겠습니까? –

#sidebar { 
    border: 1px solid green; 
    display: inline-block; 
    .display: inline; 
    .zoom:1; 
    padding: 10px; 
    width: 22%; 
}

출처

2011-10-07 13:51:23 AlexC

굉장합니다 - 거의 (IE7에서는 nay). – TheDeadMedic

IE7 용으로 업데이트했습니다. – AlexC

IE7 테스트 방법은 무엇입니까? 나는 Spoon.net 컴파일을 사용한다. & 그것의 아무 것도 가지지 않고있다! – TheDeadMedic

이전 플로트를 지우지 않고 플로트 오른쪽

답변

관련 문제