CSS - Div's Don't Grow With Content

Hello,
I've about given up..
I've always used mostly tables, with div 's here and there. I've been trying to build some completely CSS3 / HTML5 pages.. might as well be ready for the next step.. anyways..
Both w3.org validators (css3 and html5) validate the pages, but they are not right.

I thought the body could be used as the parent container.. and if not i've tried this with a 'wrapper' div also .. with an image of bottom, problem area. .

So, why wont the parent container, set to 'auto' or '100%' 'grow' beyond 1760 pixels?
I can set it to 2000px or what ever, but then I have to change it anytime page content changes.

FYI. I use mozilla nightly, Aurora browsers on all my openSuSE systems running KDE.. Don't know if it will look diff on another system.. don't really care, but ..

Thank you in advance,
Landis.

Hi all,
I've been struggling with a basic layout question for a while and I could use some direction as a recent CSS convert. Basically I have a two column layout contained within another div (for borders and colors). What is happening is that my container only grows vertically to the size of the right column regardless of the size of the the left. Is there a way to "attach" the containing div to which ever column is the tallest?

I've setup a test page to show the problem. This occurs in I.E. 6.0 and Firefox 1.5.x (Windows and Unix).

Thanks very much for any pointers.

Hi there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.

Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so:

Code:

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel.

Does anyone know of a way to control the inter-div spacing when "clear" is defined?

Thanks

Ken


---------------------------------------------------------------
Original post
---------------------------------------------------------------
I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems.

The first row renders perfectly but the text of subsequent rows overlaps the text of first row.

Here's the html:
Code:

<div id="contentBlock" class="bodyText">
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">New</div>
	</div>
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">Open</div>
	</div>
</div>

And here's the CSS:
Code:

#contentBlock {
	position: absolute;
	top: 130px;
	left: 200px;
	height: 101%;   /* Hack to force vertical scroll bars */
	right: 280px;
	min-width: 400px;
	visibility: visible;
	display: block;
	}

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

.disclosureCollapsed {
	background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
	display: block;
	text-align: right;
	/*position: absolute;*/
	float: left;
	top: 0px;
	left: 0px;
	width: 18px;
	height: 20px;
	}

.disclosureCollapsed:hover {
	cursor: pointer;
	}

How would I make the text in each subsequent row (statusDiv) line up?

Thanks for any help

Ken

http://www.hybridillusions.com/wordpress/?m=200712

Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like...

http://www.hybridillusions.com/wordpress/

For CSS reference, here is where the css file is located:
http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css

Thanks in advance!

I am working form a template that I am modifying a website and the the content is working fine in Chrome, Safari, and FF, but the part of the sidebar shows up in IE7 and no other content. Any asssitance will be appreciated. I tried different hacks with no luck. I got errors for unscrollable content but I don't believe that is it because I tried all "fixes"

Code:

/* begin Page */
www.justgreek.com/questions.html 

body
{
	margin: 0 auto;
	padding: 0;
	background-color: #D08C35;
	background-image: url('images/Page-BgTexture.jpg');
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: top left;
}

#art-main
{
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
}

#art-page-background-glare
{
	position: absolute;
	width: 100%;
	height: 630px;
	left: 0;
	top: 0;
}

#art-page-background-glare-image
{
	background-image: url('images/Page-BgGlare.png');
	background-repeat: no-repeat;
	height: 630px;
	width: 817px;
	margin: 0;
}

html:first-child #art-page-background-glare
{
	border: 1px solid transparent; /* Opera fix */
}


#art-page-background-gradient
{
	position: absolute;
	background-image: url('images/Page-BgGradient.jpg');
	background-repeat: repeat-x;
	top:0;
	width:100%;
	height: 900px;
	
}

#art-page-background-gradient
{
	background-position: top left;
}


.cleared
{
	float: none;
	clear: both;
	margin: 0;
	padding: 0;
	border: none;
	font-size:1px;
}


form
{
	padding:0 !important;
	margin:0 !important;
}

