5 replies [Last post]
3maksim
Offline
newbie
Tallinn
Last seen: 2 years 35 weeks ago
Tallinn
Timezone: GMT+2
Joined: 2012-02-21
Posts: 3
Points: 4

Hello,

I have an issue with my layout.
I have a html file with the following code:

<body>
	<div class="page">
	</div>
</body>

and CSS file with the following arguments:
body {
	margin-left: 10%;
	margin-right: 10%;
}
.page {
	position:relative;
	width:100%;
	height:100%;
	background-color:black;
}

Issue is that there is no background color displayed. I'm trying to get a black background for my page class div. Can please someone explain me what is wrong with this code?

purvesweb
purvesweb's picture
Offline
Regular
Scotland
Last seen: 2 years 21 weeks ago
Scotland
Timezone: GMT+1
Joined: 2011-02-15
Posts: 13
Points: 27

Area with margins doesnt display background color

The background colour is there, you need to put a height onto the container for example, 300px for you to see it or let the content within .page class fill the space thus automatically getting bigger in height.

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 1 year 2 weeks ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

we need put some space in

we need put some space in that div like below:

<div class="page">&nbsp;
	</div>

without space the browser doesn't consider anything in this div. now its shows the background color.

3maksim
Offline
newbie
Tallinn
Last seen: 2 years 35 weeks ago
Tallinn
Timezone: GMT+2
Joined: 2012-02-21
Posts: 3
Points: 4

Thank you. It is showing the

Thank you. It is showing the background color now, but my page classes height:100% doesn't seem to work, I want it to be as high as is the window of the browser, but it's not.

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 1 year 2 weeks ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

HTML is pretty much just a

HTML is pretty much just a bunch of containers stacked inside each other.
First we have the container,
then the container inside of that,and the

container inside of that.

like this. it is working fine now.

html{
height:100%;
}
body {
	margin-left: 10%;
	margin-right: 10%;
	height:100%;
}
.page {
	position:relative;
	min-height: 100%;
	width:100%;
	background-color:black;
}

html:

<div class="page">&nbsp;
	</div>

3maksim
Offline
newbie
Tallinn
Last seen: 2 years 35 weeks ago
Tallinn
Timezone: GMT+2
Joined: 2012-02-21
Posts: 3
Points: 4

Great, it works! Thank you

Great, it works! Thank you balajidesign and others for replies.