Forum Moderators: not2easy

Message Too Old, No Replies

Css div width

         

alphaquad

2:43 pm on Sep 4, 2007 (gmt 0)

10+ Year Member



Hi im having a real problem...

Can anyone help me?

im working on a design which i cant get right. I cant figure out how to achieve what i want.

Basically i have a background image which is defined in the background-middle class. This is set as a background and sits behind the main content class. The main content class has a width of 758px.

This is what i cant acheive... to have the background image rezise on the left. It currently rezises from the right when the width is set to auto. I want both sides of the background to resize when the browser window is minimized.

here is a link to a site to show you what i have already

here is my html

<div class="background-middle">

<div class="maincontent">

<div class="homeimage">
<img src="../images/home_image.jpg" alt="Gaurdian Personal Alarm System" /></div>

<div class="pagecontent"><!-- TemplateBeginEditable name="body" -->
body
<!-- TemplateEndEditable --></div>

<br clear="all" />
</div>
</div>

An my css for maincontent and background middle:

.background-middle {
position: absolute;
width: auto;
height:auto;
margin-top:194px;
background-image:url(images/page_bg_middle.gif);
background-repeat: repeat-y;
}

.maincontent {
width:758px;
margin-left:92px;

}

Any ideas/advice would be greatly appriciated

[edited by: jatar_k at 2:47 pm (utc) on Sep. 4, 2007]
[edit reason] no urls thanks [/edit]

Marshall

6:49 am on Sep 5, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



alphaquad,

I am assuming you want the background to have equal spacing on the left and right of your <div class="maincontent">. Based on this assumption, I suggest the following changes.

.background-middle {
width: 942px;
height:100%;
margin:194px auto 0 auto;
padding: 0 92px 0 92px;
text-align: left; /* IE hack */
background-image:url(images/page_bg_middle.gif);
background-repeat: repeat-y;
}

.maincontent {
width:758px;
margin: 0 auto;
}

This CSS will center the should center the .background-middle on the screen and center the .maincontent within the background providing 92px of spacing on either side. again, this is if I assumed correctly as to what you want to achieve.

Marshall