Disposition du fluide: élément de côté plus grand que l'élément principal

Question

J'essaie de faire flotter mon élément de côté à droite de mon élément principal et, pour une raison quelconque, il est trop grand. J'ai spécifié la largeur de la principale comme 60% et le côté comme 39% (parce que l'élément de corps est de 99%) mais en quelque sorte ce rapport n'est tout simplement pas affiché correctement.

Voici le code html et css:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html { 
 
    background: url("/images/sheetmusic.gif") repeat 0 0; 
 
    background-size: 30%; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
} 
 

 
body { 
 
    font-family: arial, Helvetica, sans-serif; 
 
    font-size: 100%; 
 
    width: 99%; 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
    background-color: rgba(255, 248, 228, 0.95); 
 
    border: 2px solid #585858; 
 
} 
 

 
a:link { 
 
    color: #e07400; 
 
} 
 

 
a:visited { 
 
    color: gray; 
 
} 
 

 
a:hover, 
 
a:focus { 
 
    font-style: italic; 
 
} 
 

 

 
/*====================HEADER========================*/ 
 

 
header img { 
 
    float: left; 
 
    width: 100%; 
 
    max-width: 136.078px; 
 
} 
 

 
.orange_header { 
 
    color: #e07400; 
 
} 
 

 
header h1 { 
 
    margin: 0 auto; 
 
    font-size: 200%; 
 
    text-shadow: 2px 1px 1px black; 
 
    padding-top: 0.7em; 
 
    padding-bottom: 0.5em; 
 
} 
 

 

 
/*====================NAV MENU========================*/ 
 

 
#nav_menu a { 
 
    margin: 0; 
 
    border-right: 1px solid silver; 
 
} 
 

 
#nav_menu a.current { 
 
    color: white; 
 
    display: block; 
 
    background-color: #a78349; 
 
} 
 

 
#nav_menu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    height: 34px; 
 
} 
 

 
#nav_menu>ul>li { 
 
    float: left; 
 
    width: 20.748125%; 
 
    /* 165.985/800*100 */ 
 
} 
 

 
#nav_menu ul li a { 
 
    display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 0.5em 0; 
 
    margin: 0; 
 
    background-color: #ab6b06; 
 
    color: white; 
 
} 
 

 
#nav_menu ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
} 
 

 
#nav_menu ul ul li { 
 
    float: none; 
 
} 
 

 
#nav_menu ul li:hover>ul { 
 
    display: block 
 
} 
 

 
#nav_menu>ul::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
#lastmenuitem { 
 
    border: none; 
 
} 
 

 

 
/*====================MAIN========================*/ 
 

 
main { 
 
    display: block; 
 
    position: relative; 
 
    width: 60%; 
 
} 
 

 
main h2 { 
 
    font-size: 150%; 
 
    padding-top: 0.5em; 
 
    padding-bottom: 0.2em; 
 
    padding-left: 1em; 
 
} 
 

 
strong { 
 
    color: #ab6b06; 
 
} 
 

 
main p { 
 
    font-size: 100%; 
 
    padding-left: 1.5em; 
 
    padding-right: .5em; 
 
    padding-bottom: 1em; 
 
} 
 

 
main ul, 
 