table.position
{
	position: relative;
	width: 100%;
	table-layout: fixed;
}
/* end Page */

/* begin Box, Sheet */
.art-Sheet
{
	position:relative;
	z-index:0;
	margin:0 auto;
	width: 955px;
	min-width:55px;
	min-height:55px;
}

.art-Sheet-body
{
	position: relative;
	z-index: 1;
	padding: 4px;
}


.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
	width: 66px;
	height: 66px;
	background-image: url('images/Sheet-s.png');
}

.art-Sheet-tl
{
	top:0;
	left:0;
	clip: rect(auto, 33px, 33px, auto);
}

.art-Sheet-tr
{
	top: 0;
	right: 0;
	clip: rect(auto, auto, 33px, 33px);
}

.art-Sheet-bl
{
	bottom: 0;
	left: 0;
	clip: rect(33px, 33px, auto, auto);
}

.art-Sheet-br
{
	bottom: 0;
	right: 0;
	clip: rect(33px, auto, auto, 33px);
}

.art-Sheet-tc, .art-Sheet-bc
{
	left: 33px;
	right: 33px;
	height: 66px;
	background-image: url('images/Sheet-h.png');
}

.art-Sheet-tc
{
	top: 0;
	clip: rect(auto, auto, 33px, auto);
}

.art-Sheet-bc
{
	bottom: 0;
	clip: rect(33px, auto, auto, auto);
}

.art-Sheet-cr, .art-Sheet-cl
{
	top: 33px;
	bottom: 33px;
	width: 66px;
	background-image: url('images/Sheet-v.png');
}

.art-Sheet-cr
{
	right:0;
	clip: rect(auto, auto, auto, 33px);
}

.art-Sheet-cl
{
	left:0;
	clip: rect(auto, 33px, auto, auto);
}

.art-Sheet-cc
{
	position:absolute;
	z-index:-1;
	top: 33px;
	left: 33px;
	right: 33px;
	bottom: 33px;
	background-color: #FFFFFF;
}


.art-Sheet
{
	margin-top: 10px !important;
}

#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
	min-width:955px;
}

/* end Box, Sheet */

/* begin Header */
div.art-Header
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 947px;
	height: 136px;
}

div.art-Header-png
{
	position: absolute;
	z-index:-2;
	top: 0;
	left: 0;
	width: 947px;
	height: 136px;
	background-image: url('images/Header.png');
	background-repeat: no-repeat;
	background-position: left top;
}

div.art-Header-jpeg
{
	position: absolute;
	z-index:-1;
	top: 0;
	left: 0;
	width: 947px;
	height: 136px;
	background-image: url('images/Header.jpg');
	background-repeat: no-repeat;
	background-position: center center;
}
/* end Header */

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
	text-align:left;
	text-decoration:none;
	outline:none;
	letter-spacing:normal;
	word-spacing:normal;
}

.art-menu, .art-menu ul
{
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}

.art-menu li
{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	position: relative;
	z-index: 5;
	background:none;
}

.art-menu li:hover
{
	z-index: 10000;
	white-space: normal;
}

.art-menu li li
{
	float: none;
}

.art-menu ul
{
	visibility: hidden;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	background:none;
}

.art-menu li:hover>ul
{
	visibility: visible;
	top: 100%;
}

.art-menu li li:hover>ul
{
	top: 0;
	left: 100%;
}

.art-menu:after, .art-menu ul:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.art-menu, .art-menu ul
{
	min-height: 0;
}

.art-menu ul
{
	background-image: url(images/spacer.gif);
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}





/* menu structure */

.art-menu
{
	padding: 4px 2px 0px 2px;
}

.art-nav
{
	position: relative;
	height: 29px;
	z-index: 100;
}

.art-nav .l, .art-nav .r
{
	position: absolute;
	z-index: -1;
	top: 0;
	height: 29px;
	background-image: url('images/nav.png');
}

.art-nav .l
{
	left: 0;
	right:0px;
}

.art-nav .r
{
	right: 0;
	width: 947px;
	clip: rect(auto, auto, auto, 947px);
}


/* end Menu */

/* begin MenuItem */
.art-menu ul li
{
	clear: both;
}

.art-menu a
{
	position:relative;
	display: block;
	overflow:hidden;
	height: 25px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 4px;
	margin-left: 4px;
}


.art-menu a .r, .art-menu a .l
{
	position:absolute;
	display: block;
	top:0;
	z-index:-1;
	height: 75px;
	background-image: url('images/MenuItem.png');
}

.art-menu a .l
{
	left:0;
	right:11px;
}

.art-menu a .r
{
	width:422px;
	right:0;
	clip: rect(auto, auto, auto, 411px);
}

.art-menu a .t 
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
	color: #DEDEDE;
	padding: 0 2px;
	margin: 0 11px;
	line-height: 25px;
	text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
	top:-25px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
	top:-25px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
	top:-25px;
}
.art-menu a:hover .t
{
	color: #F0F0F0;
}

.art-menu li:hover a .t
{
	color: #F0F0F0;
}

.art-menu li:hover>a .t
{
	color: #F0F0F0;
}


.art-menu a.active .l, .art-menu a.active .r
{
	top: -50px;
}

.art-menu a.active .t
{
	color: #000000;
}


/* end MenuItem */

/* begin MenuSubItem */
.art-menu ul a
{
	display:block;
	text-align: center;
	white-space: nowrap;
	height: 20px;
	width: 180px;
	overflow:hidden;
	line-height: 20px;
	margin-right: auto;


	background-image: url('images/subitem-bg.png');
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 0px;
	border-style: solid;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	display: inline;
	float: none;
	margin: inherit;
	padding: inherit;
	background-image: none;
	text-align: inherit;
	text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	text-align: left;
	text-indent: 12px;
	text-decoration: none;
	line-height: 20px;
	color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}

.art-menu ul ul a
{
	margin-left: auto;
}

.art-menu ul li a:hover
{
	color: #3B3B3B;
	background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
	color: #3B3B3B;
	background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
	color: #3B3B3B;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
	color: #3B3B3B;
}


/* end MenuSubItem */

/* begin ContentLayout */
div.art-content
{
	width:709px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: auto;
	margin-right auto;
}
.art-contentLayout
{
	position: absolute;
	top: 156px;
	margin-bottom: 6px;
	width: 947px;
}
/* end ContentLayout */

/* begin Box, Block */
.art-Block
{
	position:relative;
	z-index:0;
	margin:0 auto;
	min-width:15px;
	min-height:15px;
}

.art-Block-body
{
	position: relative;
	z-index: 1;
	padding: 7px;
}
	

.art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl
{
	width: 14px;
	height: 14px;
	background-image: url('images/Block-s.png');
}

.art-Block-tl
{
	top:0;
	left:0;
	clip: rect(auto, 7px, 7px, auto);
}

.art-Block-tr
{
	top: 0;
	right: 0;
	clip: rect(auto, auto, 7px, 7px);
}

.art-Block-bl
{
	bottom: 0;
	left: 0;
	clip: rect(7px, 7px, auto, auto);
}

.art-Block-br
{
	bottom: 0;
	right: 0;
	clip: rect(7px, auto, auto, 7px);
}

.art-Block-tc, .art-Block-bc
{
	left: 7px;
	right: 7px;
	height: 115px;
	background-image: url('images/Block-h.png');
}

.art-Block-tc
{
	top: 0;
	clip: rect(auto, auto, 7px, auto);
}

.art-Block-bc
{
	bottom: 0;
	clip: rect(7px, auto, auto, auto);
}

.art-Block-cr, .art-Block-cl
{
	top: 7px;
	bottom: 7px;
	width: 1px;
	background-image: url('images/Block-v.png');
}

.art-Block-cr
{
	right:0;
	clip: rect(auto, auto, auto, 7px);
}

