SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Grrr.. floats are ticking me off!

    Ok, this is an odd one..

    Start simple.

    I need two columns.. the left column, I KNOW i need it to be 85px wide.
    The right column, i just need it to fill whatever space is leftover

    Lemme give you a link to look at.

    Here's sample A, 2 columns, thats all.
    http://www.ttechnologyinc.com/_nortel-phone-systems.asp

    Ok, simple enough..
    I started out defining a left and right float, the left being 85PX and the right being 400px (or something like that), it worked fine.

    I started to go to the next page I wanted to apply this to, and realized that I had a problem. I already had 2 columns.. a table to the left and a div to the right..

    Here's the untouched version of THAT page
    http://www.ttechnologyinc.com/norstar.asp

    Reall fast I found out that my defining of the widths in example a was not going to work.. as if the right column of my category list was set to 400px, it won't gel with the setup on example b, there is not 400px worth of room in the center.

    So I tried setting my floats to %'s and either the stack on top of each other or they are too far apart.

    Code:
    .catcontain {width:95%;}
    .catleft {float:left; width:19%; }
    .catright {float:right; width:78%; padding: 5px 5px 10px 5px;}
    .catalt {background-color:#f2f4f6;}
    .catdivider{clear:both; background-image:url(/images-ret14/300c_line.gif); background-repeat:repeat-x;}
    19% and 78% will place the two columns next to each other.. but.. sometimes they stack.. obviusly in example B, 19% is going to be less the it would be in example a

    I know the floats have to have a width.

    When I float two columns, do i NEED both to be in a div tag..

    as in

    <div class="floatleft"></div>
    <div class="floatright"></div>

    or should it be
    <div class="floatright"></div> left content ?

    or

    left content <div class="floatright"></div>

    or what.. im confused...

    How do i make that right side of the two columns fluid, while the left stays at 85px or whatever.. grrrr

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

    How do i make that right side of the two columns fluid, while the left stays at 85px or whatever.. grrrr
    If you want a float at 85px and the content alongside to be fluid you just need to set a margin on the content to clear the float and it will fill the available space.

    If you really want 2 floats then you do the same as above but then nest a float inside the content sextion and you can make the float 100% width because it will be 100% of that section (which has a margin to clear the float).

    Here are 2 examples showing both techniques.

    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">
    #outer{
     width:500px;
     background:#ffffcc;
     margin-bottom:25px;
    }
    #left{
     float:left;
     width:85px;
     background:pink;
    }
    #right{ margin-left:85px;}
    .clearer {
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    /* second example below .........*/
    #outer2{
     width:600px;
     background:#fffccc;
    }
    #left2{
     float:left;
     width:85px;
     background:pink;
    }
    #right2{margin-left:85px;}
    #right2-inner{
     width:100%;
     float:right;
     background:yellow;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="left"> 
    	<p>This is the left content : This is the left content : This is the left 
    	  content : This is the left content : This is the left content : This is 
    	  the left content : This is the left content : This is the left content : 
    	  This is the left content : This is the left content : This is the left content 
    	  : </p>
      </div>
      <div id="right"> 
    	<p>This is the right content : This is the right content : This is the right 
    	  content : This is the right content : This is the right content : This is 
    	  the right content : This is the right content : This is the right content 
    	  : This is the right content : This is the right content : This is the right 
    	  content : This is the right content : This is the right content : This is 
    	  the right content : This is the right content : This is the right content 
    	  : This is the right content : This is the right content : This is the right 
    	  content : </p>
      </div>
      <div class="clearer"></div>
    </div>
    <div id="outer2"> 
      <div id="left2"> 
    	<p>This is the left content : This is the left content : This is the left 
    	  content : This is the left content : This is the left content : This is 
    	  the left content : This is the left content : This is the left content : 
    	  This is the left content : This is the left content : This is the left content 
    	  : </p>
      </div>
      <div id="right2"> 
    	<div id="right2-inner"> 
    	  <p>This is the right content : This is the right content : This is the right 
    		content : This is the right content : This is the right content : This 
    		is the right content : This is the right content : This is the right content 
    		: This is the right content : This is the right content : This is the 
    		right content : This is the right content : This is the right content 
    		: This is the right content : This is the right content : This is the 
    		right content : This is the right content : This is the right content 
    		: This is the right content : </p>
    	</div>
      </div>
      <div class="clearer"></div>
    </div>
    </body>
    </html>
    Hope that helps.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I just figured it out..

    Check it out..

    Code:
    .catcontain2 {width:100%;}
    .catleft2 {float:left; width:85px;}
    .catright2 {margin-left: 87px;padding: 5px 5px 10px 5px;}
    .catalt2 {background-color:#f2f4f6;}
    .catdivider2{clear:both; background-image:url(/images-ret14/300c_line.gif); background-repeat:repeat-x;}

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

    Your catdivider2 will need some height for the background to show and in order to clear properly.

    My second example may actually be better for you in the long run as it will avoid ie's 3 pixel jog. However it may not notice depending on what your design looks like in the end.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks DOOD!

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks DOOD!


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
  •