CODEWITHSUNDEEP
htmlcss
Aerodynamika
Aerodynamika

Reputation: 8423

CSS Split screen in 4 equal parts with a border between them

I currently have a code that splits screen into 4 equal parts and it works, but I also want a 1px line that crosses the screen horizontally and vertically. Anybody has an idea how to make it happen?

CSS:

#NW { position:fixed; width:50%; height:50%; top:0;   left:0;   background:orange  }
#NE { position:fixed; width:50%; height:50%; top:0;   left:50%; background:blue    }
#SW { position:fixed; width:50%; height:50%; top:50%; left:0;   background:green   }
#SE { position:fixed; width:50%; height:50%; top:50%; left:50%; background:red     }

html:

<div id="NW"></div>
<div id="NE"></div>
<div id="SW"></div>
<div id="SE"></div>

Thank you!

Upvotes: 0

Views: 3188

Answers (2)

j08691
j08691

Reputation: 208012

Add:

#SE, #SW {
    border-top:1px solid white;
}
#NE, #SE {
    border-left:1px solid white;
}

jsFiddle example

Upvotes: 3

azochz
azochz

Reputation: 1055

You could mess around with left and right borders for the existing divs.

Example: 

#NW {
 border-right: 1px black solid;
 border-bottom: 1px black solid;  
}

#NE {
  border-left: 1px black solid;
  border-bottom: 1px black solid; 
}

#SW {
  border-right: 1px black solid; 
}

#SE {
  border-left: 1px black solid; 
}

I'm not sure I would set height/width with percentage when trying to add borders - might lead to overflow problems. Otherwise, this should work!

Upvotes: 1

Related Questions