1

I am trying to get an Aside tag to float next to a Section tag with CSS but not having much luck so far.

Below is the 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>

Below is the CSS so far

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

Any suggestions or advice on how to get this would be greatly appreciated. First time Ive ever had this issue of floating sections so really stumped as to why now.

Many thanks to all the responses, they have all been useful and solved my problem.

4

5 に答える 5

3

I should change the order of the tags and give them display: inline-block;

The other answers about float I should not use. Most designers misunderstand float.

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

于 2013-03-14T15:54:53.603 に答える
1

Add float:left to both elements.

Don't forget to clear your floats as well.

于 2013-03-14T15:45:10.817 に答える
0

Add float: left to your aside and section.

于 2013-03-14T15:45:29.187 に答える
0

you just need to add float: left; to your <aside> section.

于 2013-03-14T15:46:56.947 に答える
0

it's necessary to wrap the elements...

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

于 2016-01-06T20:12:44.713 に答える