7 replies [Last post]
SumdayHero
SumdayHero's picture
Offline
Regular
Last seen: 7 years 20 weeks ago
Timezone: GMT+2
Joined: 2012-04-11
Posts: 12
Points: 16

So my problem is that as soon as there is a scrollbar or if you resize your browser window my two divs that both have width: 100%, height 100% dont resize with the window.

Here is my site link that i am working on: http://www.sculpturecasting.co.za/

You will notice if you scroll down, both div's remain the same height as the site was originally loaded as. Any idea how i fix this? both the right and the left div must resize 100% both ways.

Any help will be much appreciated Smile

eyoung100
eyoung100's picture
Offline
Regular
Texas, USA
Last seen: 7 years 34 weeks ago
Texas, USA
Timezone: GMT-5
Joined: 2012-04-05
Posts: 14
Points: 17

See this post,

Try the idea I outlined there, as setting left div and right div in a container of there own will alleviate the resizing issue, when a fixed size is added to twocolumns

Footer and Page Background

SumdayHero
SumdayHero's picture
Offline
Regular
Last seen: 7 years 20 weeks ago
Timezone: GMT+2
Joined: 2012-04-11
Posts: 12
Points: 16

A difference?

But I don't see how adding them within another container will make a difference? They both need to be 100% width and height. As i have 2 difference backgrounds being repeated 100% both ways. If I put them within another container, that container would have to also be 100% in width and height?

eyoung100
eyoung100's picture
Offline
Regular
Texas, USA
Last seen: 7 years 34 weeks ago
Texas, USA
Timezone: GMT-5
Joined: 2012-04-05
Posts: 14
Points: 17

SumdayHero wrote: But I don't

SumdayHero wrote:

But I don't see how adding them within another container will make a difference? They both need to be 100% width and height. As i have 2 difference backgrounds being repeated 100% both ways. If I put them within another container, that container would have to also be 100% in width and height?

The width of twocolums is going to be in pixels. The width of leftcol and rightcol stays at 100%, thereby taking 100% of the available pixels in the div, set the height of all 3 container to auto then tile your backgrounds by using the background property in the div and use repeat-y.

SumdayHero
SumdayHero's picture
Offline
Regular
Last seen: 7 years 20 weeks ago
Timezone: GMT+2
Joined: 2012-04-11
Posts: 12
Points: 16

Sorry could you demonstrate.

Sorry could you demonstrate. I am abit confused. so here is my main css code for the divs:

html, body {
	background:url('images/bg.jpg') repeat top left;
	height: 100%; !important
	width: 100%;
}
 
body.wrapper {
	height: 100%;
	width: 100%;
	position:relative;
	resize: both;
}
 
#leftDiv {
	background:url('images/bg.jpg') repeat top right;
	width: 222px;
	height: 100%;
	position: absolute;
	z-index: 3;
}
 
#rightDiv {
	background: url('images/bg-light.jpg') repeat top left;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}

What should i be doing?

SumdayHero
SumdayHero's picture
Offline
Regular
Last seen: 7 years 20 weeks ago
Timezone: GMT+2
Joined: 2012-04-11
Posts: 12
Points: 16

Check my code below

Sorry for some reason my post duplicated 4 times.

SumdayHero
SumdayHero's picture
Offline
Regular
Last seen: 7 years 20 weeks ago
Timezone: GMT+2
Joined: 2012-04-11
Posts: 12
Points: 16

Check my code below

Sorry could you demonstrate. I am abit confused. so here is my main css code for the divs:

html, body {
	background:url('images/bg.jpg') repeat top left;
	height: 100%; !important
	width: 100%;
}
 
body.wrapper {
	height: 100%;
	width: 100%;
	position:relative;
	resize: both;
}
 
#leftDiv {
	background:url('images/bg.jpg') repeat top right;
	width: 222px;
	height: 100%;
	position: absolute;
	z-index: 3;
}
 
#rightDiv {
	background: url('images/bg-light.jpg') repeat top left;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}

What should i be doing?

SumdayHero
SumdayHero's picture
Offline
Regular
Last seen: 7 years 20 weeks ago
Timezone: GMT+2
Joined: 2012-04-11
Posts: 12
Points: 16

Check my code below

Sorry could you demonstrate. I am abit confused. so here is my main css code for the divs:

html, body {
	background:url('images/bg.jpg') repeat top left;
	height: 100%; !important
	width: 100%;
}
 
body.wrapper {
	height: 100%;
	width: 100%;
	position:relative;
	resize: both;
}
 
#leftDiv {
	background:url('images/bg.jpg') repeat top right;
	width: 222px;
	height: 100%;
	position: absolute;
	z-index: 3;
}
 
#rightDiv {
	background: url('images/bg-light.jpg') repeat top left;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}

What should i be doing?