navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Repeat, height 100% column with css, will not work!!!

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> General Web Development >> Repeat, height 100% column with css, will not work!!!
Page: [1]
 
revsof

 

Posts: 7
Joined: 1/1/2008
Status: offline

 
Repeat, height 100% column with css, will not work!!! - 5/8/2008 20:09:40   
Please help, I have been friggin around with this css now for 7hrs and am at wits end.

I am trying to make it so that the column which contains the text will expand downward according to th appropriate content (once I get it working I will be using it throughout the site).

I have it I guess 90% working. I have it expanding, however I am also trying to add a black edge along both sides as to mock some padding (which wasnt working either) I've tried 100 solutions to this already and am sure someone out there knows one that will work.

the page is in progress at: http://abhayaapparel.com/about.html, it goes closer to the bottom in Firefox 2.0, than it does in EI 7.0. I need it to go to the bottom in both.

Here is the relevant CSS:

#editable {
	position:absolute;
	z-index:600;
		   }
		   
#mainBack {
   float:left;
   position:absolute;
   margin-left:166px;
   margin-top:240px;
}

			
#blackCont {
   width:415px;
   float:left;
   margin-left:215px;
   margin-top:290px;
   position:absolute;
   z-index:600;
   font-size:13px; 
}

#theback {background:#000000 repeat-y;
		  height:100%;
		  }

#blackEdges {background:#000000 repeat-y;
			 height:100%;
			 min-height:100%;
			 margin-left:191px;
			 margin-top:380px;
			 width:454px;
			 position:absolute;
			 }		  
		



And heres the HTML:
<div id="blackCont">
<div id="theback">
<h1>About Abhaya Apparel</h1>
<strong>Abhaya</strong> is a Sanskrit word that means <strong>“freedom from fear.”</strong>  Abhaya can be bold and outrageous or receptive and silent.  In any case, Abhaya is the spirit that faces the world with complete openness.  It is not afraid of judgement and it does not judge.  Abhaya plants its feet solidly on the ground while opening endlessly to the vast possibility of the sky.  With this spirit, in this place beyond fear, one is free to create.  Life becomes a practice of channeling from a limitless source of creative energy.  Life becomes a great game.<br><br>

Abhaya Apparel creates ecstatic new designs in the feverish wee hours of the night.  Abhaya Apparel takes the dreams and visions of a million sleeping souls and projects them onto unique clothing to produce the finest in wearable wisdom.  We obtain all of our clothing from ethical, <strong>environmentally-conscious</strong> sources.  Our t-shirts and hoodies are <strong>100% organic</strong>, purchased at a fair price from producers who receive all the benefits from the profits of their labour.  Our jackets and hats are all <strong>unique items</strong>:  authentic military surplus recreated and given new life with the fearless stamp of Abhaya.<br><br>

Our designers leave no stone of the mental landscape unturned.  Sometimes we take our inspiration from the perfection of the natural world to <strong>uplift your mind and energize your day</strong>.  At other times, we dig into the compost and find the bones of your nightmares to challenge your expectations and give you shivering tics in your chest.  <strong>Abhaya Apparel is not what you think, but nor are we otherwise.</strong>
<br><br>


<strong>Abhaya</strong> is a Sanskrit word that means <strong>“freedom from fear.”</strong>  Abhaya can be bold and outrageous or receptive and silent.  In any case, Abhaya is the spirit that faces the world with complete openness.  It is not afraid of judgement and it does not judge.  Abhaya plants its feet solidly on the ground while opening endlessly to the vast possibility of the sky.  With this spirit, in this place beyond fear, one is free to create.  Life becomes a practice of channeling from a limitless source of creative energy.  Life becomes a great game.<br><br>

