Float Beiseite neben einem Abschnitt HTML5

Ich versuche nebenbei tag zu schweben neben einem Abschnitt-tag mit CSS, aber nicht viel Glück so weit.

Unten ist der 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>

Unten ist der CSS so weit

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;
}

Irgendwelche Vorschläge oder Ratschläge, wie man diesem würde sehr geschätzt werden. Ersten mal Ive jemals hatte dieses Problem der schwebenden Abschnitte so wirklich ratlos, warum jetzt.

Vielen Dank an alle Antworten, Sie sind alle nützlich, und mein problem gelöst.

InformationsquelleAutor user1957778 | 2013-03-14

  1. 0

    Hinzufügen float:left auf beide Elemente.

    Vergessen Sie nicht, klar, Ihr schwimmt als gut.

    InformationsquelleAutor Diodeus - James MacFarlane

  2. 2

    Sollte ich ändern Sie die Reihenfolge der tags und geben Sie display: inline-block;

    Den anderen Antworten zu schweben, sollte ich nicht verwenden. Die meisten Designer missverstehen schweben.

    Bei der Verwendung von 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;
}

    Beispiel @ jsfiddle

    Danke für die beiden links. Die Verwendung von float ist sehr nützlich und informativ.

    InformationsquelleAutor Ron van der Heijden

  3. 0

    Hinzufügen float: left zu Ihrem aside und section.

    InformationsquelleAutor Flauwekeul

  4. 0

    müssen Sie nur hinzufügen float: left; zu Ihrem <aside> Abschnitt.

    InformationsquelleAutor Francois Borgies

  5. 0

    ist es notwendig, wickeln Sie die Elemente...

    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;
}

    Beispiel @ Fiedel

    InformationsquelleAutor Waschak

Schreibe einen Kommentar