CODEWITHSUNDEEP
htmlcssasp.net
user3175327
user3175327

Reputation: 103

Split screen into 4 quadrants with a border around each, not working with form tag

I am trying to divide a web page into 4 quadrants. I got this following code from this site. It works as long as the form tag is not added. I want the form tag. How could i achieve a 4 quadrant area with the following code.

I am not good at css. Please help

Here is my code. 

<html> 
<head>
   <style type="text/css">
   html, body
   {
        padding: 0;
        margin: 0;
        height: 100%;
        min-height: 100%;
        background: white;
    }



    div 
    {
        width: 50%;
        height: 50%;
        border: 1px solid black;
        margin: 0px -1px;
    }

    .pull-left 
    {
        float: left;
    }

    .pull-right 
    {
        float: right;
    }
   </style>
</head>
<body>
    <form runat="server">

    <div class="aqua pull-left"></div>

    <div class="blue pull-right" ></div>

    <div class="green pull-left bottom"></div>

    <div class="tan pull-right bottom"></div>

    </form>
</body>

Upvotes: 0

Views: 1491

Answers (1)

Mehdi Brillaud
Mehdi Brillaud

Reputation: 1866

You just need to specify the box-sizing , give them the right size and floating them to the left.

* {
  box-sizing: border-box;
}
html,
body,
form {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.box {
  width: 50%;
  height: 50%;
  border: 1px solid black;
  float: left;
}
//clearfix
.box:last-child::after {
  display: table;
  content: '';
  clear: both;
}
<form>
  <div class="aqua box"></div>

  <div class="blue box"></div>

  <div class="green box"></div>

  <div class="tan box"></div>
</form>

Upvotes: 2

Related Questions