ol { 
 
    padding-left: 3em; 
 
    padding-right: .5em; 
 
    padding-bottom: 1em; 
 
    line-height: 1.2em; 
 
} 
 

 

 
/*=============ASIDE====================*/ 
 

 
aside { 
 
    display: block; 
 
    float: right; 
 
    width: 39%; 
 
    margin-top: 1em; 
 
    border-left: 2px solid #ab6b06; 
 
} 
 

 
aside h3 { 
 
    font-size: 120%; 
 
    margin-left: 1em; 
 
    margin-bottom: 0.2em; 
 
} 
 

 
aside>p { 
 
    padding: 0; 
 
    margin-left: 1em; 
 
    margin-right: .5em; 
 
    word-wrap: break-word; 
 
} 
 

 
#sittingpic { 
 
    padding-left: 2em; 
 
} 
 

 
blockquote { 
 
    margin-left: 1em; 
 
    margin-right: .5em; 
 
    margin-bottom: 1em; 
 
    text-indent: 0; 
 
} 
 

 
.image { 
 
    position: relative; 
 
    border: 1px solid #333; 
 
    margin: 2%; 
 
    margin-left: 1em; 
 
} 
 

 
.image img { 
 
    width: 70%; 
 
    max-width: 150px; 
 
} 
 

 
iframe { 
 
    padding-left: 2em; 
 
    width: 90%; 
 
    max-width: 720px; 
 
} 
 

 

 
/*====================FOOTER========================*/ 
 

 
footer { 
 
    background-color: #ab6b06; 
 
    font-family: georgia, serif; 
 
    font-size: 90%; 
 
    text-align: center; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Annemie's Guitar School | Learn Classical Guitar</title> 
 
    <link rel="shortcut icon" href="images/favicon.ico"> 
 
    <link rel="stylesheet" href="styles/normalize.css"> 
 
    <link rel="stylesheet" href="styles/main.css"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <img src="images/guitarlogo2.png" alt="Guitar" height="109.93"> 
 
    <h1 class="orange_header">Annemie's Guitar School</h1> 
 
    </header> 
 
    <nav id="nav_menu"> 
 
    <ul> 
 
     <li><a href="index.html" class="current">Home</a></li> 
 
     <li><a href="useful_links.html">Useful links</a></li> 
 
     <li><a href="lesson_intro.html">Lessons</a> 
 
     <ul> 
 
      <li><a href="sittingpos.html">Sitting position</a></li> 
 
      <li><a href="readingmusic.html">Reading music</a></li> 
 
      <li><a href="rhtech.html">Right Hand Technique</a></li> 
 
      <li><a href="lhtech.html">Left Hand Technique</a></li> 
 
      <li><a href="pracandmem.html">Practising and Memorization</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="bio.html" id="lastmenuitem">Bio</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <main> 
 
    <aside> 
 
     <h3>History of the guitar</h3> 
 
     <p>In this documentary, Julian Bream walks you through the history of the classical guitar in Spain. He plays pieces that are relevant to the different eras of the guitar. Although the documentary is fairly slow paced - it is worth the watch! <br> 
 
     <a href="video.html">Watch video</a> 
 
     </p> 
 
     <h3>Anatomy of the guitar</h3> 
 
     <img src="images/clas-diagram.jpg" alt="Guitar Diagram" class="image" height="300"> 
 
     <h3>Quote of the day</h3> 
 
     <blockquote>&ldquo;Sometimes you want to give up the guitar, you&rsquo;ll hate the guitar. But if you stick with it, you&rsquo;re gonna be rewarded&rdquo; ~<cite> Jimi Hendrix</cite></blockquote> 
 
    </aside> 
 

 
    <h2 class="orange_header">Classical Guitar</h2> 
 
    <p>The guitar is arguably the most popular and versatile instrument in the world. It is used in a variety of different musical styles like rock, blues, folk and pop. <strong>This school focusses on the classical style of playing. </strong> With classical 
 
     guitar you use nylon strings and play all the voices (bass, alto, soprano) using a special right hand technique. The guitar becomes a &ldquo;mini orchestra&rdquo;.</p> 
 

 
    <h2 class="orange_header">Before you start...</h2> 
 
    <p>This school requires you to know a few basics before you can start the lessons. <br>We assume that you can:</p> 
 
    <ul> 
 
     <li>Tune your guitar</li> 
 
     <li>Play chords comfortably</li> 
 
     <li>Read tablature</li> 
 
    </ul> 
 
    <p>If you can&lsquo;t do these things - do not worry!<br> We suggest you make use of the <a href="useful_links.html">&ldquo;Useful links&rdquo;</a> page to teach yourself the basics of guitar.</p> 
 
    <h2 class="orange_header">The Lessons</h2> 
 
    <ol> 
 
     <li><a href="sittingpos.html">Sitting position</a></li> 
 
     <li><a href="readingmusic.html">Reading music</a></li> 
 
     <li><a href="rhtech.html">Right Hand Technique</a></li> 
 
     <li><a href="lhtech.html">Left Hand Technique</a></li> 
 
     <li><a href="pracandmem.html">Practising and Memorization</a></li> 
 
    </ol> 
 
    <h2 class="orange_header">About Annemie</h2> 
 
    <p>Find out more about the author of this site by going to <a href="bio.html">the Bio page.</a></p> 
 

 
    </main> 
 
    <footer> 
 
    <p>&copy;2017, Annemie's Guitar School</p> 
 
    </footer> 
 
</body> 
 

 
</html>

Answer 1

Je pense que vous avez mal compris le concept de largeur. Vous définissez le width de main sur 60%. Cela ne couvrira que le 60% du tag body. Vous définissez également le width de aside à 39%, mais cet élément est parent à main. Cela signifie qu'il couvrira le 39% du conteneur main. Je ne sais pas si j'ai compris votre question (je n'ai pas la réputation maintenant de demander plus de détails avec des commentaires) donc je considère que vous voulez quelque chose comme ceci (excuse mes mauvaises compétences de dessin):

click to see the image

je vous propose d'apporter les modifications suivantes:

d'abord créer un nouvel élément div (je l'ai appelé main-content) et ajouter le contenu gauche flottant à l'intérieur.

<main> 
    <aside> 
     <h3>History of the guitar</h3> 
     <p>In this documentary, Julian Bream walks you through the history of the classical guitar in Spain. He plays pieces that are relevant to the different eras of the guitar. Although the documentary is fairly slow paced - it is worth the watch! <br> 
     <a href="video.html">Watch video</a> 
     </p> 
     <h3>Anatomy of the guitar</h3> 
     <img src="images/clas-diagram.jpg" alt="Guitar Diagram" class="image" height="300"> 
     <h3>Quote of the day</h3> 
     <blockquote>“Sometimes you want to give up the guitar, you’ll hate the guitar. But if you stick with it, you’re gonna be rewarded” ~<cite> Jimi Hendrix</cite></blockquote> 
    </aside> 

    <!-- the newly created div --> 
    <div id="main-content"> 
    <h2 class="orange_header">Classical Guitar</h2> 
    <p>The guitar is arguably the most popular and versatile instrument in the world. It is used in a variety of different musical styles like rock, blues, folk and pop. <strong>This school focusses on the classical style of playing. </strong> With classical 
     guitar you use nylon strings and play all the voices (bass, alto, soprano) using a special right hand technique. The guitar becomes a “mini orchestra”.</p> 

    <h2 class="orange_header">Before you start...</h2> 
    <p>This school requires you to know a few basics before you can start the lessons. <br>We assume that you can:</p> 
    <ul> 
     <li>Tune your guitar</li> 
     <li>Play chords comfortably</li> 
     <li>Read tablature</li> 
    </ul> 
    <p>If you can‘t do these things - do not worry!<br> We suggest you make use of the <a href="useful_links.html">“Useful links”</a> page to teach yourself the basics of guitar.</p> 
    <h2 class="orange_header">The Lessons</h2> 
    <ol> 
     <li><a href="sittingpos.html">Sitting position</a></li> 
     <li><a href="readingmusic.html">Reading music</a></li> 
     <li><a href="rhtech.html">Right Hand Technique</a></li> 
     <li><a href="lhtech.html">Left Hand Technique</a></li> 
     <li><a href="pracandmem.html">Practising and Memorization</a></li> 
    </ol> 
    <h2 class="orange_header">About Annemie</h2> 
    <p>Find out more about the author of this site by going to <a href="bio.html">the Bio page.</a></p> 
    </div> 
    <!-- new div ends here --> 


    </main> 

Puis changer votre style css à ceci:

/* we removed the width property to cover the whole page. */ 
main { 
    display: block; 
    position: relative; 
} 

aside { 
    display: block; 
    float: right; 
    width: 40%; /* this was changed */ 
    margin-top: 1em; 
    border-left: 2px solid #ab6b06; 
} 

#main-content { 
    width: 60%; 
}