...

View Full Version : css height problems



wincode
09-07-2010, 03:49 AM
Hello, I'm having some css alignment issues. In the code, the column with the title "Comments" is overlapping the columns on top. How can I fix this?

The "Comments" column:

<div id="profileheader"><div id="profilehtext">Comments</div></div>
<div id="profileque">Name</div>
<div id="profileans">Content</div>
<div id="profileque">Name</div>
<div id="profileans">Content</div>
<div id="profileque">Name</div>
<div id="profileans">Content</div>
<div id="profileque">Name</div>
<div id="profileans">Content</div>
<div id="profileque">Name</div>
<div id="profileans">Content</div>



The page:



<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body{
margin:0;
padding:0;
background-image:url('/images/background.png');
background-repeat:repeat-x;

font-size: 14px;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 1000px;
margin: 0 auto;

}

#topsection{
height:142px;
}
img {
border: 0px;
}


#menus{
height: 42px;
max-width:1000px;
margin: 0 auto;
border-bottom: 1px solid #ddd;
background-image: url('/menus3.gif');
font-size: 16px;
}

#topsectioninside{
width:1000px;
margin: 0 auto;
border-bottom: 1px solid #ddd;
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;

}

#contentcolumn{
margin-left: 210px;
min-width: 750px;
}

#leftcolumn{
float: left;
width: 210px;
margin-left: -100%;
}

#profilewrap{
float: left;
width: 100%;

}

#profilenamewrap{
padding-left: 5px;
margin-left: 70px;
min-width: 130px;
min-height: 80px;
}

#profilepicwrap{
float: left;
width: 70px;
margin-left: -100%;
min-height: 80px;
padding-top: 5px;
}

#profilemain{
width: 200px;
margin: 0 auto;}



#comment{width: 400px; margin: 0 auto;}
#comment2wrap{float: left; width: 100%;}
#comment2{padding-left: 5px; margin-left: 60px; min-width: 200px; min-height: 70px;}
#comment1{float: left; width: 60px; margin-left: -100%;}
#commenttitle{font-family: calibri; font-weight: bold;}



#colmain{width: 750px; margin: 0 auto;min-height: 50px;border-top: 1px #000000 solid;}
#colwrap{float: left;width: 100%;}
#col2{margin: 0 450px 0 40px; padding-left: 5px;background: #0000ff; vertical-align: middle;}
#col1{float: left;width: 40px; margin-left: -750px;background: #00ff00;}
#col3{float: left;width: 195px; padding-left: 5px; margin-left: -200px;background: #ffff00; vertical-align: middle;}
#col4{float: left;width: 245px; padding-left: 5px; margin-left: -450px;background: #ff0000; vertical-align: middle;}


#colmaintitle{width: 750px; margin: 0 auto;max-height: 30px;}
#colwraptitle{float: left;width: 100%;}
#col2title{margin: 0 450px 0 40px; padding-left: 5px;background: #0000ff;}
#col1title{float: left;width: 40px; margin-left: -750px;background: #00ff00;}
#col3title{float: left;width: 195px; padding-left: 5px;margin-left: -200px;background: #ffff00;}
#col4title{float: left;width: 245px; padding-left: 5px; margin-left: -450px;background: #ff0000;}




#twocolmain{width: 750px; margin: 0 auto;min-height: 35px;border-top: 1px #355999 solid;background: #ffffff;}
#twocolmain2{width: 750px; margin: 0 auto;min-height: 35px; max-height:35px;border-top: 1px #355999 solid;background: #eaf2d3;}
#twocolwrap{float: left;width: 100%;}
#twocol2{margin-left: 20%; width: 80%; padding-left: 5px; padding-top: 5px;}
#twocol1{float: left;width: 20%; margin-left: -100%; padding-top: 5px}


#profilecol{width: 100%; margin: 0 auto; margin-top: -5px;}
#profilecol2wrap{float: left; width:100%;}
#profilecol2{margin-left: 200px; width: 575; padding-left: 5px; padding-top: 5px;}
#profilecol1{float: left; margin-left: -100%; width: 200px; padding-top: 5px;}


#subcol{width: 100%; margin: 0 auto;}
#subcol2wrap{float: left; width: 100%}
#subcol2{margin-left: 50%; width: 50%; padding-left: 5px; }
#subcol1{float: left; margin-left: -100%; width: 50%; }


#halfcol{width: 100%; margin: 0 auto; font-family: calibri;}
#halfcol2wrap{float: left; width: 100%}
#halfcol2{margin-left: 50%; width: 25%; padding-left: 5px; background: #ffcfcf;}
#halfcol1{float: left; width: 25%; margin-left: -75%; padding-right: 5px; background: #ffcfcf; text-align: right; font-weight: bold;}

#half2col{width: 100%; margin: 0 auto; font-family: calibri;}
#half2col2wrap{float: left; width: 100%}
#half2col2{margin-left: 50%; width: 25%; padding-left: 5px; background: #dfebf1;}
#half2col1{float: left; width: 25%; margin-left: -75%; padding-right: 5px; background: #dfebf1; text-align: right; font-weight: bold;}



#profileheader{width: 100%; height: 25px; margin: 0 auto; font-family: calibri; background: #dfebf1; border-top: 1px solid #355999;}
#profilehtext{width: 100%; padding-left: 5px; padding-top: 5px; font-weight: bold;}

#profileque{padding-left: 5px;width: 100%; text-align: left; font-weight: bold; color: #aaa;}
#profileans{padding-left: 10px;}



#footer{
clear: left;
width: 1000px;
background: #eee;
border-top:1px solid #ddd;
height:42px;
margin: 0 auto;
text-align: center;

}


.innertube{
margin: 10px;
margin-top: 5px;}




</style>



</head>
<body>

<div id="topsection"><div id="topsectioninside">
HEADER
<div id="menus">HORIZONTAL MENU</div>
</div>
</div>



<div id="maincontainer">



<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">

<div id="profilecol">
<div id="profilecol2wrap">
<div id="profilecol2">

<div id="subcol">
<div id="subcol2wrap">
<div id="subcol2">
<div id="profileheader"><div id="profilehtext">Header</div></div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>

<br/>
<div id="profileheader"><div id="profilehtext">Header</div></div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>

<br/>
</div>
</div>
<div id="subcol1">
<div id="profileheader"><div id="profilehtext">Header</div></div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>

<br/>
<div id="profileheader"><div id="profilehtext">Header</div></div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>

<br/>
<div id="profileheader"><div id="profilehtext">Header</div></div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>

<br/>
<div id="profileheader"><div id="profilehtext">Header</div></div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>

<br/>

<div id="profileheader"><div id="profilehtext">Header</div></div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>

<br/>
</div>
</div>



<div id="profileheader"><div id="profilehtext">Comments</div></div>
<div id="profileque">Name</div>
<div id="profileans">Content</div>
<div id="profileque">Name</div>
<div id="profileans">Content</div>
<div id="profileque">Name</div>
<div id="profileans">Content</div>
<div id="profileque">Name</div>
<div id="profileans">Content</div>
<div id="profileque">Name</div>
<div id="profileans">Content</div>

<br/>



</div>
</div>
<div id="profilecol1">
<div id="profileheader"><div id="profilehtext">Header</div></div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>

<br/>
<div id="profileheader"><div id="profilehtext">Header</div></div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>

<br/>
<div id="profileheader"><div id="profilehtext">Header</div></div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>
<div id="profileque">Question?</div>
<div id="profileans">Answer</div>

<br/>

</div>
</div>
</div>
</div>
</div>

<div id="leftcolumn">

VERTICAL MENU

</div>




</div><div id="footer">

</div>
</body>
</html>




Thank you so much for your time!

abduraooft
09-07-2010, 10:32 AM
Validate (http://validator.w3.org/#validate_by_input)and fix the errors in your markup first!

SB65
09-07-2010, 10:58 AM
Goodness there's a lot of divs in there....

I think your problem is because you haven't cleared your floats at the end of #subcol. If I add overflow:auto to this div then the overlap issues goes away, although there's then an unwanted scrollbar on #subcol because something's too wide. So, clear your floats on this div and you should be OK.

Couple of other points - you have multiple divs with the same id (which are causing the errors that abduraooft points out) - change the id to class and then your code will validate. Also, you might want to have a look at using definition lists (http://www.maxdesign.com.au/articles/definition/) instead of some of those divs.

wincode
09-08-2010, 06:23 AM
Ah, thanks SB65, it worked!
I fixed the scrollbar problem by reducing the width of the columns to account the 5px padding that was added.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum