div嵌套显示不正确

Question

最后学习HTML5和CSS，但由于某种原因，我无法让我的代码正确显示。一切都以我想要的方式呈现，除了“topad”，它根本没有出现。如果我从div行中删除id，它将显示没有问题。

我知道我的代码可能是一团糟，但我只想知道为什么嵌套的div不会显示我期待的方式（并排）。

HTML：

<div id="branding" class="clearfix"> 
    <div id="toplogo"> 
    <?php if (! is_singular()) { echo '<h1>'; } ?> 
     <a href="<?php echo esc_url(home_url('/')); ?>" title="<?php esc_attr_e(get_bloginfo('name'), 'blankslate'); ?>" rel="home"> 
      <img src="<?php echo esc_url(home_url('/')); ?>wp-content/themes/smcomics/images/logo.jpg" /> 
     </a> 
    <?php if (! is_singular()) { echo '</h1>'; } ?> 
    </div> 
    <div id="topad">blahblahblah</div> 
</div> 

CSS：

body { 
width: 1000px; 
margin-left:auto; 
margin-right:auto; 
background-color: #ddd; 
} 

#header { 
width: 100%; 
margin-left: auto; 
margin-right: auto; 
background-color: #f9b7d3 
} 

#branding { 
width: 100%; 
margin-left: auto; 
margin-right: auto; 
background-color: #a1b2c3; 
} 

#toplogo { 
width: 237; 
height: 100; 
float: left; 
} 

#topad { 
width: 728; 
height: 90; 
float: right; 
background-color: #023452; 
} 

.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 
.clearfix {display:inline-block;} 
/* Hide from IE Mac \*/ 
.clearfix {display:block;} 

Answer 1

你错过了你的CSS中的id的toplogo和topad

#toplogo { 
width: 237px; 
height: 100px; 
float: left; 
} 

#topad { 
width: 728px; 
height: 90px; 
float: right; 
background-color: #023452; 
}