Reputation: 1

Div not displaying proprerly

html

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

css

body{
  height:100%
}
.left{
  float:left;
  background-color:#ccffcc;
  height:100%;
  width:50%;
}
.right{
  height:100%;
  width:50%;
  float:right;
  background-color:#ffcc99
}

I've set the parent element's height

What do I have to do to see my two divs ?

It seems to only work when I use pixels but I dislike using pixels...

Upvotes: 0

Answers (6)

Padmanathan J

Reputation: 4620

if you have any issue in this css. you can also use inline css <body style="height:100%"> Because may be its a css conflict issue.

<body style="height:100%">


        <div class="left"></div>
        <div class="right"></div>

    </body>


    <style>
    html{
       height:100%;        
   } 

    .left
    {
    float:left;
    background-color:#ccffcc;
    height:100%;
    width:50%;
    }
    .right
    {
    height:100%;
    width:50%;
    float:right;
    background-color:#ffcc99
    }
    </style>

Updated Fiddle

Upvotes: 0

Amit

Reputation: 3289

<html>
<head>
<title>Test HTML</title>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
<html>



<style>

body,html{
height:100%
}
.left
{
float:left;
background-color:#ccffcc;
height:100%;
width:50%;
}
.right
{
height:100%;
width:50%;
float:right;
background-color:#ffcc99
}
</style>

Hope This Helps :)

Upvotes: 0

user3145388

Reputation: 1

<html>
    <body>


        <div class="left"></div>
        <div class="right"></div>

    </body>


    <style>

    body{
    `height:100%
    }
    .left
    {
    float:left;
    background-color:#ccffcc;
    height:100%;
    width:50%;
    }
    .right
    {
    height:100%;
    width:50%;
    float:right;
    background-color:#ffcc99
    }
    </style>
    </html>

Upvotes: 0