6 Replies - 1941 Views - Last Post: 15 June 2015 - 02:26 PM

#1 swethapriya2001  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 15-June 15

Split screen into 4 quadrants with a border around each

Posted 15 June 2015 - 11:06 AM

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>




Is This A Good Question/Topic? 0
  • +

Replies To: Split screen into 4 quadrants with a border around each

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 13395
  • View blog
  • Posts: 53,459
  • Joined: 12-June 08

Re: Split screen into 4 quadrants with a border around each

Posted 15 June 2015 - 11:29 AM

Quote

I got this following code from this site.

I am curious - which thread?

Why do you use classes that are not in your CSS?

It seems you just copy/pasted what was on stack overflow two years ago..
https://stackoverflo...der-around-each
Was This Post Helpful? 0
  • +
  • -

#3 swethapriya2001  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 15-June 15

Re: Split screen into 4 quadrants with a border around each

Posted 15 June 2015 - 11:45 AM

I just copy pasted from that stackoverflow link. It displays 4 quadrants as long as form tag is not added.
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 13395
  • View blog
  • Posts: 53,459
  • Joined: 12-June 08

Re: Split screen into 4 quadrants with a border around each

Posted 15 June 2015 - 11:47 AM

I copied that code, dumped into an ASPX page, and it displayed fine.
Was This Post Helpful? 0
  • +
  • -

#5 swethapriya2001  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 15-June 15

Re: Split screen into 4 quadrants with a border around each

Posted 15 June 2015 - 11:51 AM

Whether you could see 4 quadrants by adding form tag below <body> tag?
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 13395
  • View blog
  • Posts: 53,459
  • Joined: 12-June 08

Re: Split screen into 4 quadrants with a border around each

Posted 15 June 2015 - 12:32 PM

Yes.
Was This Post Helpful? 0
  • +
  • -

#7 swethapriya2001  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 15-June 15

Re: Split screen into 4 quadrants with a border around each

Posted 15 June 2015 - 02:26 PM

Here is how it looks for me Please see attachment
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1