CODEWITHSUNDEEP
htmlcss
Jviaches
Jviaches

Reputation: 843

How to split screen with three divs

How to split screen with three divs by following demands: - main div should cover whole screen (100%x100%) - sub div after div should cover main div( each sub div = 33% )

I tried to do it as following :

    <div style="width:100%; height :100%;  background-color:Lime;">
    sss
        <div style="width:100%; height:34%; background-color:Blue;">
        a
        </div>
        <div style="width:100%; height:33%; background-color:Gray;">
        b
        </div>
        <div style="width:100%; height:33%; background-color:Aqua;">
        c
        </div>        
    </div>

Upvotes: 3

Views: 23729

Answers (4)

Bran18
Bran18

Reputation: 1

Use the display: flex and make sure to set 33% as your width for each, that way you make sure that the three of them occupy 1/3 of the screen

Upvotes: 0

user619578
user619578

Reputation: 41

If you want to remove the white margin, set the style to "margin:0" on the body tag.

Upvotes: 0

Mike C
Mike C

Reputation: 3117

I think your main source of confusion is that your 'main' div is only going to take up as much space as it needs to satisfy the style requirements. It will take 100% of the size of the parent element, but if that size is not defined, it only grows to the minimum size required by whatever it contains.

In this fiddle, I just wrapped your code in a div defined to be 200px high, and it seems to work fine (however, note that the 100% is actually diminished by the fact that 'sss' is included in the main div, before the contained divs).

Upvotes: 1

Litek
Litek

Reputation: 4888

You need to set height of body and html to 100%. See this fiddle.

Upvotes: 7

Related Questions