Wie zwei Boxen in CSS unterzubringen

Question

zuerst, ich bin sehr neu in CSS, versuchen, es zu lernen und zu verstehen. Ich habe mir den Kopf zerbrochen, um herauszufinden, wie man die kleine, ausgewählte Box mit den Feeds, den Facebook- und Twitter-Icons nach oben bringt, wo sie hingehört, gleich neben dem Schullogo. Kannst du mir bitte helfen, die ausgewählte Box etwas höher zu stellen? Vielen Dank. Bitte überprüfen Sie den Link, Bild im Inneren, Stack lässt mich nicht Bilder hochladen.

http://cl.ly/3cyt

Hier ist der Code.

#header #inner { 
    float: left; 
    width: 960px; 
    clear: both; 
} 
    #header #logo { 
     height: 99px; 
     clear: both; 
     width: 730px; 
     float: left; 
} 
    #header #inner #logo #pandecta-logo { 
    float: left; 
} 
    #header #inner #logo #eld-logo { 
    float: right; 
} 
    #header #inner #logo a { 
     position: relative; 
     top: -22px; 
#header #inner #right { 
    width: 200px; 
    float: right; 
} 

"#right" ist die Twitter-, Facebook-, Feeds-Box.

Hier ist es das HTML

<div id="inner"> 
     <!-- Logo --> 
     <div id="logo"> 
      <a href="<?php echo get_option('home'); ?>/"> 
       <?php if (strlen($wpzoom_misc_logo_path) > 1) { ?> 
        <div id="pandecta-logo"> 
        <img src="<?php echo "$wpzoom_misc_logo_path";?>" alt="<?php bloginfo('name'); ?>" /> 
        </div> 
       <?php } else { ?><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" /><?php } ?> 
       <div id=eld-logo> 
       <img src="<?php bloginfo('stylesheet_directory'); ?>/images/eld.png" alt="Logo Escuela Libre de Derecho" /> 
       </div> 
      </a> 
     </div> 
     <div id="head_banner"> 
      <?php if (strlen($wpzoom_ad_head_imgpath) > 1 && $wpzoom_ad_head_select == 'Yes') {?> 
       <?php if (strlen($wpzoom_ad_head_imgpath) > 1) { echo stripslashes($wpzoom_ad_head_imgpath); }?> 
      <?php } ?> 

     </div> 

     <div id="right"> 
      <div id="social"> 
       <ul> 
        <?php if (strlen($wpzoom_twitter) > 0) { ?><li class="button"><a href="http://twitter.com/<?php echo $wpzoom_twitter; ?>" title="<?php echo"$wpzoom_twitter_heading"; ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/twitter.png" alt="Twitter" /></a></li><?php } ?> 

        <?php if (strlen($wpzoom_facebook) > 0) { ?><li class="button"><a href="<?php echo $wpzoom_facebook; ?>" title="<?php echo"$wpzoom_facebook_heading"; ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/facebook.png" alt="Facebook" /></a></li><?php } ?> 

        <?php if (strlen($wpzoom_rssicon) > 0) { ?><li class="button"><a href="<?php echo $wpzoom_rssicon; ?>" title="<?php echo"$wpzoom_rssicon_heading"; ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/rss.png" alt="RSS" /></a></li><?php } ?> 

       </ul> 
      </div> 

Dank

Answer 1

1. hinzufügen float: left zu #logo und #headbanner
2. hinzufügen float: right zu #right
3. Um w hatever kommt nach #header, füge clear: both hinzu: es stellt sicher, dass der Hauptinhalt sich nach allem, was du links oder rechts verschoben hast, positioniert, anstatt es zu überlappen.

Auch, wie zzzzBoy sagte, muss nicht jede ID in den Regeln erwähnt werden (z. B. #header #inner #logo # pandecta-logo). Sie können es einfach über die endgültige ID (# pandecta-logo) referenzieren, da IDs eindeutig sind und Sie sie nirgendwo anders im selben Dokument verwenden können.