CODEWITHSUNDEEP
html
2Big2BeSmall
2Big2BeSmall

Reputation: 1378

Splitting a screen in HTML webpage

need to build a web page which is split. How can I split screen into 5 different areas: 

North, 
South, 
East, 
West and Center .

how can I do it in HTML PAGE ?

Upvotes: 0

Views: 866

Answers (1)

Ava
Ava

Reputation: 2429

Like so:

HTML (within body)

<div id="North">
    North Area
</div>
<div id="Wrapper">
    <div id="West">
        West Area
    </div>
    <div id="Center">
        Center Area
    </div>
    <div id="East">
        East Area
    </div>
</div>
<div id="South">
    South Area
</div>

CSS

#North,#Wrapper,#South
{
    width: 100%;
}

#Center,#East,#West
{
    display: inline-table;
    width: 32%;
    vertical-align: top;
}

body
{
    text-align: center;
}

The north, south, and Wrapper and just fullwidth objects, where the north is on top, and south is below the rest of the content. Then, west, east, and center are just set to each be 33% of the screen width within their area, so they sit nicely next to each other.

Example: JSFiddle

Upvotes: 1

Related Questions