CODEWITHSUNDEEP
htmlcss
jhamm
jhamm

Reputation: 25062

Split screen into 4 quadrants with a border around each

I have split my screen into 4 quadrants. 

<html>
    <head>
        <link rel="stylesheet" href="test.css" />
    </head>
    <body>
        <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>
    </body>
</html>

and here is my css:

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
    background: black;
}

div {
    width: 50%;
    height: 50%;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

I want a black border around each one of my squares. When I add a border, then my squares line up vertically, while alternating on the left and right of the screen. I know this is a simple fix, but have been stuck at it for a while. Any help would be great. Thanks.

Upvotes: 1

Views: 5139

Answers (2)

Romain
Romain

Reputation: 1948

I improove a litle your code but, you need to define exactly what you need.

here is the link: http://jsfiddle.net/NMbbS/5/

Css:

    html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
    background: black;
}

div {
    width: 48%;
    height: 50%;
    border:1%;
    border: solid #a1a1a1;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

The border causes the width of the div elements to increase forcing them on to the next line. You can account for the border by specifying a negative margin on the div.

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

Working Example http://jsfiddle.net/zB3zf/

Upvotes: 2

Related Questions