I have a piece of code labeled as "vertikalni" and "baner". My goal is to place that section under the header and make it horizontal. The size of this section should match that of the header.
The vertical one doesn't necessarily have to stay in its current position, I just need to switch their placements. However, whenever I try to swap them using HTML and CSS, it ends up disrupting my entire layout.
https://i.sstatic.net/idC8u.png
body {
background-color: #EEE;
}
#wrapper {
margin: 0 auto;
background-color: #CCC;
border: 5px solid #000;
width: 692px;
/*750-2x5-2x24=692*/
padding: 24px;
}
header {
border: 2px solid #000;
height: 46px;
/*80-2x2-2x15=46*/
background-color: #FFF;
padding: 15px;
margin-bottom: 24px;
/*ili u delu ispod margin-top*/
}
#slika {
width: 204px;
/*238-2x15-2x2=204*/
height: 366px;
/*400-2x15-2x2=366*/
border: 2px solid #000;
background-color: #FFF;
margin-left: 24px;
padding: 15px;
float: left;
}
#pesma {
background-color: #FFF;
width: 254px;
/*306-2x2-2x24=254*/
height: 348px;
/*400-2x2-2x24=348*/
border: 2px solid #000;
padding: 24px;
float: left;
}
#vertikalni {
width: 100px;
margin-left: 24px;
/*ili u divu pesma margin-right*/
margin-bottom: 24px;
float: left;
}
footer {
background-color: #FFF;
height: 18px;
/*70-2x2-2x24=18*/
padding: 24px;
border: 2px solid #000;
clear: left;
}
footer p {
margin: 0px;
}
.baner {
width: 98px;
/*100-2x1=98*/
height: 98px;
/*100-2x1=98*/
border: 1px dashed #000;
background-color: #999;
float: left;
}
img {
width: 198px;
/*202-2x2=198*/
border: 2px solid #000;
}<div id="wrapper">
<header>
<p>Our greatest poets in the history of literature</p>
</header>
<div id="pesma">
<h1>Magic Doors</h1>
<p>In a world there exists,<br> full of all kinds of treasures,<br> And everything it has — shared with everyone,<br> In that lies its strength.</p>
<p>If you want houses, there are plenty,<br> Just take and build,<br> If bridges you seek, call on people,<br> Construct a giant bridge.</p>
<p>If songs you desire, they echo within,<br> Millions sing in harmony,<br> Each beckons you to work there,<br> Yet none compel you to stay.</p>
</div>
<div id="vertikalni">
<div class="baner"></div>
<div class="baner"></div>
<div class="baner"></div>
<div class="baner"></div>
</div>
<div id="slika">
<img src="images/mira.jpg" alt="Portrait">
<p><b>Mira Alečković</b></p>
</div>
<footer>
<p>This task's content was sourced from <a href="http://www.wikipedia.org">Wikipedia.</a></p>
</footer>
</div>