AllSeoHelp.com
Search the Entire Site
  • PHP
  • JavaScript
  • CSS
  • HTML
Learn VBA & Macros in 1 Week!

CSS - Half Page Height Divs
Full Excel VBA Course - Beginner to Expert

Half Page Height Divs

 View Content
Hey everyone,

I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks.

If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either.

I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid.

Any ideas?

HTML4Strict Code:
Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html> 
  

  


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


  


 <html>


 <head>


     <style>


 body{


     width:100%;


     height:100%;


     padding:0;


     margin:0;


     color:#ffffff;


     background-color:#000000;


 }


 object{


     float:left;


     clear:both;


     width:80%;


     height:100%;


     background-color:#cccccc;


 }


 .section{


     float:left;


     clear:none;


     width:48%;


     height:48%;


     margin:1%;


     background-color:#333333;


     display:block;


     position:relative;


 }


 .panel{


     float:left;


     clear:none;


     width: 16%;


     height:96%;


     margin:2% 2%;


     background-color:#cccccc;


     


 }


 #container{


     float:left;


     clear:both;


     width:100%;


     height:100%;


     min-height:100%;


     background


 }


     </style>


 </head>


 <body>


     <div id="container">


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


     </div>


 </body>


 </html>


Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Overflow:hidden Causing My Divs To Be Cut In Half?
Full Height Divs.
Make 2 Divs The Same Height
Div Doesn't Stretch To Page Height, Only Window Height
Trying To Get Equal Height For Divs Next To Eachother
Trying To Get Floated Divs To Extend Height:100%
How To Set Height Of Container Div Same As Internal Divs?
Can I Force Two Floating Divs To Have The Same Height?
Okay, Why Aren't These 2 Divs Taking On Their Height Values?
Problem With Floats; Get Both Divs At Maximum Height
Circumventing The Default Minimum Height On Divs In Ie6
Page Height Extended By Height Of Prior Div In Ff Only
Inline Fixed Height Divs With Relatively Positioned Elements
Auto Height Background Not Working With Nested Divs In Mozilla
Trouble Getting My Container And Content Divs To Stretch Height According To Content
Vertical Align/height Issues With Divs..(ie6 Issues, Of Course!!!)
Headache And A Half...
Perspective Half Right
Link Over Styling - Half Way :s
Hover Works Half


Learn VBA & Macros for Excel in 1 Week!


Overflow:hidden Causing My Divs To Be Cut In Half?

 Similar Tutorials View Content
I had a problem earlier with my containing DIV pushing too wide which was resolved by adding "overflow:hidden" to my containing DIV. The problem is now that it's cutting off the sides of one of my graphics.

At the bottom of my page, I have a link which you can click that will (through the magic of javascript) reveal divs on either side of my main content (the link at the bottom of the page says "reveal sea creature")

When overflow:hidden was NOT on my containing DIV, I had the problem with all the extra space, but these revealing divs worked fine. Now that I add overflow:hidden, the extra space is gone, but the divs are cut off.

I've tried pushing everything to the left which seems to make the DIV on the right work fine, but the left is still a problem. I realize this doesn't make sense without code, so here's the site.

www . deepwaterchurch . com


Thanks so much.

Full Height Divs.

 Similar Tutorials View Content
Hi all!

After trying more then a few things I'm about to give up, so I hope someone here has the answer.

The problem is the following:
* A website contains 3 DIV columns and an header at the top, this is all inside a single wrapper DIV which centers the webpage.
* All three columns should have the same length as the longest column.
* When the content in the 3 DIV columns is shorter then the height of your browser window, the DIV elements should fill-out until the bottom of the screen.

Point 2 is doable.
Point 3 is doable.
But the combination of point 2 and 3 seems quite hard.

Hope someone has an idea .

Thanks!

Make 2 Divs The Same Height

 Similar Tutorials View Content
i have 2 divs

one is a navigation bar, the other is the pages main contents.

the contents and navigation links changes from page to page so i need a method so if the content is long, the navigation will stretch down long too to be the same height of the content, and the same thing vice versa.

how do i go about doing this?

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.

Trying To Get Equal Height For Divs Next To Eachother

 Similar Tutorials View Content
Hey guys, so I've cleaned up my code a bit. Read up on semantic coding. I think it's a bit better.

Anyways, I'm trying to make my right and left content div's the same height. I've tried the faux technique, and it doesn't seem to work. Anyways, I was wondering if it's worth the 5 hours of headache to avoid using tables to setup the layout?

