Learn VBA & Macros in 1 Week!

CSS - Correct Way To Get Main Portion Of Website To Fill In Remainder Of Height

Full Excel VBA Course - Beginner to Expert

Correct Way To Get Main Portion Of Website To Fill In Remainder Of Height	View Content

In my css I have the following to set up the height and width of the page to 100%:
Code:

html, body {
	font-family: verdana, arial, sans-serif;
	color: #000000;
	background-color: #E1E1E1;
	margin: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

For my website I have the following layout:
Code:

<body>
<div id="container">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="main"></div>
    <div id="footer"></div>
</div>
</body>

How do I get the <div id="main"></div> to fill in the remainder of the window height, without setting its height to 100% and them causing scroll bars and throwing the footer off the page.

Full Excel VBA Course - Beginner to Expert

Div Height To Fill The Remainder Of A Container...

Similar Tutorials

View Content

I have read and read through the CSS2 spec and I am unable to figure out if this is possible. Hopefully I can describe it well enough for somebody to help out.

Okay, what I want to accomplish seems simple. I want a div, lets call this one "container", with a calculated height/width relative to the document (in terms of percentage). Inside this div will be another div, lets call it "header", whos width will span the length of the containing div (100%) and height is fixed, lets say 30px. Now here comes the tricky part... a third div, lets call it "content" should sit right underneath "header" and its width will also be 100% of the containing div, but the height should fill the remainder of the containing div. I can't seem to get the "content" div to fill the remainder of "container" and scroll when needed. If I specify a calculated height, the offset of the "header" div is not taken into account so "content" div does not fit properly.

Thanks a ton if you can help me out. Please let me know if this doesn't make sense.

Possible To Fill Remainder Of Containing Div With Inner Div?

Similar Tutorials

View Content

Ok, I'm rather new to CSS and there is one thing I have always struggled with. If you have a containing div and two divs inside, is there a way to make one of the divs extend to fill the remainder of the space in the containing block. I have had times when I've wanted to do this both width-wise and height-wise.

A width example would be if you had a containing block with a width of 500px and two divs floated next to each other. The first div is 100px wide. Is there a way to have CSS automatically set the other div to 400px without manually setting it?

A height example would be if you have four divs in a containing div, stacked in two columns. The content in the left column is longer than the content in the right column. Now, is there a way to stretch the bottom div in the right column to fill the space down to the left column?

Main Div Needs To Be 100% Height

Similar Tutorials

View Content

I am using this:

http://bonrouge.com/3c-hf-fluid.php

At that code stands the #main div starts off at minimum height and expands with content. The #clearfooter div stops it covering the footer when it expands.

However. I need the #main div to start off filling the gap between the header and footer rather than it being an expanding element. The reason is that I need a background to cover the area between #header and #footer.

I have run out of ideas on how to accomplish this. The CSS I have created so far is:

PHP Code:
html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url(../images/2500px_height_bg.gif);
    font-family: Verdana, Arial, 'Times New Roman', Serif;
    text-align: center;
}

#wrap {
    min-height: 100%;
}

* html #wrap {
    height:100%;
}

#contain_header {
    height: 20px;
    text-align: center;
    padding: 0;
}

#header {
    margin:0 auto;
    width: 760px;
    height: 20px;
    background-image: url(../images/header_bg.gif);
    line-height: 20px;
    vertical-align: center;
}

#clearfooter {
    clear: both;
    height: 21px;
    overflow: hidden;
    background-color: red;
}

#contain_footer {
    height: 21px;
    background-image: url(../images/contain_footer_bg.gif);
    background-repeat: repeat-x;
    margin-top: -21px;
    text-align: center;
    padding: 0;
}

#footer {
    margin:0 auto;
    width: 760px;
    height: 21px;
    background-image: url(../images/footer_bg.gif);
    line-height: 21px;
    vertical-align: center;
    z-index: 1000;
}

#wrap_content {
    position: absolute;
    width: 100%;
    min-height: 100%;
    margin-top: -21px;
    padding-bottom: 31px;
    padding-top: 20px;
    background-color: transparent;

}

* html #wrap_content {
    height: 100%;
}

#main {
    position: relative;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color: white;
}

* html #main {
    height: 1px;
}

Any suggestions welcome

Using Negative Margins (or Something Else?) To Fill Available Height

Similar Tutorials

View Content

apologies if this has been asked and answered already - i did a search of the board but didn't find a clear solution.

what i'm trying to do seems simple enough, but isn't turning out that way.

lets say i have a page background of some color (e.g., orange).

then i have a main container div that is centered with auto margins, and has a white background.

i want this main container to start at 100px from the top (so 100px of orange shows above it), and the white background should expand to the bottom of the page - without scrollbars. if i set it's height to 100%, the 100px top margin is added to the 100% height of its parent (body + html), so it acts as if there's 100px of substance beneath the viewport and therefor shows scrollbars.

i had assumed a negative bottom margin set for the same amount as the top margin would work, but alas it does not.

obviously i don't want to just force-hide scrollbars by overflow:hidden or position:asbolute/fixed - if content in the container forces it to expand, it should do that. otherwise, even if there's very little content - or even none - it should expand to the bottom of the page.

i've attached a very basic (non-working) example - any insight would be appreciate.

not looking for a hack - i'm looking for the best way to handle this with best-practices.

tyia

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" > 
<head>
	
	<style type="text/css">
		html {
			height : 100%;
		}		
		body {
			margin : 0;
			background : #F90;
			height : 100%;
		}		
		div.wrapper {
			margin : 100px auto -100px auto;
			width : 500px;
			background : #FFF;
			height : 100%;
		}
	</style>
	
</head>

<body>

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

</html>

Css Layout 100% Height Columns And 100% Screen Fill

Similar Tutorials

View Content

Hello, Below is css I am trying to get to work and use as a template for a two column , header, and footer layout. I can get by with css, but an not a designer so can't figure out the exact specifics on how to do this. I've looked at many sites, make examples, javascripts included, but either they are to hard to fit into what I am looking for or just cause me to hit my head against the wall.

I'm trying to get the left columns background to fill height 100% to the footer. The content's doesn't need it because the wrapper's background act's as its color. Also, if either column's height changes past the screen's height. I need the footer to move down too. Currently, I tested if the left-column and the main content goes past the screen's height it will just go past the footer. This works beacuse the css I have currently is making sure that the footer is always at the bottom.

Code:

<html >
<head>
    <title>Untitled Page</title>    
    <style type="text/css">
        html {
        overflow-y: scroll; /* forces firefox scrollbar on */
        }

        body {
        margin: 0;
        padding: 0;
        background: #F2F2F2;
        font: 100% Helvetica, Arial, sans-serif;    
        height: 100%;
        
        }

        /* text-align: center; is so that the content will float in the center*/
          div.wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: left;      
        margin-bottom:  42px;
        }
                                     
        div.header {
        position: relative;
        width: 100%;
        background-color: blue;
        border-bottom: 1px solid #CCCCCC;
        font-size: 1.5em;
        height: 42px;
        }
        
        div.footer {
        position: absolute; bottom: 0;
        width: 100%;
        background-color: blue;
        border-bottom: 1px solid #CCCCCC;
        font-size: 1.5em;
        height: 42px;
        }      

        div.wrapper .left {
        width: 215px;
        float: left;
        background: yellow;
        height: 100%;
        min-height: 100%;  
         
        }
        div.wrapper .right {
               width:auto;
               margin-left: 215px;               
       }    
       
       div.wrapper .tabs {
        background: green;
        height: 35px;
        
       }
       
       div.wrapper .mainContent {
           
       }   
    </style>
</head>
<body>         
    <div id="header" class="header">header</div>
	    <div class="wrapper">
		    <div id="leftColumn" class="left">left content</div>
		    <div class="right">
		        <div class="tabs">Tabs go here</div>
		        <div class="mainContent">Main content goes  here</div>
		    </div>		   
	    </div>	    
    <div id="footer" class="footer">footer</div>
</body>
</html>

Any help would be appreciated thanks in advance.

Risso

Sidebar And Main Content Height Help

Similar Tutorials

View Content

This is my first completely css site and I am having troubles with my main content areas and some other small minor things.

My design requires that the sidebar be the same height as my content area. What do I need to do to get them the same heights. The main content area changes on each page so my sidebar needs to do the same.

Here is the website. I guess I cannot post url's so I hope I made sense.

Also an example of what the site is going to look is here. Once again cannot post urls.

Also, I need help with lists. In the example image I have the lists side-by-side. Normally I would use a table for this. Is there a way to do this with css?

Any help would greatly be appreciated.

Thanks,

Shaun

Stretching A Left Navigation Div According To Height Of Main (right) Content Div

Similar Tutorials

View Content

Hi,

I have a site with a left navigation bar (which is fixed width, and has a background colour that must stretch full screen from top to bottom of the page).

The site is:
http://67.18.220.222/~duoboots/2005/z.html

Stylesheet:
http://67.18.220.222/~duoboots/2005...s/style2005.css

As you can see, the left navigation menu stops once the content within the div is displayed. It does not stretch to the bottom of the screen. (say if you're on 1024 x 768 resolution)

Note: this varies according to the main (right) content. If the main content was shorter than the menu bar - it would work fine. The menu bar has a min-height of 100% which means the background applies to the size of your screen.

However, if the main content height is greater than that of the menu bar - then the menu bar will not adapt, but the background simply stops.

Is there a workaround for this? With tables, this could easily be achieved because the background colour of one cell is stretch until the end of the table, and not the content within the cell. However, I'd like to do this with CSS.

Here's some CSS:

Code:

body, p {

	color:#666666 ; 
	font-family: Verdana, Arial ; 
	font-size:7.5pt ; 
	font-weight:normal; 
}
body {
	height:100%;
	margin: 0px;
	background-color: #2F201E;
}

#container {  
 	width: 968px;
	height:100%;
}


#nav {
	width: 201px;
	border-right: 3px solid #FFFFFF;
	background: #8D603B;
	float: left;
	min-height:100%;
}

I've tried switching "min-height" and "height" but they don't seem to do what I want.... if anyone could help me out it would be MUCH appreciated!

Thanks a lot!

Table Row Height Is Not Correct...

Similar Tutorials

View Content

Hi everyone,

Please see this page in IE: shawnessy.ca/test.php

The height of the top row (not the <TH> row) of the calendar gets messed up. The page looks fine under Firefox.

Basically, I grabbed this calendar from my forum, which on its own, looks fine in IE: shawnessy.ca/forum/

Can anyone give me some suggestions as to how to fix this?

Css Full Height & Correct Footer Placement...

Similar Tutorials

View Content

Ok I've got this...

Code:

<html>
<head>

<style type="text/css">
	body {
		height: 100%;
		background-color: blue;
		margin: 0px;
		padding: 0px;
	}
	
	.container {
		height: 100%;
		width: 300px;
		margin: 90px auto 50px auto;
		background-color: green;
	}

	.footer {
		position: absolute;
		bottom: 0%;
		width: 100%;
		background-color: yellow;
		height: 50px;
	}

	.menubar {
		position: absolute;
		top: 0px;
		width: 100%;
		background-color: red;
		height: 95px;
	}
</style>

</head>
<body>
<div class="menubar">
	MENUBAR
</div>
<div class="container">
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>z<br>
<!-- footer -->
<div class="footer">
	FOOTER
</div>
</div>

</body>
</html>

Which works beautifully in opera, the green part is the full size of the document with all those a<br> in there (or without), and the footer is perfectly placed at the bottom.

But both IE (testing on version 6) & NS (testing on version 7.1) display the footer at the bottom of the window when it loads, not after the container div is finished... Also in NS the container divs background colour finishes once you scroll down a little.

Now I've tried many different ways around this.

I know what its like when I spend too long looking at one thing, I end up missing the obvious - so I thought I'd throw it out to a wider group for observations...

I thank you in advance.

-D

Website Not Positioning Correct In Ie

Similar Tutorials

View Content

Hey all!

I tried this forum once before and no one helped me, but I hope someone can help me now.

I scrapped the design of the last problem and started over, so now I have new problems.

I got a Blogger template off the internet and all of the pages work fine except the homepage and calendar page that I made in Dreamweaver to try to look like the blog pages.

In internet explorer, it doesn't work right. It looks okay in Firefox. It looks better in internet explorer with...oh...that google add-on installed...cannot remember what it is called.

What can I do to fix the coding. Please help! I am self taught and this is driving me crazy. You have no idea how long it took me to get it to where it is now!

www.hanoverlutheran dot com

Fixed + Variable + Remainder Layout In Ie6

Similar Tutorials

View Content

So this layout I'm working on has a fixed toolbar at the top, a header with variable height directly beneath the toolbar, and then the remainder of the window shall be taken up by a content area. The content area has a nested container which actually holds the content. (See attached gif for a visual explanation.) There's a minimum height and width set as well, but I'm not worried about that for IE6 just yet.

Because of the variable height on the header, I was forced to use JavaScript in order to determine the top property of the content area. Originally I was told we could skip IE6, but after I'd happily gotten it working and styled, I was told it needed to work in IE6 after all. So now it's back to the drawing board.
Despite having its position set as absolute with bottom, left and right set to 0, #content stays tiny. Possibly as a result or possibly as a separate problem, #mainContent automatically expands itself, rather than filling only the conten area.
http://lab.waltercoots.com/sandbox
http://lab.waltercoots.com/sandbox/.../inc/master.css

Flexible Website Height

Similar Tutorials

View Content

Hi Guys,

I have been recently playing with some HTML/CSS and I cannot figure out a way to make my website to be flexible.

I have attached a link to the screenshot to show what happens when I reach out of height. I am using min-height but I doesn't seem to responde.

http://screencast.com/t/NNx4fxkFAc

I will also upload my CSS and HTML code. I tried to keep it clear and easy to read.

I really appreciate any help as I have been trying to fix it whole day, getting sort of desperate.

Code:

/*---------- Header Start ---------- */
#header {
background:url(images/topbar_slice.png) repeat-x;
height: 268px;
}
#logo {	background:url(images/logo.png) no-repeat;
		position: absolute;
		padding-bottom: 30px;
		top: 7%;
		left: 3%;
		width:320px;
		height:90px;
}
#logo h1, #logo small {
	display:block;
	text-indent:-9999px;
	}
ul#menu {
	margin:0px; padding:0px;
	position:relative;
	left:0px;
	top: 10px;

}
ul#menu li {
	display:inline;
	margin-left:50px;
	margin-bottom: 10px;
}
ul#menu li a {
	text-decoration:none;
	color:#ffffff;
	font-family:Helvetica, Verdana, Arial, sans-serif;  
    font-size:10px;  
    font-weight:bold;  
    text-transform:uppercase;
}  
ul#menu li a.active, ul#menu li a:hover {  
    color:#D8D8D8  ;  
} 
#search {
	background: url(images/search_field.png) top no-repeat;
	width:178px;
	height: 30px;
	position: absolute;
	right: 5%;
	top: 1%;
}
#search_button {
	background-image: url(images/search_icon.png);
	background-repeat: no-repeat;
	width:20px;
	height: 20px;
	position: absolute;
	right: 10%;
	top: 6px;
}
/*--------- Header End -----------*/

/*--------- Body Start ---------- */


body {  
	    
    font-family:Helvetica, Arial, sans-serif;  
    color:#7f7d78;  
    font-size:16px;  
    line-height:23px;  
} 
.block_inside {  
    display:block;  
    border:10px solid #ffffff;  
    background: #ffffff url(images/backgroud_slice.jpg) repeat-x;  
    padding:30px;  
    overflow:auto;  
}
#main {
	background:#c4c0be; 
}
#main .container {
	background:url(images/background_slice.png) repeat-y;
	min-height: 700px;
	position: relative;
	margin: -0.8% 15% 0% 15%;
	border:1px solid #a3a09e;
}

.text_block {
	float: left;
	padding-right: 40%;
	margin-left: 40px;
	width: 230 px;
	height: 400px;
	text-align: justify;
	font-family: Helvetica, sans-serif, Arial;
}
h2 {  
    margin:60px 0px 10px 0px;
    line-height:23px;
    font-size:36px;  
    font-family:Helvetica, Arial, Sans-serif;  
    color:#000000;  
} 
small {  
    color:#595856;  
    font-weight:bold;  
    font-size:11px;  
    display:block;  
    margin-bottom:15px;  
} 
a {  
    color:#007de2;  
    text-decoration:none;  
}
a {  
    color:#007de2;  
    text-decoration:none;  
}  
a:hover { text-decoration:underline; }  
p { margin: 0px 0px 15px 0px; }  
  
a.button {  
    background:#32312f url(images/button_bg.jpg) repeat-x;  
    padding:5px 10px 5px 10px;  
    color: #ffffff;  
    text-decoration: none;  
    border:1px solid #32312f;  
    text-transform:uppercase;  
    font-size:9px;  
    line-height:25px;  
}  
a.button:hover {  
    background:#007de2 url(images/button_bg_o.jpg) repeat-x;  
    border-color:#007de2;  
}  


/*--------- Body End ------------ */

/*--------- Sidebar Start -------- */

#sidebar {
	background-image: url(images/sidebar_slice.png);
	background-repeat: repeat-y;
	position: absolute;
	width: 285px;
	margin: -18.3% 0 50% 0;
	height: 80%;
	right: 30px;
	
}
#sponsor {
	background: url(images/edit.png) no-repeat;
	width: 200px;
	height: 200px;
	position: absolute;
	top: 30px;
	left: 10px;
}
#sidebar_text {
	color:#595856;  
    font-weight:bold;  
    font-size:11px;  
    display:block;  
    margin-bottom:15px;
    margin-left: 40 px;
	}
/*--------- Sidebar End ------- */

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Almost Student</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="images/favicon.ico" />

</head>

<body>
    <div id="main">
    	 <!------------MAIN------------>
    		<div class="container">
         <!------------Header---------------------------->
        		     <div id="header">
        		     		<ul id="menu">  
                    			<li><a href="">Home</a></li>  
                    			<li><a href="">Articles</a></li>  
                    			<li><a href="">About Us</a></li>  
                    			<li><a href="">Contact</a></li>   
  		            	    </ul> 
        		            <div id="search">  		    	            
  		                		<div id="search_button">	
  		                		</div><!--search button end-->  		        	      	
  		        	      	</div> <!--search end-->                	
                			
                			<div id="logo">  
                			    <h1>Almost Student</h1>    
                			</div> <!--logo end-->
                	
                	</div> <!--header end-->
         <!------------Header End----------------------------->
         <!------------Content----------------------------->
         			
         			<div id="post_block">
         				<span>
						<div class="text_block">
							<!--<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />  -->
							<h2>Post</h2>
								<small>test</small>
									<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 
									dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
									It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
									It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
									and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
								<br />
								<a href="a" class="button">Continue reading...</a> 
						
						
							<!--<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />  -->
							<h2>Post</h2>
								<small>test</small>
									<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 
									dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
									It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
									It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
									and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
								<br />
								<a href="a" class="button">Continue reading...</a> 
						</div>
						</span>
					</div>
		 <!------------Content End----------------------------->
         <!------------SIDEBAR--------------------------------->       	
					<div id="sidebar">			
						<div id="sponsor">
						</div><!--sponsor end-->
					</div><!--sidebar end-->
  		 <!------------SIDEBAR END-------------------------------->	
  			</div> <!--container end--> 
 	</div> <!--main end-->  
		 <!------------MAIN END------------>
	<div id="footer">
			<div class="container">
					All rights reserved. Almoststudent.com       	
			</div> <!-- container-->
	</div> <!-- footer -->
</body>
</html>

Controlling A Scrolling Portion Of A Ui

Similar Tutorials

View Content

I'm trying to determine the best way to design a UI for a PHP application. There is a header portion with menu choices and a footer portion. There is also a background image 'picture frame' that sits in between the header menu and footer and gets loaded depending on the user's preferences. None of these three scroll. Within that picture frame, there is a center screen with a scrolling application. This portion would load different screens based on what was picked as a menu choice, and the user would scroll in the application if the particular screen were longer.

Is the best way to do this using frames, or is there a better choice in terms of speed, browser compatibility, etc.?

Thanks for your suggestions.

Css Or Tables For This Portion Of The Site?

Similar Tutorials

View Content

Hello.

Currently my site is all CSS.

I know tables are terrible to some people but should I use a table for this portion of my site? Or should I wrap each member into a div then another dive for the image/postion and another div for name/description?

Basically its just for the team members photo and description.

It think I'll end up with a ton of divs so I think tables might be better. (unless there is an easy way to do it with limited amount of divs and CSS?)

Need To Cut Down Or Hide The Upper Portion Of An Image Using As A Background?

Similar Tutorials

View Content

I m wondering if any body help me out regarding style sheet..
I m using an image as a background in a column of a table... I just want

to display the lower portion of tht image while using it as a

background..and cut down the upper portion...how can i achieve this in

css style sheet?

Code:

<table width="800" align="center" cellpadding="0" cellspacing="0" 

style="">
  <tr>
    <td width="800" height="258" STYLE="background-image: 

url('Images/mega/mega.gif');background-repeat:no-repeat"></td>
  </tr>
</table>

Small Portion Of Div Layout Not Able To Click Links

Similar Tutorials

View Content

I am really racking my brain here

I know this will end up being a simple fix but after creating this for a few hours straight, I just can't see it.

Ok here's the page and the situation...

myspace[dot]com[slash]daggersanddiamonds

My links at the top of my page are sliced fine and the links do work (in explorer) but somehow in Firefox, they are being hidden by some invisible layer that extends about 800ish pixels in width that hides the clickability.

As you can see, the first half portion of "Add to Friends" works but the rest is disabled, and part of the "Vimeo" link works, but not totally.. and ofcourse the middle links are totally dead to click.

My question is, whats hiding these links?

Any help is super thanked!

Clearing Previous Css Stylesheet From A Portion Of A Page (and Then Using New Styles)

Similar Tutorials

View Content

I am trying to figure out how to nullify all of the previously set CSS styles in a portion of a page. Then, be able to set new styles to affect just that portion.

The situation is this:
Using a Wordpress theme, I have a single article that I want to be formatted completely differently than normal. However, there are css styles for things like <body>, <td>, <blockquote> etc (lots of them) that I already set in the theme itself. I don't want these theme-defined styles to affect the article portion, for this article only, and only for the article portion of the page.

Is this possible, other than by re-declaring all the css values that are set in the theme?

Alter Line-height Css Property Based On Image Height And Hyperlinks

Similar Tutorials

View Content

Hi all,

I am trying to automate everything on my test website and I have one more angle to cover.

In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height.

Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder)

My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement.

Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values?

I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit.

Whew!

Full-height 3-column Layout, Height Issues

Similar Tutorials

View Content

Hello

Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height
the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between.

If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length

In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit

Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11
I would like the end result to work in the above browsers as well as IE7 if possible
I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Three Columns</title>
		<style type="text/css">
			*, html, body {
				margin: 0;
				padding: 0;
				font-size: 100%;
			}
			html, body {
				width: 100%;
				height: 100%;
			}
			#maincontainer {
				position: relative;
				height: 100%;
				background: #eee;

			}
			#left {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 200px;
				background: #fbb;
				height: 100%;
			}
			#mid {
				position: relative;
				margin: 0 200px 0 200px;
				background: #efe;
				height: 100%;
			}
			#right {
				position: absolute;
				top: 0px;
				right: 0px;
				width: 200px;
				background: #bbf;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="maincontainer">
			<div id="left">
				left start<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left end<br />
			</div>
			<div id="mid">
				mid start<br />
				mid<br />
				mid<br />
				mid<br />
				mid<br />
				mid<br />
				mid end<br />
			</div>
			<div id="right">
				right start<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right end<br />
			</div>
		</div>
	</body>
</html>

In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column

What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed

I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter

Thanks in advance

Div Doesn't Stretch To Page Height, Only Window Height

Similar Tutorials

View Content

Hello everybody!

I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS:

HTML (I only included the very basic structure):

<html>
<body>
<div class="container">
<div id="content">
<div id="..."></div>
<div id="..."></div>
<div id="..."></div>
<div id="..."></div>
</div>
</div>
</body>
</html>`

CSS:

html, body {
height: 100%;
font-family: Arial;
font-size: 10px;
color: #000000;
background: #FFF url(../../images/body.png) no-repeat center 40px;
margin: 0;
position: relative;}

.container {
height: 100%;
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;}

#content {
width: 939px;
min-height: 100%;
position: relative;
top: 210px;
left: 6px;
box-shadow: 0px 0px 8px #666;
-moz-box-shadow: 0px 0px 8px #666;
-webkit-box-shadow: 0px 0px 8px #666;
background-color: #FFF;}

I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies?

Thank you so much in advance for your help.