Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    153
    Thanks
    53
    Thanked 0 Times in 0 Posts

    css height problems

    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:
    Code:
    <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:
    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" 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!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Validate and fix the errors in your markup first!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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 instead of some of those divs.

  • Users who have thanked SB65 for this post:

    wincode (09-08-2010)

  • #4
    Regular Coder
    Join Date
    Jan 2010
    Posts
    153
    Thanks
    53
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •