Hi

My website contains several pages. All of them have three columns.
But in Opera, the 3rd column in some of the pages has moved to the
left hand of the page.

The address http://www.bomloveven.com/hordaland.html is one
example. The third column content is local news from Norway.
The code - made in Javascript - is copied from NRK
(norwegian broadcasting).

Below I have included the html and css code I consider as neccessary:

Html code - third column
<div id=“hogre”>

  (Javascript here)

</div>

#hogre {
  width: 11em;
  background-color: #FFE4C4;
  margin:0em;
  padding-top:1em;
  padding-left:1em;
  padding-bottom: 1em;
}

I also do include some extra css code that may have consequences.
It may not be neccessary, I don’t know.

body {
  text-align: center;
  background-color: White;
  width: 800px;
  PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  PADDING-BOTTOM: 0px;
  MARGIN: auto;
  PADDING-TOP: 0px;
}

#boks {
  text-align: center;
  background-color: #FFE4C4;
  width: 770px;
  overflow: auto;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 0.1em;
  padding-top: 0.1em;
  text-align: center;
}

I have found that if I delete “width” in “hogre”  (third column)
, and substitute Javascript with let’s say the word “Test”, then
“Test” appears where the news was intended to appear.

Is there someone who have a solution?

Hello Liverpool,
Since no one seems willing to respond to your post, I’ll take a stab at it.

Your problem may be stemming from your mixed measurements.  Your main container div “container” has a width of 770px (a fixed width), and your inner container “boks” also has a fixed width of 770px.  Your three panels/panes “venstre”, “midten” and “hogre” have fluid widths defined in ems (10em, 20em and 11em respectively).

Since you have not attempted to normalize the fonts in the “body” element, I suspect some of these differences may be due to font size differences between browsers… although Opera default font size is typically slightly smaller than IE or Firefox. And it may also be due to differences in the “box model” between browsers as well.

If you insist on a fixed width layout for your “container” div, might I suggest using % as fluid width measurements for your “venstre”, “midten” and “hogre” divs? and perhaps set your width on “boks” to 100%.  I do not know if this will fix the issue but may be worth a try if you have not already done this in your troubleshooting.

Cheers!