SP23-BSE-B Quiz 1

Suppose you have HTML written as below and whose output looks like the picture attached. Label the diagram wih appropriate css properties which have caused the output to look like this.

<div class="div">
        div1
        <div class="div2"> div2
            <ul id="menu">
             <li><a href="">link</a></li>
             <li><a href="">link</a></li>
             <li><a href="">link</a></li>
            </ul>
        </div>
        <div class="div3">
            div3
            <div class="div4">div4</div>
            <div class="div5">div5</div>
            <div class="div6">div6</div>
        </div>
    </div>
    <div class="div7">div7</div>

Solution

<style>
        .div2{
            text-align: right;
        }
        #menu li{
            display: inline;
        }
        div{
            border:3px solid black;
            padding: 5px;
            margin:5px;
        }
        .div4,.div5{
            float:left;
            width: 15%;
        }
        .div5{
            clear:both;
        }
        .div6{
            float:right;
            width: 15%;
            min-height: 100px;
        }
        .div3{overflow: hidden;}
        .div7{
            position: fixed;
            top:10px;
            right:10px;
            background-color: black;
            color:white;
        }
    </style>