Abhaya Apparel creates ecstatic new designs in the feverish wee hours of the night.  Abhaya Apparel takes the dreams and visions of a million sleeping souls and projects them onto unique clothing to produce the finest in wearable wisdom.  We obtain all of our clothing from ethical, <strong>environmentally-conscious</strong> sources.  Our t-shirts and hoodies are <strong>100% organic</strong>, purchased at a fair price from producers who receive all the benefits from the profits of their labour.  Our jackets and hats are all <strong>unique items</strong>:  authentic military surplus recreated and given new life with the fearless stamp of Abhaya.<br><br>

Our designers leave no stone of the mental landscape unturned.  Sometimes we take our inspiration from the perfection of the natural world to <strong>uplift your mind and energize your day</strong>.  At other times, we dig into the compost and find the bones of your nightmares to challenge your expectations and give you shivering tics in your chest.  <strong>Abhaya Apparel is not what you think, but nor are we otherwise.</strong>
<br><br>


<br><br>
<div id="botMenu">
<a href="index.html" class="style4">Home</a>  |   
<a href="about.html" class="style4">  About</a>  | 
<a href="news.html" class="style4">  News</a>  |  
<a href="downloads.html" class="style4">  Downloads</a>  |  
<a href="contact.html" class="style4"> Contact</a>  | 
<a href="privacy.html" class="style4">  Privacy Policy</a></div>
<br><br> 

<div id="copy">
 © 2008 - Abhaya Apparel</div>

<div id="sitecred">
Site Credit: <a href="http://www.revsof.com" class="style4">Revsof Productions</a>  </div>

  <p> </p>
    </div>
    </div>
<!-- InstanceEndEditable --></div>


<div id="editable2">
<!-- InstanceBeginEditable name="EditRegion4" -->Special<!-- InstanceEndEditable --></div>



<div id="sound">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1','height','1','title','soundtrack-atmosphere','src','../Sounds/soundtrack','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../Sounds/soundtrack' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1" height="1" title="soundtrack-atmosphere">
    <param name="movie" value="Sounds/soundtrack.swf">
    <param name="quality" value="high">
    <embed src="Sounds/soundtrack.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1" height="1"></embed>
  </object></noscript>
</div>  
  
</div>
</div>


And relevant HTML from the Template:

<div id="mainBack"><img src="../images/mainBack1.png" alt="content background" width="510" height="141" align="top" /></div>
<div id="blackEdges"><img src="../images/backCont.png" width="454" /></div>

<div id="editable">
<!-- TemplateBeginEditable name="EditRegion3" -->Content<!-- TemplateEndEditable --></div>



Its all online anyway if you have firbug you can get a good look at it for sure.

Any help would be awesome.

Thanks in advance,
Jon

< Message edited by Spooky -- 5/20/2008 19:15:58 >
Tailslide

 

Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: Repeat, height 100% column with css, will not work!!! - 5/9/2008 2:01:39   
I think you're over complicating the thing to be honest.

Firstly I wouldn't use absolute positioning to lay out the page - it's just too difficult to get right, too inflexible and too easy broken.

Secondly you don't need the black edge div just for the background padding on the text div.

Thirdly if you're going to use CSS you absolutely must use a valid, full DOCTYPE: http://www.alistapart.com/articles/doctype/

So what I'd do if I were you is this:

1. Body element - has the repeating wood background image on it
2. Containing div - centred with margin: 0 auto; and a fixed width to hold everything together in the centre of the page.
3. Then you've got your nav and your banner image sitting in that in the normal flow of the page (no AP!).
4. After those you've got another wrapper div to hold the two columns together. This div should have the gradient top background on it. No positioning needed on this div - it just follows in the flow of the page.
5. Within this wrapper div you've got your sidebar and your main text div floated left and right respectively.
6. The main text div has the background image of the chequer-plate top and a background colour of black - then just tweak the padding to get the right effect.
7. The sidebar div contains the navigation and the special offer boxes with their respective background images. Be careful as these appear to be whole images - in other words, they won't expand with the content if the content's text size is increased by the user.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to revsof)
Page:   [1]

All Forums >> Web Development >> General Web Development >> Repeat, height 100% column with css, will not work!!!
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts