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