SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wanting Both Columns To Be The Same Height

    LINK-
    http://www.applical.com/073108/contact.php

    I am wanting these two DIVs, "column" and "sidebar", to be the same height.
    When I view the link listed above, I am seeing the sidebar DIV with a blank space underneath it instead of it extending all of the way down to the column DIV. Any ideas why?


    CSS-
    Code:
    @charset "UTF-8";
    body {
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    	background-color: #666666;
    	background-image: url(../i/gfx_bkg.gif);
    }
    #wrapper {
    	width: 840px;
    	margin: 0px auto 20px auto;
    	padding: 0px;
    }
    #masthead img {
    	margin-left: 700px;
    }
    #masthead {
    	background-color: #FFFFFF;
    	padding-top: 18px;
    }
    #footer {
    	margin-top: 9px;
    	margin-right: 0px;
    	margin-bottom: 9px;
    	margin-left: 0px;
    	clear: both;
    }
    #content {
    	background-image: url(../../c/i/gfx_bkg_btm.jpg);
    	background-repeat: no-repeat;
    	background-position: bottom;
    }
    #col1 {
    	width: 547px;
    	height: 169px;
    	float: left;
    	background-color: #FFFFFF;
    	background-image: url(../i/gfx_col1_bkg.png);
    	background-repeat: no-repeat;
    	padding: 25px 0px 0px 0px;
    *   display: inline;*
    }	
    #col1 p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #666666;
    	text-align: left;
    	padding-left: 70px;
    	padding-right: 35px;
    	line-height: 18px;
    }
    #col1 .header {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #BE0C20;
    	text-transform: uppercase;
    	text-align: left;
    	font-weight: bold;
    }
    #col1 .content a {
    	font-size: 9px;
    	font-weight: bolder;
    	color: #BE0C20;
    	text-transform: uppercase;
    	text-decoration: none;
    	line-height: 0px;
    }
    #col2 {
    	width: 293px;
    	height: 169px;
    	float: left;
    	background-color: #FFFFFF;
    	background-image: url(../i/gfx_col2_bkg.png);
    	background-repeat: no-repeat;
    *   display: inline;*
    ;	padding-top: 25px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    }
    #col2 p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #666666;
    	text-align: left;
    	padding-left: 90px;
    	padding-right: 35px;
    	line-height: 18px;
    }
    #col2 .header {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #BE0C20;
    	text-transform: uppercase;
    	text-align: left;
    	font-weight: bold;
    }
    #col2 .content a {
    	font-size: 9px;
    	font-weight: bolder;
    	color: #BE0C20;
    	text-transform: uppercase;
    	text-decoration: none;
    	line-height: 0px;
    }
    #column {
    	width: 547px;
    	float: left;
    	background-color: #FFFFFF;
    	padding: 25px 0px 0px 0px;
    *   display: inline;*
    }	
    #column p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #666666;
    	text-align: left;
    	padding-left: 70px;
    	padding-right: 35px;
    	line-height: 18px;
    }
    #column .header {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #BE0C20;
    	text-transform: uppercase;
    	text-align: left;
    	font-weight: bold;
    }
    #column .content a {
    	font-size: 9px;
    	font-weight: bolder;
    	color: #BE0C20;
    	text-transform: uppercase;
    	text-decoration: none;
    	line-height: 0px;
    }
    #sidebar {
    	width: 293px;
    	float: left;
    	background-color: #FFFFFF;
    *   display: inline;*
    ;	padding-top: 25px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    }
    #sidebar p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #666666;
    	text-align: left;
    	padding-left: 90px;
    	padding-right: 35px;
    	line-height: 18px;
    }
    #sidebar .header {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #BE0C20;
    	text-transform: uppercase;
    	text-align: left;
    	font-weight: bold;
    }
    #sidebar .content a {
    	font-size: 9px;
    	font-weight: bolder;
    	color: #BE0C20;
    	text-transform: uppercase;
    	text-decoration: none;
    	line-height: 0px;
    }
    #promos {
    	width: 840px;
    	background-color: #FFFFFF;
    	background-image: url(../i/gfx_promo_bkg.png);
    	background-repeat: no-repeat;
    	height: 106px;
    	display: inline;
    }
    #promo2 {
    	float: left;
    	height: 106px;
    	width: 298px;
    }
    #promo3 {
    	float: left;
    	height: 106px;
    	width: 249px;
    }
    #promo4 {
    	float: left;
    	height: 106px;
    	width: 293px;
    }
    .content {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #333333;
    	text-align: left;
    	padding-left: 70px;
    	padding-right: 35px;
    	line-height: 18px;
    }
    .clear {
    	float: left;
    	margin: 0px;
    	padding: 0px;
    }
    input,textarea,select {
    	font-size: 11px;
    	line-height: 1em;
    	padding: 1px;
    	margin: 0px;
    	font-family: Arial, Helvetica, sans-serif;
    	border: thin solid #666666;
    }


    HTML-
    HTML 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>
    <title>Applical | Signs, Banners, Vehicle Wraps, Point-Of-Purchase Displays, Tradeshow Displays, Decals, Custom Printed Items</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="c/styles.css" rel="stylesheet" type="text/css" />
    <script src="j/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>
    <body bgcolor="#FFFFFF">
    <div id="wrapper">
    <div id="content">
    <div id="masthead"><a href="../contact.php"><img src="i/gfx_phone.gif" alt="" width="140" height="22" border="0" id="gfx_phone" title="Questions? Call (865)859-9118" /></a></div>
    <div id="flash">
      <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','840','height','324','title','Applical | Signs, Banners, Vehicle Wraps, Point-Of-Purchase Displays, Tradeshow Displays, Decals, Custom Printed Items','src','m/applical_073108','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','scale','exactfit','bgcolor','#FFFFFF','movie','m/applical_073108' ); //end AC code
      </script>
      <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="840" height="324" title="Applical | Signs, Banners, Vehicle Wraps, Point-Of-Purchase Displays, Tradeshow Displays, Decals, Custom Printed Items">
        <param name="movie" value="m/applical_073108.swf" />
        <param name="quality" value="high" />
        <param name="SCALE" value="exactfit" />
        <param name="BGCOLOR" value="#FFFFFF" />
        <embed src="m/applical_073108.swf" width="840" height="324" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" scale="exactfit" bgcolor="#FFFFFF"></embed>
      </object>
      </noscript></div>
    <div id="nav">
      <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','840','height','63','title','Applical | Signs, Banners, Vehicle Wraps, Point-Of-Purchase Displays, Tradeshow Displays, Decals, Custom Printed Items','src','m/nav_073108','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','scale','exactfit','bgcolor','#FFFFFF','movie','m/nav_073108' ); //end AC code
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="840" height="63" title="Applical | Signs, Banners, Vehicle Wraps, Point-Of-Purchase Displays, Tradeshow Displays, Decals, Custom Printed Items">
        <param name="movie" value="m/nav_073108.swf" />
        <param name="quality" value="high" /><param name="SCALE" value="exactfit" /><param name="BGCOLOR" value="#FFFFFF" />
        <embed src="m/nav_073108.swf" width="840" height="63" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" scale="exactfit" bgcolor="#FFFFFF"></embed>
      </object>
    </noscript></div>
    <div id="column">
      <p class="content"><span class="header">CONTACT</span><br />
      <!-- START APPOINTMENT FORM -->
    
    <!-- END APPOINTMENT FORM -->
    </div><div id="sidebar">
      <p class="content"><span class="header">SIDEBAR</span><br />
        Lorem ipsum dolor sit amet, consectetuer adipiscing. Duis ligula lorem, consequat eget, tristique auctor quis, purus. </p>
      <p class="content"><a href="#">&gt;&gt; READ THIS ARTICLE</a></p></div>
      <img src="i/gfx_bkg_btm.jpg" alt="" width="840" height="5" id="gfx_bkg_btm" /></div>
    <div id="footer"><img id="gfx_footer" src="i/gfx_footer.png" width="840" height="50" alt="" /></div>
    </div>
    </body>
    </html>


    Todd
    Todd Temple > T2 Design

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This article usually gives an answer:
    http://www.alistapart.com/articles/fauxcolumns/

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan_A View Post
    This article usually gives an answer:
    http://www.alistapart.com/articles/fauxcolumns/
    Hmmm. I added a background image of a white 1x1pxl image and told it to repeat and it still has the same look. Any other suggestions?
    Todd Temple > T2 Design

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's no good applying the background image to the columns themselves (This is explained in the article so have another read again.)

    The image is applied to a parent of both columns and the image should be as wide as the columns are and then just repeated down the y-axis of the parent. At present you are just repeating a 1px x 1px background gif on the column itself which is the same as just giving it a background colour. It won't make the column any longer.

    The only element that will be as long as both columns is the parent that contains both the columns. This is why the repeating image is placed on the parent and not the columns themselves.

    However both your columns are white anyway so why don't you simply color #wrapper white and then it will be all white

    Code:
    #wrapper {
        width: 840px;
        margin: 0px auto 20px auto;
        padding: 0px;
        background:#fff
    }
    #footer {
        margin:9px auto;
        width:840px;
        clear: both;
    }
    You will then just need to move the footer outside of the wrapper so that your round corners still show.

    Code:
                <!-- END APPOINTMENT FORM -->
            </div>
            <div id="sidebar">
                <p class="content"><span class="header">SIDEBAR</span><br />
                    Lorem ipsum dolor sit amet, consectetuer adipiscing. Duis ligula lorem, consequat eget, tristique auctor quis, purus. </p>
                <p class="content"><a href="#">&gt;&gt; READ THIS ARTICLE</a></p>
            </div>
            <img src="http://www.applical.com/073108/i/gfx_bkg_btm.jpg" alt="" width="840" height="5" id="gfx_bkg_btm" /></div>
    </div>
    <div id="footer"><img id="gfx_footer" src="http://www.applical.com/073108/i/gfx_footer.png" width="840" height="50" alt="" /></div>
    </body>
    </html>
    Hope that helps


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
  •