CODEWITHSUNDEEP
htmlcss
finjay
finjay

Reputation: 15

position of div inside another

I have read a lot on posts about this, but just can't seem to find a solution. Can you help me, please? I need DIV7 inside DIV3 to be (floating?) on the left side and top of DIV3 and i want it to be 20% width and follow (inherit?) height of DIV3.

Also, why is there a small gap between DIV3 and DIV8???

(x)html:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="./css/css.css"/>
    </h:head>

    <h:body>
        <div id="Div1">
            <div id="Div2">
                <div id="Div4">DIV4</div>
                <div id="Div5">DIV5</div>
                <div id="Div6">DIV6</div>
            </div><!--Closing Div2-->

            <div id="Div3"><p>DIV3</p>
                <div id="Div7"><p>DIV7</p></div>
            </div><!--Closing Div3-->

            <div id="Div8"><p>DIV8</p></div>

        </div><!--Closing Div1-->
    </h:body>

</html>

CSS:

 html, body, #Div1 {
    width:100%;
    margin:0 auto;
    float:left;
    background-color: pink;
    min-height: 100%;
    height: 100%; }

#Div2 {
    width:100%;
    float:left;
    background-color: lightgray;
    height: 15%; }

#Div3 {
    width:100%;
    clear:both;
    background-color: lightblue;
    min-height: 75%;
    text-align: center; }

#Div4, #Div6 {
    float:left;
    width:20%; }

#Div5 {
    float:left;
    width:60%; }

#Div7 {
    width:20%;
    background-color: red; }

#Div8 {
    width: 100%;
    height: 10%;
    text-align: center;
    background-color: gold; }

Upvotes: 0

Views: 52

Answers (1)

Rasel
Rasel

Reputation: 5734

p is block element so your <div> 7 going under it; change markup as follows...

<div id="Div3">
   <div id="Div7">
         <p>DIV7</p>
    </div>
    <p>DIV3</p>

 </div><!--Closing Div3-->

link

Upvotes: 2

Related Questions