How to format one block element and one inline element?
Question
My assignment is to recreate the content on a wikipedia page in visual studio. I made separate divs for the intro paragraphs, the contents box, and the sidebar. I can't get the sidebar to float to the side of the intro text - it floats right but stays under the intro text. Is there an easy flexbox solution maybe? Any ideas?
I tried floating the contents box to the left and the sidebar to the right, but can't figure out how to move the sidebar up.
<body>
<h1>Sara Bareilles</h1>
<hr>
<h4>From Wikipedia, the free encyclopedia</h4>
<div class="content">
<div class="intro">
<p> <strong>Sara Beth Bareilles</strong> (/bəˈrɛlɪs/; born December 7, 1979)[1] is an American singer-songwriter and actress.</p>
<p>Bareilles has sold over one million albums ...as a bestseller.[5]</p>
</div>
<div class="contentsBox">
<div class="tocTitle"><strong>Contents</strong>[hide]</div>
<ul class="contentsSection">
<li>
<a href="#Life and career">
<span class="contentsNum">1</span>
<span class="contentsText">Life and career</span>
</a>
</li></ul>
</div>
<div class="sidebar" id="sidebar">
<span class="sidebarTitle"><b>Sara Bareilles</b></span>
<div class="photobox">
<img class="photo" src="440px-Sara_Bareilles.jpg" alt="Sara Bareilles sitting at the piano and singing" width="200px">
<p class="caption">Bareilles performing at the Troubadour in West Hollywood, California in October 2015</p>
</div>
<div class="infoItem">
<span class="infoItemTitle"><b>Born</b></span>
<span class="infoItemText">Sara Beth Bareilles</span>
</div>
1 answers
solution1
0 2019-08-28 04:31:08
Your question is not that clear, I made a codepen of your code, hope this is what you mean.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.