CODEWITHSUNDEEP
htmlcss
Alban Lusitanae
Alban Lusitanae

Reputation: 235

DIV HEIGHT and WIDTH full page centering not working

Background:

I'm trying to visualize the structure for my future pages and containers in the full screen.

Current JSFiddle:

Available here.

<div class="top">top</div>
<div class="middleleft">left</div>
<div class="center">center</div>
<div class="middleright">right</div>
<div class="bottom">bottom</div>

.top
{
background-color: yellow;
height: 20%;
}

.middleleft
{
float: left;
    background-color: blue;
width: 20%;
}

.center
{
float: left;
        background-color: white;
width: 60%;
margin: auto;
height: 60%;
}

.middleright
{
float:left;
    background-color: red;
width: 20%;
}

.bottom
{
height: 20%;
background-color: green;
}

Problem:

For some reason, even with height defined on the CSS, it does not fill the entire screen to the bottom, linking only enough background color height and width until the text ends.

Need:

What code change is needed to fill the screen to the dimensions it has (like the 60% width on the center div), without having to write characters to the bottom to fill out the div on the screen?

Code type restrictions:

I do not wish to use JavaScript or JQuery in the solution, only CSS and HTML.

Many Thanks

Upvotes: 2

Views: 114

Answers (3)

user319940
user319940

Reputation: 3317

This can be achieved, but I think you need to ask yourself why you want to do this. Today, with mobile there is no standard screen size, so a full screen for one screen is not going to be a full screen for another.

Instead, why not try adding some real content to your proposed structure and see how it stacks up then?

Or, if it's purely for mockup purposes, then maybe use some graphics software where it's much easier and quicker to move things around.

Upvotes: 0

eggman
eggman

Reputation: 423

Wrap the top/center/bottom content into one class allowing the left/right divs to merely sit outside of the wrapper.

Upvotes: 0

Candlejack
Candlejack

Reputation: 445

JSFIDDLE CODE

I added this:

html, body {height:100%;}

Then I set your center div to height 100% (and made it pink so it can be seen more easily).

EDIT: I left your side divs alone as I'm not sure what you want to do with those, but I hope this helps.

Upvotes: 2

Related Questions