Float Aside 옆에 섹션 HTML5

Question

CSS가있는 Section 태그 옆에 떠 다니기 위해 Aside 태그를 얻으려고하고 있지만 아직까지 행운이 없다.

다음은 다음은 지금까지

section 
{ 
    display : block; 
    width : 48em; 
    height : 40em; 
    border-width : 0.1em; 
    border-style : dashed; 
    border-color : black; 
} 

aside 
{ 
    display : block; 
    width : 12em; 
    height : 40em; 
    border-width : 0.1em; 
    border-style : dashed; 
    border-color : black; 
} 

이하는 방법에 대한 어떤 제안이나 조언이 크게 감사 것 CSS 인 HTML

<div id="WholePage"> 
<section> 
    <asp:ContentPlaceHolder ID="MainContentWindow" runat="server">     </asp:ContentPlaceHolder> 
</section> 

<aside> 
    <div id="SideAdRotator"> 
    <asp:AdRotator ID="AsideAdRotator" runat="server" AdvertisementFile="Adverts.xml"   Height="300px" Width="150px"/> 
    </div> 
</aside> 

에게 있습니다. 처음으로 플로팅 섹션에 대한 이슈가 생겨서 지금까지 왜 그렇게 어려웠습니다.

모든 응답 덕분에 많은 도움이되었고 내 문제가 해결되었습니다.

Answer 1

두 요소 모두에 float:left을 추가하십시오.

clear your floats도 잊지 마세요.

Answer 2

aside 및 section에 float: left을 추가하십시오.

Answer 3

<aside> 섹션에 float: left;을 추가하기 만하면됩니다.

Answer 4

나는 태그의 순서를 변경하고 그들에게 내가 사용하지 말아야 플로트에 대한 display: inline-block;

다른 답변을 제공해야합니다. 대부분의 디자이너는 실수를 오해합니다.

When use float?

HTML을

<div id="WholePage"> 
    <aside></aside> 
    <section></section> 
</div> 

CSS

section 
{ 
    display : inline-block; 
    width : 48em; 
    height : 40em; 
    border-width : 0.1em; 
    border-style : dashed; 
    border-color : black; 
} 

aside 
{ 
    display : inline-block; 
    width : 12em; 
    height : 40em; 
    border-width : 0.1em; 
    border-style : dashed; 
    border-color : black; 
} 

Example @ jsfiddle

Answer 5

는 요소를 포장하는 것이 필요 ...

CSS

#WholePage { 
    width: 100%; 
    border: 1px dotted red; 
    padding: 10px; 
} 
section { 
    display: inline-block; 
    width: 70%; 
    height: 300px; 
    border: 1px dashed green; 
} 
aside { 
    display: inline-block; 
    width: 25%; 
    height: 400px; 
    border: 1px dashed blue; 
} 

example @ fiddle