.art-Block-cl
{
	left:0;
	clip: rect(auto, 7px, auto, auto);
}

.art-Block-cc
{
	position:absolute;
	z-index:-1;
	top: 7px;
	left: 7px;
	right: 7px;
	bottom: 7px;
	background-color: #F8EFE2;
}


.art-Block
{
	margin: 7px;
}

/* end Box, Block */

/* begin BlockHeader */
.art-BlockHeader
{
	position:relative;
	z-index:0;
	height: 30px;
	padding: 0 7px;
	margin-bottom: 7px;
}

.art-BlockHeader .t
{
	height: 30px;
	color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
	white-space : nowrap;
	padding: 0 6px;
	line-height: 30px;	
}

.art-BlockHeader .l, .art-BlockHeader .r
{
	display:block;
	position:absolute;
	z-index:-1;
	height: 30px;
	background-image: url('images/BlockHeader.png');
}

.art-BlockHeader .l
{
	left:0;
	right:6px;
}

.art-BlockHeader .r
{ 
	width:947px;
	right:0;
	clip: rect(auto, auto, auto, 941px);
}





.art-header-tag-icon
{
    height: 30px;
	background-position:left top;
	background-image: url('images/BlockHeaderIcon.png');
	padding:0 0 0 12px;
	background-repeat: no-repeat;
	min-height: 12px;
	margin: 0 0 0 5px;
}


/* end BlockHeader */

/* begin Box, BlockContent */
.art-BlockContent
{
	position:relative;
	z-index:0;
	margin:0 auto;
	min-width:1px;
	min-height:1px;
	background-color: #FFFFFF;
}

.art-BlockContent-body
{
	position: relative;
	z-index: 1;
	padding: 8px;
}



.art-BlockContent-body
{
	color:#383838;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}

.art-BlockContent-body a:link
{
	color: #832121;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
	color: #525252;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
	color: #290A0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}

.art-BlockContent-body ul
{
	list-style-type: none;
	color: #4A4A4A;
	margin:0;
	padding:0;
}

.art-BlockContent-body li
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration: none;
}

.art-BlockContent-body ul li
{
	padding:0px 0 0px 13px;
	background-image: url('images/BlockContentBullets.png');
	background-repeat:no-repeat;
	margin:0.5em 0 0.5em 0;
	line-height:1.2em;
}

/* end Box, BlockContent */

/* begin Box, Post */
.art-Post
{
	position:absolute;
	z-index:0;
	margin:0 auto;
	min-width:706px;
	min-height:1px;
}

.art-Post-body
{
	position: absolute;
	z-index: 1;
	padding: 10px;
}



.art-Post
{
	margin: 7px;
}

/* Start images */
a img
{
	border: 0;
}

.art-article img, img.art-article
{
	border: solid 1px #C4C4C4;
	margin: 1em;
}

.art-metadata-icons img
{
	border: none;
	vertical-align: middle;
	margin: 2px;
}
/* Finish images */

/* Start tables */

.art-article table, table.art-article
{
	border-collapse: collapse;
	margin: 1px;
	width:auto;
}

.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
	background-color:Transparent;
}

.art-article th, .art-article td
{
	padding: 2px;
	border: solid 1px #5C5C5C;
	vertical-align: top;
	text-align:left;
}

.art-article th
{
	text-align: center;
	vertical-align: middle;
	padding: 7px;
}

/* Finish tables */

pre
{
	overflow: auto;
	padding: 0.1em;
}

/* end Box, Post */

/* begin PostHeaderIcon */
.art-PostHeader
{
	text-decoration:none;
	margin: 0.2em 0;
	padding: 0;
	font-weight:normal;
	font-style:normal;
	letter-spacing:normal;
	word-spacing:normal;
	font-variant:normal;
	text-decoration:none;
	font-variant:normal;
	text-transform:none;
	text-align:left;
	text-indent:0;
	line-height:inherit;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
	color: #661919;
}

.art-PostHeader a, .art-PostHeader a:link, .art-PostHeader a:visited, .art-PostHeader a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
	margin:0;
	color: #661919;
}

/* end PostHeaderIcon */

/* begin PostHeader */
.art-PostHeader a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
  color: #7A1F1F;
}

.art-PostHeader a:visited, .art-PostHeader a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
  color: #4D4D4D;
}

.art-PostHeader a:hover, .art-PostHeader a.hovered
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
  color: #BC2F2F;
}
/* end PostHeader */

/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
  color: #404040;
}


.art-PostContent p 
{
	margin: 0.5em 0;
}

.art-PostContent, .art-PostContent p
{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	text-align: justify;
	color: #84561E;
}

.art-PostContent
{
  margin:0;
}


/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
  color: #8F2424;
}

/* Adds special style to an unvisited link. */
a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
  color: #8F2424;
}

/* Adds special style to a visited link. */
a:visited, a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
  color: #3B3B3B;
}

/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
  color: #BC2F2F;
}

/* Finish Content link style */

/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}


/* Start Content headings Fonts & Colors  */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 28px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #8F2424;
}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #BC2F2F;
}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #595959;
}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #A72A2A;
}

h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #292929;
}

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #292929;
}
/* Finish Content headings Fonts & Colors  */
/* end PostContent */

/* begin PostBullets */
/* Start Content list */
ol, ul
{
	color: #404040;
	margin:1em 0 1em 2em;
	padding:0;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
}

li ol, li ul
{
	margin:0.5em 0 0.5em 2em;
	padding:0;
}

li 
{
	margin:0.2em 0;
	padding:0;
}

ul
{
	list-style-type: none;
}

ol
{
	list-style-position:inside;
	
}



.art-Post li
{
	padding:0px 0 0px 13px;
	line-height:1.2em;
}

.art-Post ol li, .art-Post ul ol li
{
	background: none;
	padding-left:0;
}

.art-Post ul li, .art-Post ol ul li 
{
	background-image: url('images/PostBullets.png');
	background-repeat:no-repeat;
	padding-left:13px;
}


/* Finish Content list */
/* end PostBullets */

/* begin PostQuote */
/* Start blockquote */
blockquote,
blockquote p,
.art-PostContent blockquote p
{
	color:#2E2E2E;
font-family: Arial, Helvetica, Sans-Serif;
font-style: italic;
font-weight: normal;
text-align: left;
}

blockquote,
.art-PostContent blockquote
{
		border:solid 1px #DD7878; 
		margin:10px 10px 10px 50px;
	padding:5px 5px 5px 41px;
	background-color:#EEBABA;
	background-image:url('images/PostQuote.png');
	background-position:left top;
	background-repeat:no-repeat;
}


/* Finish blockuote */
/* end PostQuote */

/* begin Button */
.art-button-wrapper .art-button
{
	display:inline-block;
	width: auto;
	outline:none;
	border:none;
	background:none;
	line-height:33px;
	margin:0 !important;
	padding:0 !important;
	overflow: visible;
	cursor: default;
	text-decoration: none !important;
	z-index:0;
}

.art-button-wrapper
{
	display:inline-block;
	position:relative;
	height: 33px;
	overflow:hidden;
	white-space: nowrap;
	width: auto;
	z-index:0;
}

.firefox2 .art-button-wrapper
{
	display:block;
	float:left;
}

.art-button-wrapper .art-button
{
	display:block;
	height: 33px;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
	white-space: nowrap;
	text-align: left;
	padding: 0 21px !important;
	line-height: 33px;
	text-decoration: none !important;
	color: #FAF3EA !important;
}

input, select
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}

.art-button-wrapper.hover .art-button, .art-button:hover
{
	color: #FBEFEF !important;
	text-decoration: none !important;
}

.art-button-wrapper.active .art-button
{
	color: #F2F2F2 !important;
}

.art-button-wrapper .l, .art-button-wrapper .r
{
	display:block;
	position:absolute;
	z-index:-1;
	height: 92px;
	background-image: url('images/Button.png');
}

.art-button-wrapper .l
{
	left:0;
	right:10px;
}

.art-button-wrapper .r
{
	width:409px;
	right:0;
	clip: rect(auto, auto, auto, 399px);
}

.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
	top: -33px;
}

.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
	top: -66px;
}


/* end Button */

/* begin Footer */
.art-Footer
{
	position:relative;
	z-index:0;
	overflow:hidden;
	width: 947px;
	margin: 5px auto 0px auto;
}

.art-Footer .art-Footer-inner
{
	height:1%;
	position: relative;
	z-index: 0;
	padding: 8px;
	text-align: center;
}

.art-Footer .art-Footer-background
{
	position:absolute;
	z-index:-1;
	background-repeat:no-repeat;
	background-image: url('images/Footer.png');
	width: 947px;
	height: 150px;
	bottom:0;
	left:0;
}


.art-Footer .art-Footer-text p
{
	margin: 0;
}

.art-Footer .art-Footer-text
{
	display:inline-block;
	color:#000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11px;
}

.art-Footer .art-Footer-text a:link
{
	text-decoration: none;
	color: #DEAF73;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-Footer .art-Footer-text a:visited
{
	text-decoration: none;
	color: #333333;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-Footer .art-Footer-text a:hover
{
	text-decoration: none;
	color: #291C0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}
/* end Footer */

/* begin PageFooter */
.art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
{
	font-family:Arial;
	font-size:10px;
	letter-spacing:normal;
	word-spacing:normal;
	font-style:normal;
	font-weight:normal;
	text-decoration:underline;
	color:#D69D51;
}

.art-page-footer
{
	margin:1em;
	text-align:center;
	text-decoration:none;
	color:#949494;
}
/* end PageFooter */

/* begin LayoutCell */


.art-contentLayout .art-sidebar1
{
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	left: 0;
	overflow: hidden;
	width: 236px;
}
/* end LayoutCell */

/* begin LayoutCell */
.art-contentLayout .art-content
{
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	right: 0;
	overflow: hidden;
	width: 709px;
}
.art-contentLayout .art-content-wide
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 945px;
}


.ProductItem {
	border-color:#CCCCCC;
	border-style:solid;
	border-width:1;
	padding:5;
	padding-top:10;
	width:200px;

}

.ProductItem {

	font-size:11;
	width:200px;
	
}


.ProductItemClick {
	text-align:center;
	width:100%;
	cursor:pointer;
}


.ProductItemImage {
	text-align:center;
	width:200px;
	cursor:pointer;
	height:125px;
}

.ProductItemName {
	height:40;
	text-align:center;
	line-height:14px;
}

.ProductItemShortDesc {
	border-color:#857358;
	border-style:solid;
	border-width:1;

	background-image:url(Images/DescBG.png);
	color:#FFFFFF;
	height:35;
	padding:0;
	!padding:3;
	font-size:10px;
	line-height:12px;
}


/* end LayoutCell */

hi, I have a layour where the container is 100% high, and then I have a header and nav
then I have a #main and #bar divs (columns)
then #footer

I would like for the footer to stick to the bottom and the main, and bar expand to the bottom (even if there isn't enough text)

does this make sense, heres my css

PHP Code:
 html,body {
        height:100%;
        margin:0px;
        padding:0px;
        background: #eee;
    }
    
    #container {
        height:100%;
        margin: 0 auto;
        width: 720px;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        background: #f00;        
    }

    #header {
        height: 170px;
        background: #ff0 url('../images/header.gif');    
    }

    #nav {
        height: 25px;
        padding: 5px;
        background: #666;
    }

    #main {
        width: 400px;
        float: left;
        padding: 10px;
        background: #fff;
    }
    
    #bar {
        padding: 10px;
        margin-left: 420px;
        border-left: 1px solid #006;
        background: #fff;
    }

    #copy {
        height: 30px;
        background: #999;
        clear: both;
    } 

Hi,

I'm knocking up a new site and I'd like to place the content first in the source code, followed by the nav code etc.

The design of the site goes: header -> main content -> footer.

The navigation will sit in the header above the main content.
all the nav links etc. are text and will be resizable by the user as that is good accessibility practice. This means the header can change height as the font expands.

So my question is...

I see how I could put the header and nav last in the soiurce code and then position it absolutely, and position the main content etc. under it. but how do I do this when the height of the header can vary if the user alters the text size etc.?


any tips ladies and gentlemen?

my css :

Code:

#contentright {
		width:171px;
		padding:0px;
		float:left;
		background:#fff;
		}

I am new to useing css for layout and am running into a problem where if I do

Code:

<div id="contenteight">

some text

</div>

then try to do it again


Code:

<div id="contenteight">

some more text

</div>

it doesn't place the new text on the right, but rather at the bottom left.

also my while page is inside of
Code:

	#frame {
		width:823px;
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px;
		text-align:left;
		}

any help

thanks

Hi there,

I am trying to create a div with a opaque background.. I have done this, but my content is using the opacity as well.

How can I stop my content appearing semi-transparent? It is ok in IE, but FF, Opera and Chrome are making the content opaque too.

This is my code:

PHP Code:
#news{
float:left;
width: 470px;
padding: 10px;
background-color: #000000;
filter: alpha(opacity = 70);
-moz-opacity:0.7;
opacity: 0.7;
z-index: 100;
}
#news_content{
position:relative;
z-index: 1000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
filter: alpha(opacity = 100);
-moz-opacity:1;
opacity: 1;
} 






Any ideas?

Hi:

I am having trouble centering divs properly. The code I am using is below, but it seems redundant to me. I am sure there is a better way to do it.

Code:

<div class="clearfix">
<div style="float: left; width: 25%;">
<a href="the-family.html"><img src="images/stories/demo/mom_dad.png" width="162" height="110"  style="border: 0;" /></a><br />
<h3  align=center>The Family</h3>
<a href="the-family.html">Read more...</a>
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624434792497" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/tehran-gallery.png" width="220" height="110" alt="tehran-gallery" title="Click for a slideshow." />
<h3 align=center>The City of Tehran</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624564172740" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/rasht-gallery.png" width="220" height="110" alt="rasht-gallery" title="Click for a slideshow." />
<h3 align=center>The City of Rasht</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624427151309" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/gilan-gallery.png" width="220" height="110" alt="gilan-gallery" title="Click for a slideshow." />
<h3 align=center>Gilan Province</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
</div>

Basically, I have a div which encloses 4 other divs. These 4 divs are each defined as "width: 25%", thus combined they take up 100% of the enclosing div.

What I want is to center the content of each of those 4 divs. The content is both text and image.

Should be a rather simple thing to do, and thus eliminate my need to individually center each element within the small 25% wide div.

Any help would be appreciated.

Thanks.

My website is www dot healthy dietpedia at dot com

I have changes css code today, I do not know what exactly cause this but after I uploaded my edited style.css my ewbsite in the browser looks crazy. My content shifted to the right buttom corner and completely out of sight.

I tried to come back and undo changes, but it does not go back all the way to the original version. I tried everything I know but nothing helps

Please, help me, I have no other hopes, I do not know what to do anymore! I am ready to cry!

Here is my code:
Code:

#container {
	width: 950px;
	background-color:;
	margin-right: auto;
	margin-left: auto;
}
#header {
	height: 160px;
	width: 950px;
	background-image: url(../image-files/header.jpg);
}
body {
	background-color:#EFFFE6;
}
#content {
	width: 530px;
	padding: 10px;
	background-color: #FFF;
	overflow:hidden;
	
	margin-left: 0px;
	margin-top: 10px;
	
}
#leftnav {
	float: left;
	width: 170px;
	height: auto;
	background-color:#CCE6FF;
	padding: 10px;
	margin-top: 10px;
	border: solid;
	border-width: thick;
	border-color: #ffffff;
	
}

#nav {
	align: horizontal;
	width: auto;
	height: auto;
	background-color: #EFFFE6;
	padding: 5px;
	border: solid;
	border-width: thick;
	border-color: #ffffff;
	
}

#leftnav ul
{
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	
}

#leftnav a
{
	width: 170px;
	color: #6587FE;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	border-bottom-width: 1px;
}

#leftnav a:link, .navlist a:visited
{
color: #6587FE;
text-decoration: none;
font-weight: normal;
}

#leftnav a:visited
{
   color:#6587FE  ;
   text-decoration: none;
   font-weight: normal;
}

#leftnav a:hover
{
	text-decoration: none;
	color: #6587FE;
	font-weight: normal;
}

#sidebar {
	padding: 10px;
	float: right;
	width: 170px;
	
	height: auto;
	margin-top: 10px;
    border: solid;
	border-width: thick;
	border-color: #ffffff;
}


#footer {
	background-color: #CCE6FF;
	padding: 10px;
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #444;
	border-top: solid;
	border-top-color: #ffffff;
	border-top-width: thick;
	
}


h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color:#6587FE;
	line-height: 24px;
	text-align: center;
	
}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: bold;
	color: #6587FE;
	line-height: 20px;
	text-align: center;
}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bolder;
	color: #6587FE;
	line-height: 20px;
	border: medium none #D9FFD9;
	
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 11pt;
	margin-top: 3px;
	margin-right: 0;
	margin-bottom: 3px;
	margin-left: 0;
	padding-bottom: 9px;
	color: #333;
	text-align: justify;
	
}

a {
	color: #6587FE;
	font-weight: bold;
	text-decoration: none;
	border: 1px none #F03;
}
a:visited {
	color:#34B3FE;
	text-decoration: none;
	font-weight : bold;
}
a:hover {
	color: #F36;
	text-decoration: none;
	font-weight: bold;
}


.box1 {
	color: #06F;
	width: 250px;
	height: 320px;
	padding-top: 5;
	padding-right: 6px;
	padding-bottom: 0;
	padding-left: 6px;
	line-height: 16px;
	background-color: #FFFFDF;
	border: medium solid #D9FFD9;
	right: auto;
}

.box2 {
	color: #06F;
	width: 140px;
	height: 197px;
	padding-top: 5;
	padding-right: 6px;
	padding-bottom: 0;
	padding-left: 6px;
	line-height: 16px;
	background-color: #FFFFDF;
	border: medium solid #D9FFD9;
	float:right;
	margin-left: 15px;
	
}

.box3 {
	color: #06F;
	width: 490px;
	height: 320px;
	padding-top: 5;
	padding-right: 6px;
	padding-bottom: 0;
	padding-left: 6px;
	line-height: 16px;
	background-color: #FFFEEA;
	border: medium solid #D9FFD9;
	right: auto;
}
.box4 {
	color: #ffF;
	width: 252px;
	height: 252px;
	
	line-height: 16px;
	
	left: auto;
}


.smalltext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding: 3px 0;
	margin: 3px 0;
	line-height: 12pt;
	
}


#related links {
}

	

#container #content fieldset {
	color: #FF8000;
	background-color: #FFFFDF;
	width: auto;
	border: thick none #A8FFA8;
}

Thanks in advance!

I currently have a drop down menu on a sidebar that when you roll over the buttons(each its own list item) a drop down menu appears over top of the buttons underneath the one your mouse is on. This works fine in Firefox of course but in IE the drop down menu goes underneath the other buttons. Any suggestions how to fix this?

Hi,
I have a flash movie which it sppaearing on top of a drop down menu. I do not have access to the <object tag so I cannot add a wmode tag. Is there a way I can get the drop down menu to appear on top using just css?

Thanks!