SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Min-height in center of 3-col layout

    Is there anyway to set a min-height in the center of a 3-col layout without clearing the floats? (In IE and safari, the outer left and right col floats get cleared, causing problems)


    Her is the situation for a typical div in the centrecontent of a 3-col layout:
    ________________________________
    |........|........................................|
    | float |......Text here.....................|
    |........|_________________________|
    |........|
    |_____|

    The following <div> gets jammed up under the previous text, obviously the left float causes problems.

    Like I said, solutions that needs to clear the floats clears the outside right and left float. Funny thing though, they work in mozilla. But of course mozilla can just use the min-height setting.

    I even tried to use javascript, but couldn't get that to work either.

    Please help!!!

    -berzerko

    p.s. here is a sample of the code that I am using:
    Code:
    <div class="ref">
    	<div class="btn"><!-- this is the left float -->
    	<a href="http://www.nasa.gov/home/index.html" style="background-image: url(imgs/nasa_66_55.gif); width: 70px; 
    height: 59px;" target="_blank"></a>
    	</div>
    	<div><!-- this is the text -->
    	<p>The National Aeronautics and Space Administration. This Site has great resources for all ages. 
    	From latest scientific discoveries to teaching and learning tools for those just beginning to explore the scientific frontier.</p>
    	<p>In the "Quick Links" you can find direct links to the kid site and games.</p>
    </div>

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

    Have you got a link to the page in question?

    I'm not quite sure wheteher you want to clear all floats or just a float in the same context.

    The problem with floats is that if you add clear to an element it should clear all floats above it in the html. Both mozilla and IE will clear all floats in certain circumstances.

    Sometimes putting the offending content in another float wrapper will stop the clear from affecting other floats. Whether this is by design or just luck is another matter.

    e.g.
    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">
    html,body {height:100%}
    #left {
     width:200px;
     height:100%;
     background:#ffffcc;
     float:left;
    }
    #centre {
     margin-left:205px;
    } 
    #innerfloat {
    width:200px;
    height:200px;
    background:red;
    float:right;
    }
    .clear {clear: both} 
    #innercentre {float:right;width:99%}
    </style>
    </head>
    <body>
    <div id="left">Left stuff</div>
    <div id="centre">
    <div id="innercentre">
    <p>Centre stuff : </p>
    <div id="innerfloat">Float to be cleared</div>
    <div class="clear"></div>
    <p>Centre stuff : </p>
    </div>
    </div>
    </body>
    </html>
    In the above the content has been put in another float and the cleared element now sits under themiddle float and not under the left float.

    Take out the #innercentre div and you will see that the cleared element then clears all floats.

    Hope this helps.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After beating myself up this weekend, I have taken the cowards way out. It currently works in Moz, Safari. IEmac, but blows up in IE6. I am going to try to validate the code and see if that helps. See the code below:
    Code:
    <div class="ref">
    <table><tr><td>
    	<div class="btn">
    	<a href="http://www.wikipedia.org/" style="background-image: url(imgs/wiki_110_135.gif); width: 110px; 
    	height: 135px;" target="_blank"></a>
    	</div>
    	<p>Wikipedia is a multilingual project to create a complete 
    	and accurate open content encyclopedia. We started 
    	in January 2001 and are currently working on 144609 
    	articles in the English version... Excellent!.</p>
    	<p>This is a Favorite!</p>
    </td></tr></table>
    </div>
    <div class="spc"><center><img src="imgs/spacerbar.gif" alt="" /></center></div>
    I am still interested in a CSS, ( even a Javascript,) solution. The link to my page is as follows:http://educatewithpurpose.com/refer.php

    Although I would like to know how to do it in CSS. I do have one question, assuming I can get it to work by using tables, Is that bad coding?

    -berzerko

    I Just validated it, it validates, but looks like... really bad in IE6. The left margin is missing and the right margin is blown off to the side.



    Fixed the problem in IE6. It was a stupid. While trying to get the problem described above fixed, I had commented out the "height" in #outer. The funny thing is that it didn't show up until I added the tables into the .ref div's. Well... whatever.
    Last edited by berzerko; Apr 19, 2004 at 14:12.

  4. #4
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just in case anybody is ever interested, here is the code that I used to do the job. Note that it uses a table inside the outer <div> to control the float.
    Code:
    <div class="ref">
    <table><tr><td>
    	<div class="btn">
    	<a href="http://www.wikipedia.org/" style="background-image: url(imgs/wiki_110_135.gif); width: 110px; 
    	height: 135px;" target="_blank"></a>
    	</div>
    	<p>Wikipedia is a multilingual project to create a complete 
    	and accurate open content encyclopedia. We started 
    	in January 2001 and are currently working on 144609 
    	articles in the English version... Excellent!.</p>
    	<p>This is a Favorite!</p>
    </td></tr></table>
    </div>
    -b


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
  •