CODEWITHSUNDEEP
phpcsshtml
user3369820
user3369820

Reputation: 15

div Nesting Isn't Displaying Properly

Finally learning HTML5 and CSS, but for some reason I can't get my code displaying properly. Everything shows up the way I want it to except for "topad," which is just not showing up at all. If I remove the id from the div line, it shows up without a problem.

I know my code is probably a mess, but I just want to know why nested divs won't display the way I'm expecting (side by side).

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

Upvotes: 1

Views: 65

Answers (1)

Vikas Ghodke
Vikas Ghodke

Reputation: 6665

You missed to write PX in your css for id's toplogo and topad

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

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

Upvotes: 2

Related Questions