treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Aligning Content

  • I have been having issues getting two divs to align on the same line in IE7, works correctly in all other browsers.

    CSS:
    body {
    padding: 0;
    margin: 0;
    color: #000;
    background-color: #B8D9F5;
    }
    div#wrapper {
    clear: both;
    width: 678px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
    }
    div#content {
    overflow: auto;
    margin: 0;
    padding: 0 0 20px 0;
    min-height: 200px;
    width: 478px;
    background-color: #FFF;
    }
    div#asideWrapper {
    float: right;
    margin-top: 10px;
    margin-right: -10px;
    }
    div#aside {
    float: right;
    width: 188px;
    height: auto;
    clear: right;
    border: 1px solid #D4D4D4;
    background: #e0f1ff;
    margin-bottom: 20px;
    }


    HTML:
    <body>

    <!-- Site Wrapper: Start-->
    <div id="wrapper">

    <!--Side Widgets: Start-->
    <div id="asideWrapper">

    <div id="aside">
    <h1>Title</h1>
    </div>
    <div id="aside">
    <h1>Title</h1>
    </div>

    </div>
    <!--Side Widgets: End-->

    <!-- Main Content: Start-->
    <div id="content"> Content goes here... </div>
    <!-- Content: End-->

    </div>
    <!-- Site Wrapper: End-->

    </body>
  • resolved my own issue...by removing the float from the wrapper.

    div#asideWrapper {
    margin-top: 10px;
    margin-right: -10px;
    }