can't even get TWO columns right...

Dev Shed Forums Sponsor:

July 2nd, 2004, 07:02 PM

TheJim01

Coconuts migrate?

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Feb 2004

Location: http://middle.nowhere.com

Posts: 1,895

Folding Points: 70160 Folding Title: Intermediate Folder

Time spent in forums: 2 Weeks 5 Days 11 h 8 m 20 sec
Reputation Power: 1176

can't even get TWO columns right...

Have a little problem with the 3-column layout. I'm converting it down to 2-column, which should be easier. However, in all exampels I've seen, there is no need to assign height, and all of the column divs always stay the same height. I can't seem to duplicate this. Here's what I have:

PHP Code:


		
			
<div id="leftCol">

  <p>crap</p>

  <p>crap</p>

  <p>crap</p>

  <p>crap</p>

  <p>crap</p>

</div>



<div style="width: 200px;">

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

<p>more content</p>

</div>



<div class="clear">&nbsp;</div>

and the relevant CSS:

PHP Code:


		
			
.clear{

  /* clearing element for floats */

  font-size: 0px; /* for weird IE */

  height: 0px;

  width: 0px;

  clear: both;

}



div{

  margin: 0px;

  padding: 0px;

  border: 0px black solid;

}



#leftCol{

  width: 100px;

  border: 5px #000077 solid;

  border-top: 0px #000077 solid;

  margin: 0px;

  padding: 0px;

  float: left;

}



* html #leftcol{ /* Tan Box Hack */

  width: 104px;

  width: 100px;

}

IE likes it (IE likes just about anything), but the "more content" text gets wrapped around the "leftCol" in Firefox. Any suggestions to what I'm missing? Thanks!

__________________

When in doubt, Google it!

> HTML/XHTML/CSS/PHP/MySQL/Javascript/More Tutorials @ w3schools.com <

Proud member of the T.S.N.B.U.F.L (tables should not be used for layout) alliance.

"Only use elements for their intended purpose. You wouldn't try to make coffee with a telephone, would you?" -Me

July 2nd, 2004, 07:27 PM

LaughingBelly

Who set my Title?

Join Date: Jun 2004

Posts: 532

Time spent in forums: 2 Weeks 1 Day 10 h 18 m 35 sec
Reputation Power: 204

It is happening because floated elements are taken out of flow and behave as if the element is not there with the exception that line boxes are moved to the side to stay visible.

You will notice it when you add a border to the second div

Code:

<div style="width: 200px;border:blue solid 3px">

to fix this the easy way, you can float the second div to the left too, or right... depending on how you like the columns to be.

Code:

<div style="width: 200px;float:left;border:blue solid 3px">

July 2nd, 2004, 09:30 PM

TheJim01

Coconuts migrate?

Join Date: Feb 2004

Location: http://middle.nowhere.com

Posts: 1,895

Time spent in forums: 2 Weeks 5 Days 11 h 8 m 20 sec
Reputation Power: 1176

Doh! Duh... I guess I needed that nap more than I thought. I knew that, but needed a fresh set of eyes to see it. Thanks!

July 2nd, 2004, 11:48 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

Here's a version using a float and a static. If the static div exceeds the float in length, no clearing element is needed. That both columns extend the full height is an illusion.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator"
    content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
    <meta name="editor" content="Emacs 21" />
    <meta name="author" content="Gary Turner" />
    <meta http-equiv="content-type"
    content="text/html; charset=ISO-8859-1" />

    <title></title>
<style type="text/css">
/*<![CDATA[*/

body, html {
    margin: 0;
    }

p {
    margin-top: 0;
    }

#container {
    width: 500px;
    margin: 20px auto;
    border: 2px solid black;
    background-color: #fdd;
    }

#narrowcol {
    width: 150px;
    padding: .5em;
    padding-right: 0;
    float: left;
    }

#widecol {
    margin-left: 150px;
    padding: .5em;
    border-left: 1px solid black;
    background-color: #ddf;
    }


/*]]>*/

</style>
  </head>

  <body>
    <div id="container">
      <div id="narrowcol">
        <p>some content</p>

        <p>some content</p>

        <p>some content</p>

        <p>some content</p>

        <p>some content</p>

        <p>some content</p>

        <p>some content</p>
      </div>

      <div id="widecol">
        <p>some content</p>

        <p>some content</p>

        <p>some content</p>

        <p>some content</p>

        <p>some content</p>

        <p>some content</p>

        <p>some content</p>

        <p>some content</p>

        <p>some content</p>
      </div>
    </div>
  </body>
</html>

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

July 3rd, 2004, 12:56 AM

TheJim01

Coconuts migrate?

Join Date: Feb 2004

Location: http://middle.nowhere.com

Posts: 1,895

Time spent in forums: 2 Weeks 5 Days 11 h 8 m 20 sec
Reputation Power: 1176

Ah, I probably should have thought of that too. Fancy-shmansy margin manipulation.

Anyways, good call on both accounts. Thanks guys!

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: