SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Urgent CSS Help Required Please

    Hi everyone

    I need help getting the attached css to be 100% height. I need the left and center columns to be always full height with the bars going down them.

    I think you will see what i need once you view the html

    Thanks

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="default.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="outer">
    	<div id="breadcrumb">
    
    	</div>
    	<div id="header">
    		<h1></h1>
    		<h2></h2>
    	</div>
    	<div id="topnav">
    
    	</div>    
    	<div id="content">
    		<div id="primaryContentContainer">
    			<div id="primaryContent">
    
    			</div>
    	  </div>
    		<div id="secondaryContent">
    
    		</div>
    	  <div class="clear"></div>
    	</div>
    	<div id="footer">
    
      </div>
    </div>
    </body>
    </html>
    HTML Code:
    *
    {
    	margin: 0em;
    	padding: 0em;
    }
    
    h1,h2,h3,h4,h5,h6
    {
    	color: #444;
    }
    
    body,input
    {
    	font-family: tahoma, sans-serif;
    	font-size: 10pt;
    	color: #777;
    }
    
    input.button
    {
    	border-top: solid 1px #fff;
    	border-left: solid 1px #fff;
    	border-bottom: solid 1px #888;
    	border-right: solid 1px #888;
    	background-color: #eaeaea;
    	color: #555;
    	font-size: 0.8em;
    	padding: 0.35em;
    }
    
    input.text
    {
    	border-top: solid 1px #888;
    	border-left: solid 1px #888;
    	border-bottom: solid 1px #fff;
    	border-right: solid 1px #fff;
    	padding: 0.1em;
    	margin-top: 0.25em;
    	margin-bottom: 0.5em;
    }
    
    a
    {
    	color: #006699;
    	text-decoration: underline;
    }
    
    a:hover
    {
    	text-decoration: none;
    }
    
    /* Outer */
    
    #outer
    {
    	margin: 0em auto;
    	width: 100%;
    }
    
    /* Breadcrumb */
    
    #breadcrumb
    {
    	height: 30px;
    	float: left;
    	background-color:#343633;
    	width: 100%;
    }
    
    /* Header */
    
    #header
    {
    	height: 80px;
    	float: left;
    	background-color:#474948;
    	width: 100%;
    }
    
    #header h2
    {
    	font-size: 0.8em;
    	font-weight: normal;
    	color: #949494;
    	display: inline;
    	padding-left: 0.5em;
    }
    
    #header h1
    {
    	font-size: 1.9em;
    	display: inline;
    	letter-spacing: -0.05em;
    }
    
    #header h1 a
    {
    	color: #343434;
    	text-decoration: none;
    }
    
    
    /* topnav */
    
    #topnav
    {
    	float:left;
    	background: url(images/topnavback.jpg) repeat-x;
    	border-bottom: 1px solid #ccc;
    	width: 100%;
    	height: 37px;
    }
    
    /* Menu */
    
    #menu
    {
    	float:left;
    	background-color: #558800;
    	border-bottom: solid 1px #336600;
    	width: 100%;
    }
    
    #menu ul
    {
    	padding: 1em 4.5em 1em 4.5em;
    	list-style: none;
    }
    
    #menu li
    {
    	display: inline;
    	padding-right: 2.5em;
    	font-size: 0.8em;
    }
    
    #menu li a
    {
    	color: #fff;
    	background-color: inherit;
    }
    
    #menu li a:hover
    {
    	border-bottom: solid 1px #558800;
    }
    
    /* Content */
    
    #content
    {
    
    }
    
    /* Primary Content */
    
    #primaryContentContainer
    {
    	float: right;
    	margin-left: -19em;
    	width: 100%;
    }
    
    #primaryContent
    {
    	margin: 0em 0em 0em 15em;
    	padding: 2em 2em 2em 4em;	
    }
    
    /* Secondary Content */
    
    #secondaryContent
    {
    	float: left;
    	width: 13em;
    	padding: 2em;
    	background: #f3efe4;
    	border-right: 1px solid #ccc;	
    }
    
    /* Footer */
    
    #footer
    {
    	border-top: solid 1px #e5e5e5;
    	text-align: center;
    	padding: 1.5em 0em 1.5em 0em;
    }
    
    .clear
    {
    	clear: both;
    }

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can someone please help..this is required for a client..trying to intergrate SharePoint with the design and nomatter what i try it does not work!.. :S

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a link to an online version.. As you can see the right column is longer and there is the problem visible..however i need to to be full height all the time regardless of content.

    http://www.invisiblewebdesign.co.uk/temp/index.html

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well see the faq at the top of this forum to find otu how to do 100&#37; height. You have to set html,body{height:100%;} as they are the base parents which need the height set.

    The #otuer will need min-height:100%; and then the left and right columns can then take up 100% of the #outers height.

    Or you could fake 100% height in AP Faux columns.
    Read that post.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you need anykind of absolute positioning? I tried what you said and nothing changed!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Did you try the AP faux column technique? Because yes you do .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Did you try the AP faux column technique? Because yes you do .
    I would rather not use that technique due to the problems it can cause with SharePoint. What could cause your suggestions to not work. I am sure both techniques work so would someone help me with the normal technique?


Bookmarks

Posting Permissions

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