Page 1 of 1

CSS problem - cross browser issue???

Posted: Fri Sep 08, 2006 3:33 pm
by alex.barylski

Code: Select all

<?xml-stylesheet href="#internalStyle" type="text/css"?>

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
      <style type="text/css" id="internalStyle">
      body {
        margin: 0px;
        padding: 0px;
      }

      #container {
        width: 100%;
        height: 100%;  /* Resized using javascript? */

        background-color: red;
      }

      #panel {
        width: 100%;
        height: 100%;

        margin-right: 10px;

        background-color: green;
      }
    </style>

  </head>
  <body>
    <div id="container">
      <div id="panel">
        Content
      </div>
    </div>
  </body>
</html>
I was trying to simulate 2 TABLE TD columns, but having the 2 divs side by side is impossible I assume, because the first DIV width is 100% which pushes the next DIV which I try to float to it's right is pushed down one

So...

I changed approach:

I embed one DIV inside the other, setting the container DIV width to 100% as well as the embeded DIV, but I also set the embeded DIV margin-right to 10px hoping I could emulate TD using this approach...

Works in IE but not Opera or FF???

WTF...is that ever annoying :P

Anyone have any suggestions???

Posted: Fri Sep 08, 2006 3:52 pm
by matthijs

Code: Select all

#panel { width:50%;}
Or I don't understand your problem.

Posted: Fri Sep 08, 2006 3:58 pm
by alex.barylski

Code: Select all

#container {
  width: 100%;
  height: 100%;

  padding-right: 10px;

  background-color: red;
}

#panel {
  width: 100%;
  height: 100%;

  background-color: green;
}

Code: Select all

<div id="container">
  <div id="panel">
    Content
  </div>
</div>
I want the child DIV to be 100% of it's parent width *BUT* I also need it to display 10 pixels of it's parent ONLY on the right hand side???

The above code works, but ONLY in IE... :(

Posted: Fri Sep 08, 2006 4:17 pm
by matthijs
100% + 10px is not possible. But why don't you just leave out the width100% of the container? A div will always take up tha max amount of horizontal space. So if you'd do:

Code: Select all

#container {
  height: 100%;
  padding-right: 10px;
  background-color: red;
} 
#panel {
  height: 100%;
  background-color: green;
}

Posted: Fri Sep 08, 2006 4:22 pm
by alex.barylski
matthijs wrote:100% + 10px is not possible. But why don't you just leave out the width100% of the container? A div will always take up tha max amount of horizontal space. So if you'd do:

Code: Select all

#container {
  height: 100%;
  padding-right: 10px;
  background-color: red;
} 
#panel {
  height: 100%;
  background-color: green;
}
:P

Slammin' that was it :)

Your rock brother...thanks :)

Posted: Fri Sep 08, 2006 4:27 pm
by matthijs
Glad to be of help :)