Home/ Questions/Q 8592525
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:46:14+00:00

I’ve searched for several hours and tried out everything I found, but nothing helped,

  • 0

I’ve searched for several hours and tried out everything I found, but nothing helped, so here goes. I’m trying to set up a website that has a left column and right column both of width 200 pixels, while having the middle column taking up the remaining space. I noticed that margin-right is completely ignored. I tested out overflow, but that didn’t seem to work either. Granted, I might have done the overflow bit wrong. Anyways, here’s my test site, relevant CSS, and the HTML.

The current background for the middle column just doesn’t do well with scaling, so I’ll probably swap it for something else.

Site: http://mnslayer27.webs.com/bgtest.html

HTML:
<!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>Mnslayer27</title>
    <link rel="stylesheet" type="text/css" href="Mnslayer27.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
</head>
<body>

  <iframe src="Main_Links.html" id="ml" frameborder="0" width="100%" height="1808"></iframe>

<div id="left">
  <div id="right">
    <div id="column2">
      <div class="transbox"></div>
      <div class="transtext">
        <h1>Text~</h1><br />
      </div>
       sdtfghujikjuhygtfrdsfghjklhkgjhfdsdfghkn
    </div>
  </div>
</div>

<div id="column3">
  <h3>Pictures</h3>
  <div id="pics">
    <img src="http://i195.photobucket.com/albums/z255/yukina17/letter%20r/rave%20master/Elie.jpg" border="0" width="100%" alt="Elie" title="Elie"></img><br /><br /><br />
    <img src="http://mnslayer27.webs.com/Sasuke%20Eternal%20Mangekyou.gif" border="0" width="100%" alt="Sasuke's Eternal Mangekyou Sharingan" title="Sasuke's Eternal Mangekyou Sharingan"></img>
    <center><img src="http://mnslayer27.webs.com/Torch.gif" border="0" width="50%" alt="Torch" title="Torch"></img></center><br /><br />
  </div>
</div>

CSS:
#left {
  //overflow:hidden;
  margin-left: 200px;
}

#right {
  margin-right:200px;
}

div.transbox  {
   width:100%;
  //width:auto;
  height:180px;
  margin:0px 0px;
  background-color:#ffffff;
  border:none;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}

#column2 {
        position: absolute;
        top: 120px;
        //left: 200px;
        overflow:hidden;
    color: #000000;
    float:left;
    width: 100%;
        height: 1688px;
        //margin-left: 200px;
        //margin-right: 200px;
        border: none;
        background-image: url("http://i246.photobucket.com/albums/gg106/mnslayer27/Ren-Winamp2.jpg");
    background-repeat: repeat-y;
    background-attachment: scroll;
    background-position: 0% 0%;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can try using absolute position and specify the left and right for the divs instead of using width. 

    #left {
    position: absolute;
    left: 0px;
    width: 100px;  
    height: 100%;
    background-color: #d0c0c0;
}

#right
{
    position: absolute;
    right: 0px;            
    width: 100px;
    height: 100%;
    background-color: #d0c0c0;
}

#centre
{
    position: absolute;
    left: 100px;
    right: 100px;
    height: 100%;
    overflow:hidden;
    background-color: #a0a0d0;

    border: solid 2px black;
    margin: 4px;
    padding: 4px;
}

    This also has the advantage that any added margin,border or padding do not extend the divs making the whole become wider than the 100% of the page.

    Heres a simple JSFiddle

    hope that helps

    • 0