SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Dec 2003
    Location
    TX, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS height problem

    I am working on a tableless new design for a few sites and running into a problem I was hoping someone here might know a workaround for - did a search but didn't see anythign that was addressing this.

    I have a two column design with a header and footer on the top and bottom of the 2 columns. The html code just shows 4 DIV sections with a few wrapper DIVs to get it to properlly center in all browsers.

    The problem is with the two columns in the middle...i want to have a border dash seperating the two but the height of both columns vary from page to page and I can't seem to get the shorter one to have the same height as the taller column thus the border dash seperating them doesn't always go all the way to the bottom. If one side was always guaranteed to be longer this wouldn't be a problem, but as the heights vary from page to page I can't make that assumption. It doesn't appear that browsers look at the height: 100%; attribute so I'm not quite sure what to do...any ideas?

    Thanks in advance.

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

    If you provided your html I could have given you a full solution However you should be able to convert this 2 column design to your needs. This is based on an idea by Doug Btx and uses the border of an element to provide a solid colour for a 100% column.
    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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .wrapborder {border:1px solid black;width:401px} /*thanks to dougbtx for this*/
    .wrapper {
     
     border-right:300px solid yellow;
     width:100px; 
     background-color: #FFFFCC;
    }
    .outer {
     position:relative;/*hack for mozilla*/
    }
    .outer p {margin:0px;}
    .left {
     border-right: 1px solid #000000; 
     color:red;
    }
    .right {
     position:relative;
     width: 300px;
     float: right;
     border-left: 1px solid #000000;
     margin-right:-300px;
     z-index:100;
     }
    -->
    </style>
    </head>
    <body>
    <div class="wrapborder"> 
      <div class="wrapper"> 
    	<div class="outer"> 
    	  <div class="right"> 
    		<p>right content goes here : right content goes here :right content goes 
    		  here :</p>
    		<p>right</p>
    		<p>right</p>
    		<p>right</p>
    		<p>right</p>
    		<p>right</p>
    		<p>right</p>
    		<p>right</p>
    		<p>right</p>
    		<p>right</p>
    		<p>right</p>
    		<p>right</p>
    		<p>right</p>
    	  </div>
    	  <div class="left"> 
    		<p>Left content goes here : Left content goes here : Left content goes 
    		  here : </p>
    		<p>leftcontent</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
      
    		<div style="clear:both;">&nbsp;</div>
    	  </div>
    	</div>
      </div>
    </div>
    </body>
    </html>
    (If you don't need the columns different colours then there are other ways to do it.)

    Here's an example I just posted in another thread that uses three equalising columns that you should be able to adapt also.
    http://www.pmob.co.uk/temp/3colfixedtest_4.htm

    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Dec 2003
    Location
    TX, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for not providing code, I see the examples and they do what I want, but not sure what in the CSS is doing it (this is my first try at a tableless design and before have only used CSS for normal text markup, etc.

    Below is the HTML and the CSS I'm using - I removed a ton of other stuff so that only the necessary stuff is there to illustrate my problem. It is the dashed line that I want to go the full height of the of both the left and center DIVs.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    	<head>
    		<title>title</title>
    		<link rel="stylesheet" href="/styles/test.css" type="text/css" />
    	</head>
    	<body>
    		<div id="page">
    			<div id="innerpage">
    				<div id="header">Header</div>
    				<div id="left">Left Column<br><br><br>Left Column<br><br><br>Left Column</div>
    				<div id="center">Center Area<br><br>Center Area</div>
    				<div id="footer">Footer</div>			
    			</div>
    		</div>
    	</body>
    </html>
    Code:
    * {
    	font-family: "Lucida Grande", Arial, Helvetica, sans-serif; 
    	font-size: 10pt;  
    	color: #000; 
    	text-decoration: none;
    }
    
    body {
    	background: #666 url("/images/page/background/brushedmetal.gif"); 
    	margin: 0 0 0 0;
      	padding: 0;
      	text-align: center;
    }
    
    #page {
    	top: 5px;
    	left: 5px;
    	width: 760px;
    	text-align: left; 
    	margin-right: auto;
    	margin-left: auto;
    }
    
    #innerpage {
    	float: left;
    	border: 1px solid #000;
    	background-color: #FFF;
    	height: auto;
    	width: 760px;
    	margin-top: 5px;
    }
    
    #header {
    	margin: 0px;
    	padding: 0px;
    	width: 760px;
    	background-color: #FFF;
    }
    
    #left {
    	float: left;
    	position: relative;
    	left: 0px;
    	top: 0px;
    	width: 150px;
    }
    
    #center {
    	float: left;
    	position: relative;
    	left: 0px;
    	top: 0px;
    	width: 589px;
    	margin: 0px;
    	padding-right: 5px;
    	padding-left: 5px;
    	border-left: 1px dashed #CCC;
    }
    
    #footer {
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	width: 760px;
    	border-top: 1px solid #000;
    }

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

    A bit of lateral thinking needed here i think

    If you don't need different column xolours and if you want the border to be the full length then give the left float a right border and the right float a left border. In that way they overlap and the longest border will be evident.

    You will need to set a negative margin on the centre float to line them up correctly.

    This should do the trick (with any luck).
    Code:
    #left {
    float: left;
    position: relative;
    left: 0px;
    top: 0px;
    width: 150px;
     border-right: 1px dashed #CCC;
    }
    #center {
    float: left;
    position: relative;
    left: 0px;
    top: 0px;
    width: 589px;
    margin: 0px;
    padding-right: 5px;
    padding-left: 5px;
    border-left: 1px dashed #CCC;
    margin-left:-1px;
    }
    Hope that helps.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Dec 2003
    Location
    TX, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah - I didn't think of using a negative margin to get them to overlap as I had tried borders on both and for the overlapping sections they were just wider...negative margin will fix that...great...thanks a ton!

  6. #6
    SitePoint Member
    Join Date
    Dec 2003
    Location
    TX, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So since you were such a great help with that problem, I have one last problem before I believe my CSS design is complete.

    I was using div:hover for a horizontal menubar but as IE doesn't understand this I was trying to find something else...in the hits and tips sticky thread at the top of this forum I found this link: http://moronicbajebus.com/playground/cssplay/hormenu/

    Wow - seemed to hit it right on the head for what I was trying to do...but then noticed that IE 6 on Windows (not sure about other browsers) it flickers and the whole div that is contained within it redraws. In my case I have this in my header in the above html and it causes the whole page to redraw which is really annoying.

    Do you know of a fix to this?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Show me the code your using and I'm sure there's a fix.

    Paul

  8. #8
    SitePoint Member
    Join Date
    Dec 2003
    Location
    TX, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using the exact code minus some color changes to the code on the page I linked to.

    Code:
    <div id="nav">
      ***<ul>
     ******<li><a href="http://mywebpages.comcast.net/moronicbajebus/">Sea Mus N Squirrel</a></li>
     ******<li><a href="http://mywebpages.comcast.net/moronicbajebus/about/">About</a></li>
     ******<li><a href="http://mywebpages.comcast.net/moronicbajebus/cssplay/">CSS Play</a></li>
     ******<li><a href="http://mywebpages.comcast.net/moronicbajebus/rantsandlike/">Rants &amp; Like</a></li>
     ***</ul>
     </div>
    Code:
    #nav{
       ***white-space : nowrap;
       ***background-color : #003399;
       ***float : left;
     ***  color : White;
       ***width : 100%;
       ***border-style : solid;         
       ***border-color : #0066CC;
       ***border-width : 2px 0 2px 0;    
       }    
       #nav    ul{
       ***padding : 0;
       ***margin : 0;
       ***float : right;
     }
     #nav ul li{
       ***display : inline;
     }
     #nav ul li a{
       ***padding-left : 1em;
       ***padding-right : 1em;
       ***background-color : #003399;
       ***color : White;
       ***font-weight : bold;
       ***text-decoration : none;
       ***float : left;
       ***border-right-color : #0066CC;
       ***border-right-style : solid;
       ***border-right-width : 1px;
     }
     #nav ul li a:hover{
       ***background-color : #99CCFF;
       ***color : #000066;
     }
    it only flickers slightly on the page linked to - but if you put that inside of some other divs the redraw problem grows even worse. If i remove the hover a:hover entry in the css the problem goes away...I don't see why changing a background color causes IE to redraw.

  9. #9
    SitePoint Member
    Join Date
    Dec 2003
    Location
    TX, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    scratch this - my bad - it doesn't flicker, it causes it to flicker through RDC (I connect to windows boxes for testing via RDC from my Mac)

    When actually using the computer outside of RDC it does not flicker.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I was just going to say it works ok for me


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
  •