Forums

zemaker

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>

zemaker

resolved my own issue...by removing the float from the wrapper.

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

treehouse : what would you like to learn today?

Forums

Aligning Content