I think it would be nice to have it in DIV's, that way if I want to switch left to right, and vice versa, it would be a breeze.

Also, for the content, I'd like the left (main) side to be the remainder of the page width, and I'd like the right side to be 260px. If it works better, I wouldn't mind having the main part 77% of the width and the right side be 23%.

Anyways, here's my code:

html4strict Code:
Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Beta</title> <style type="text/css"> <!-- @import url("layout.css"); --> </style> </head> <body> <div id="container"> <!-- Site Head --> <div id="header"> <div id="banner"></div> <div id="head_user_container"> <div id="head_avatar"><img src="img/layout/avatar_test.jpg" alt="User Avatar" /></div> <div id="head_user_info">Welcome <a href="">Mike Jensen</a> (<a href="">Sign Out</a>)<br /><a href="">Edit Profile</a><br /><a href="">Message Center</a></div> </div> </div> <!-- End Site Head --> <!-- Menu --> <div id="menu"> </div> <!-- End Menu --> <!-- Start Top Ad Banner --> <div id="top_ad"> </div> <!-- End Top Ad Banner --> <!-- Main Content Container --> <div id="content_container"> <div id="main_content"> eh... </div> <div id="right_content">right content <br />yes sir</div> </div> <!-- End Main Content Container --> </div> </body> </html> 
  

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml">


 <head>


 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


 <title>Beta</title>


     <style type="text/css">


     <!--


     @import url("layout.css");


     -->


     </style>


 </head>


  


 <body>


  


     <div id="container">


     


     <!-- Site Head -->


     


         <div id="header">


             <div id="banner"></div>


                 <div id="head_user_container">


                     <div id="head_avatar"><img src="img/layout/avatar_test.jpg" alt="User Avatar" /></div>


                     <div id="head_user_info">Welcome <a href="">Mike Jensen</a> (<a href="">Sign Out</a>)<br /><a href="">Edit Profile</a><br /><a href="">Message Center</a></div>


                 </div>


         </div>


         


     <!-- End Site Head -->


     


  


     


     <!-- Menu -->


     


         <div id="menu">


  


         </div>


     


     <!-- End Menu -->


     


     <!-- Start Top Ad Banner -->


     


         <div id="top_ad">


         


         </div>


     


     <!-- End Top Ad Banner -->


     


     <!-- Main Content Container -->


     


         <div id="content_container">


             <div id="main_content">


             eh...


             </div>


             


             <div id="right_content">right content <br />yes sir</div>


         </div>      


  


     <!-- End Main Content Container -->


         


     </div>


  


 </body>


 </html>



and heres my css:

Code:
/*Basic Elements*/
body {
	font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
	font-size: 13px;
	color: #303030;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0 20px;
	background-color: #d8d8d8;
}
p {
	margin-top: 10px;
	text-align: justify;
	font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
	font-size: 13pt;
	line-height: 10pt;
}
a:link { 
	text-decoration: underline; 
	color: #417cb3;
}
a:visited { 
	text-decoration: underline; 
	color: #417cb3;
}
a:hover, a:active { 
	text-decoration: underline; 
	color: #5e9cd5;
}
acronym {
	font-weight: bold;
	border-bottom: 1px dotted #417cb3;
}

/*Specific DIVs*/

#container {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;	
	padding: 0px;
	max-width: 1204px;
	min-width: 950px;
	height: 100%;
	clear: both;
	text-align: left;
	position: relative;
}
	
/*- Banner -*/

#header{
	background-color: #417cb3;
	height: 74px;
	width: 100%;
	clear: both;
	float: left;
	border-left: solid 1px #496986;
	border-right: solid 1px #496986;
}

#banner{
	background-image: url(img/layout/not_yet.jpg);
	background-repeat: no-repeat;
	float: left;
	width: 284px;
	height: 74px;
}

/*End Banner*/

/*Head User Info*/

#head_user_container{
	background-image: url(img/layout/logged_info_bg.jpg);
	background-repeat: repeat-x;
	clear: both;
	height: 66px;
	position: absolute;
	right: 4px;
	top: 4px;
}

#head_avatar{
	background-image: url(img/layout/ban_avatar_bg.jpg);
	height: 66px;
	width: 64px;
	float: left;
	background-repeat: no-repeat;
	padding-top: 1px;
	padding-left: 1px;
}

#head_user_info {
	background-image: url(img/layout/logged_info_end.jpg);
	background-position: right 0;
	background-repeat: no-repeat;
	min-width: 225px;
	max-width: 500px;
	float: left;
	height: 66px;
	margin-left: -1px;
	font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	padding-top: 4px;
	padding-right: 3px;
	padding-bottom: 0px;
	padding-left: 5px;
}

#head_user_info a:link { 
	text-decoration: none; 
	color: #5dbdfa;
	}
#head_user_info a:visited { 
	text-decoration: none; 
	color: #5dbdfa;
}
#head_user_info a:hover, a:active { 
	text-decoration: none; 
	color: #7fc9f8;
}
#head_user_end {
	float: left;
	background-image: url(img/layout/logged_info_end.jpg);
	background-repeat: no-repeat;
	height: 66px;
	width: 3px;
}

/*End Head User Info*/

/*Menu*/

#menu{
	background-color: #417cb3;
	background-image: url(img/layout/menu_bg.jpg);
	background-repeat: repeat-x;
	height: 34px;
	width: 100%;
	clear: both;
	border-left: solid 1px #94aec5;
	border-right: solid 1px #94aec5;
}

/*End Menu*/

/* Top Ad Banner*/

#top_ad{
	background-color: #ededed;
	height: 109px;
	width: 100%;
	clear: both;
	border-left: solid 1px #94aec5;
	border-right: solid 1px #94aec5;
}

/*End Top Ad Banner*/

/* Main Content */

#content_container{
	width: 100%;
	overflow: hidden;
	clear: both;
	border-left: solid 1px #94aec5;
	border-right: solid 1px #94aec5;
}

#main_content{
	background-color: #fff;
	clear: both;
	margin-right: 260px;
}

#right_content{
	width: 260px;
	background-color: #ffead1;
	position: absolute;
	right: -1px;
	top: 217px;
}

/* End Main Content */



Here's the site, and what it looks like right now:

http://24.16.238.252/sd_beta/working/layout2/

Anyways, thanks for all your help guys!

If you need more info, let me know!

Trying To Get Floated Divs To Extend Height:100%

 Similar Tutorials View Content
I have a 3 column layout. Each column may contain one or two articles with a border at the bottom of each article. The There are two borders between the three columns.

I'm trying to use floated divs as containers for each of the columns, with a left-hand border in the center and right columns.

You can see a non-css example at: http://www.sananselmopreschool.org/pilot/

Well, no matter what I do, I haven't been able to get the column containers to extend to the bottom of the page in IE. If I set them to height:100%, they seem to shoot out to 150% or so.
body {
height:100%;
padding:0;
margin:0;
background-color:#ECF6DD;
font-family: Tahoma;
font-size: 11px;
color: #707070;
text-align:center;
border: 1px solid purple;
}

.body_container {
position: relative;
height:100%;
width:100%;
left: 0px;
border: 1px groove darkred;
}
.body_position_center {
height:100%;
position:relative;
width:780px;
margin-right: auto;
margin-left: auto;
border-collapse:collapse;
border: 1px solid #999 ;
}

.header {
padding:0;
margin:0;
position:relative;
width:766px;
height:195px;
}

.leftblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}

.centerblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}
.rightblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}
.blockcontents
{
padding-top:14px;
padding-bottom:14px;
border-bottom : 3px dotted #228B22;
text-align:left;
}

Any suggestions would be appreciated. I haven't used much javascript, so unless I can see an example, it might be tough to work out a javascript solution.

How To Set Height Of Container Div Same As Internal Divs?

 Similar Tutorials View Content
Here's the template I'm working on: http://dhost.info/justusvizslas/template.php

Here's my problem:
I'm trying to create a centered, two-column layout with a header and a footer, sort of like the tutorial he http://nemesis1.f2o.org/aarchive?id=7

I've got everything working correctly and it looks fine in IE. However, in FireFox, the container div doesn't automatically adjust its height to be the same as the height of the divs inside. Instead, I have to set the height at a certain number of pixils to even get the container div to show up. When I do that, in IE the container div defaults to the same height as the larger of the two inner divs, but in FireFox the container div just stays at whatever pixil height I specified. That becomes problematic because I don't plan on having all my pagecontent divs with the same height.

Any insight will be greatly appreciated. I've been looking at this for hours and haven't gotten it to work like it should. Here's the relevant code too:
CSS
Code:
#container {
		width:792px;
		height:50px;
		margin: auto auto;
		color:#000000;
		background-color:#FFFFFF;
		background-image:url(design/menuimage.gif);
		background-repeat:repeat-y;
		}
		
#navigation {
		width:125px;
		height:auto;
		padding:0px;
		float:left;
		margin-top:auto;
		vertical-align:top
		}

#pagecontent {
		width:667px;
		height:auto;
		padding:0px;
		float:left;
		margin-top:auto;
		color:#000000;
		background-color:#FFFFFF;
		text-align:center
		}


PHP
Code:
<div id="container">
  	<div id="navigation"><?php include "nav.php"; ?></div>  
	<div id="pagecontent">
  		<br />Some more content here<br />
	</div>
</div>




Again, thank you in advance for any help with this. If you're stumped and think it should work as-is, go ahead and go to the actual template I'm working on (first http link in this post) and look at it in IE and in FireFox to note the difference.

Can I Force Two Floating Divs To Have The Same Height?

 Similar Tutorials View Content
What I have: I have a <div id="content"> that contains the main content of the site. In this <div> I have two other <div>s that are arranged in columns, using float. The left column forms the Navigation for the site and is surrounded by a black border.

Here is the problem: If the content on the right is small, the border on the left stretches from top to bottom (since the left div controls the height). However, when there is a lot of content on the right, the border on the left only surrounds the content of the left div and leaves space underneath the bottom border-line.

My question: Is there a way to "stretch" the left div so the border touches the top of its parent div on top and the bottom of its parent div on the bottom? Or in other words: Can I force the left div to have the same height as the right div?

Here is an example of what I have right now (before tackling the problem):

CSS:
Code:
#content {
	width: 800px;
	margin: 0;
	padding: 0;
}

#contentNav {
	width: 140px;
	float: left;
	border: thin solid black;
	margin: 0;
	padding: 0;
}

#contentMain {
	width: 600px;
	float: right;
	margin: 0;
	padding: 0;
}




HTML:
Code:
 
<div id="content">
	<div id="contentNav">
		<a href="">Link1</a><br />
		<a href="">Link2</a><br />
		<a href="">Link3</a><br />
	</div>
	<div id="contentMain">
		<p>Here comes a lot of text that spans over many lines.
	</div>
</div>


Okay, Why Aren't These 2 Divs Taking On Their Height Values?

 Similar Tutorials View Content
I had my css working fine and then I decided to change the layout and I almost have the new style sheet finished.

However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation.

However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work...

Here's my css:
Code:
/* CSS Document */
h1 {
	font-family: Geneva, Arial, sans-serif;
	font-size: 20px;
	color:#000000;
}

h2{
	font-family: Geneva, Arial, sans-serif;
	font-size: 16px;
	color:#000000;
}

h4{
	font-family: Geneva, Arial, sans-serif;
	font-size: 12px;
	color:#000000;
}

/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
	width: 1024px;
	min-height: 748px;
	margin: 0 auto;
	background: #ffffff;
	overflow: hidden; /* contain inner floats */
	position: relative; /* establish the containing block */
}

#accounttypeselector { /* select personal or business to affect page display */
	height: 25px;
	background: #0000FF;
}

#servicesbar { /* container for user services */
	height: 30px; /* 30px should be adequate height */
	width: 100%;
}

#servicesbar-services { /* container for user services once logged in */
	float: left; /* push this to left side */
	width: 75%; /* want it to be 75% of the servicesbar width */
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	background: #ff00ff;
}

#servicesbar-login { /* for user login and logout - contained inside servicesbar */
	float: left; /* should push this just beside services */
	width: 25%;
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	background: #8B2323;	
}

#header { /*header for the site - will contain logo, search, and main navigation */
	float: left;
	width: 1024px;
	height: 100px;	
}

#header-logo { /* will include site banner/logo - will be located on left side */
	background: #ff0000;
	width: 50%;
	float: left;
}

#header-rightcol { /* column for search and main nav */
	width: 50%;
	float: left;
}

#header-rightcol-search {
	min-height: 50%;
	max-height: 50%;
	background: #7FFFD4;
}

#header-rightcol-navmain { /* navbar that will be located below header */
	min-height: 50%;
	max-height:-50%;
	background: #21ee00;
}

#bodywrapper { /* wrapper for main content - will have 3 columns here */
	width: 1024px;
	height: 100%;
	padding-top: 10;
}

#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
	width: 15%;
	background: #8B8378;
	float: left;
}

#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
	width: 60%;
	background: #66CDAA;
	float: left;
}

#bodywrapper-news { /* news column to be located in right column of bodywrapper */
	width: 25%;
	background: #8A2BE2;
	float: left;
}

#footer { /* footer to be located at bottom of wrapper */
	margin: 0 auto;
	position: relative;
	width: 1014px; /* will be 1024 with padding */
	height: 20px;
	padding-right: 10px;
}



and here's my basic html
Code:
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>	
	<div id= "wrapper" >
	
		<div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div>
		
		<div id= "servicesbar" >
			<div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
			<div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div>
		</div>
		
		<div id= "header" >
			<div id= "header-logo" >
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
			adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
			penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
			libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
			cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
			pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
			in dui. In eget elit. Praesent eu lorem.</div>
			
			<div id= "header-rightcol" >
				<div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
				<div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
			</div>
			
		</div>
		
		<div id= "bodywrapper" >
		
			<div id= "bodywrapper-navleft" >
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.
			</div>
			<div id= "bodywrapper-main" >
				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.			
			</div>
			<div id= "bodywrapper-news" >
				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.			
			</div>
		
		</div>
	
	</div>
	
	<div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
</body>
</html>



Thanks in advance and any suggestions would be greatly appreciated.

Problem With Floats; Get Both Divs At Maximum Height

 Similar Tutorials View Content
Hello, not sure I know how to explain this. I have a page that I want to divide in two parts. To do so I am using floats. The problem is that the content in one div is not the same as the content in the other div and therefore the height of the two floated div is different from one another.

However, I want that the div's have a border that seperates them and I would like this border to be from top to bottom of the containing div regardless of which of the two floated div is the highest. I could do this with javascript but I would like to know if there is some pure html/css option.

Here is my example;

Code:
<html>
	<head>
	
		<style>
		
		.main {
			margin: 0px auto;
			width: 800px;
			border: 2px solid red;
		}
		
		.wrap:after{

			content: ".";
			display: block;
			position:relative;
			height: 0;
			clear: both;
			visibility: hidden;
		}

		.wrap{

			display: inline-block;
		}

		/* Hides from IE-mac \*/
		* html .wrap{height: 1%;}
		div.wrap{display: block;}
		/* End hide from IE-mac */
		
		
		.left {
			float: left;
			width: 100px;
		}
		
		.right {
			float: left;
			width: 680px;
			border: 10px solid blue;
		}
		
		
		</style>
	
	</head>
	<body>
	
		<div class="main">
			<div class="wrap">
				<div class="left">My left div has more.<br/>more..<br /><br />more...<br /><br /><br />lines then the right one</div>
				<div class="right">My Right div has only one line but need border till down there ...</div>
			</div>
		</div>

		
	</body>
</html>



As you can see in the example the border of the right div does not go down till the bottom border of the main div.

Circumventing The Default Minimum Height On Divs In Ie6

 Similar Tutorials View Content
I was experimenting this weekend with some CSS 'page-sculpting', using small divs to make shapes, etc.

I used FireFox as my testbed and of course everything went smoothly. I switched over to IE6 and saw that every div had a minimum height-it looked like 1em.

I specified height and width on all <div>. Some used borders, some did not. An example would be:
PHP Code:
<div style="height:2px; width:3px; background:green" ></div> 





Has anyone else come across this or know of a fix? I haven't tried <span> or other tags (I will...just thought of that), tho I suspect they'll behave the same.

Any help appreciated.

NotGoddess

Page Height Extended By Height Of Prior Div In Ff Only

 Similar Tutorials View Content
If you look at the bottom of the page at www.res-technologies_DOT_com/index.php?jos_change_template=restech2 in both IE and FF, you will see that it looks fine in IE, but in FF the page length is extended by exactly the height of the header image at the top of the page. Trying to figure out what's causing this is driving me nuts! Can anyone help?

thx

dh

Inline Fixed Height Divs With Relatively Positioned Elements

 Similar Tutorials View Content
Hi, I have been puzzle for a while now working out how to do this.

I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox).
Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE.

I currently have:
<div id="diva">
<object id="face1" width="320" height="110">
<param name="face1" value="face1.swf">
<embed src="face1.swf" width="320" height="110">
</embed>
</object>
</div>
<div id="divb">
<object id="face2" width="320" height="110">
<param name="face2" value="face2.swf">
<embed src="face2.swf" width="320" height="110">
</embed>
</object>
</div>
<div id="clear"></div>

With the relavent css:
#div1 {
background-image : url(images/bg1.gif);
width: 381px;
height: 346px;
float: left;
text-align : center;
vertical-align : bottom;
}
#div2 {

background-image : url(images/bg2.gif);
width: 381px;
height: 346px;
float: right;
text-align: center;
vertical-align : bottom;
}
#clear { clear: both; }
img {
border: 0px;
}
#face1{

padding-top: 220px;
left: 30px;
}
#face2{
position: relative;
top: 220px;
left: 10px;
}


Effectively what I want is:
Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE!

Thank you for your time.

Auto Height Background Not Working With Nested Divs In Mozilla

 Similar Tutorials View Content
I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways?

Thanks,
Carlos

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
  <div id="navbar">
    <p>testing</p>
    <p>testing</p>
    <p>testing</p>
  </div>
</div>
</body>
</html>



My CSS


Code:
@charset "utf-8";
/* CSS Document */

body {
	background-color: #000;
	margin-top: 17px;
	margin-bottom: 15px;

}
#header {
	background-image: url(images/header.jpg);
	margin:0 auto;
	height: 167px;
	width: 810px;
	background-repeat: no-repeat;
}

#maincontent {
	background-image: url(images/coatedmetalsm.jpg);
	background-repeat: repeat;
	margin:0 auto;
	width: 810px;
	height: auto;
}
#navbar {
	float: left;
	width: auto;
	position: relative;
}


Trouble Getting My Container And Content Divs To Stretch Height According To Content

 Similar Tutorials View Content

Vertical Align/height Issues With Divs..(ie6 Issues, Of Course!!!)

 Similar Tutorials View Content
I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:
<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>


Headache And A Half...

 Similar Tutorials View Content
So I came up with this lovely design for the company I'm working for, because they're website now is just utter crap. I figured instead of coding my usual way (a mess and unvalidated) I'd start off making it as clean and css-friendly as possible. I've run into some major issues, some common and some not. If any of you could help me, I would be extremely grateful.

My main problem is my issue with internet explorer. I've positioned everything to match up perfectly in Firefox, the site looks great and is aligned fairly well. However, when the site hits IE, everything shifts a couple pixels and throws everything off. Anyone know why this is happening? There is also a gap at the top of the page in IE, which isn't present in firefox.

I also can't figure out how to pus the footer to the bottom. I wanted another footer that stretched the whole page at the bottom (similar to the top), with a sort of 'prefooter' on top of it. I can't figure out how to just push a regular footer to the bottom, and I've tried all the fixes I can find online. Any idea why?

Here is the site:
Code:
http://www.chromaticstudios.net/AVT/


Perspective Half Right

 Similar Tutorials View Content
I'm trying to achieve the effect of flipping an element down. I can get it to flip down but I want to add perspective in order to have a 3D effect. I can get perspective to work but the second half of the transformation is what I want to happen from the start, not just half way through.

A lot of things I'm trying makes it go up and then down and that's not what I'm after.

Code:
.flip {
	-webkit-animation: flipDown 5000ms 1 linear;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: bottom center;
}

@-webkit-keyframes flipDown {
	0%    {
		-webkit-transform: rotateX(0deg);
	}
	50%   {
		-webkit-transform: rotateX(45deg);
	}
	100%  {
		-webkit-transform: rotateX(90deg) perspective(900);
	}
}



So I know that the perspective is only being transformed in the frames between the 50% and 100% marks but if I add an initial or perspective the the other keyframes it'll either jump up and then go down or just go straight down as if I didn't have perspective in there.

Any help?

Link Over Styling - Half Way :s

 Similar Tutorials View Content
Hi.

Ive been working on a theme I have a navbar with links on it and a background image. When you hover, you get a different background image on that section of the navbar.

Im trying to style it like this:



This is what it is currently like:



This is my current css:
Code:
#nav li {
	float: left;
	border-right: 0px solid #d5d5d5;
	text-align: center;
}

#nav li.over a, #nav a:hover, #nav a:active, #nav a:focus, #nav a.over {
	color: #FFFFFF;
	border-color: #2F2F2F;
	background: url(../images/grad_d1.gif) repeat-x top #0088CC;
	text-align: center;
}

#nav li.active a {
	color: #FFFFFF;
	font-style:bold;
	background: url(../images/grad_d1.gif) repeat-x top #0088CC;
	text-align: center;
	align: center;
}



This is a link: http://toyota.identityprojects.co.uk

Everything Ive tried seems to give bad results. Initally I tried putting width 75% and height 30px, centrally and vertically aligning the red gradient, but this seemed to break the whole menu and im sure its a bad way of doing it.

Can anyone help me out with this, ive wasted ages on this!

Hover Works Half

 Similar Tutorials View Content
Privacy