2 Collumn Css Question

[Traffic]

Question: With a two column css layout can you make the right side of the layout stay fixed to regular size even when the browser is being resized? If anyone has the code I would greatly appreciate it. I have a large image on the right side and whenever the browser is resized the image jumps to the bottom of the left column. I would like for the right cloumn to stay the same size at all times (even when the browser window is resized). The right collumn has more important information than does the left column. I have tried to have the left column width at 65% and the right column width at 35%. Unfortunately when the browser is resized the picture in the right column jumps down to the bottom of the left column. I do not mind the text in the left column "shifting" but I can not have any info on the right column shift. Is this even possible? Thanks in advance.

[markbrown4]

Hello,

You just need to give the column a width and add the same margin to the other

<div style="float: right; width: 200px;">
  <p>Right column</p>
</div>
<div style="margin-right: 200px;">
  <p>Left column</p>
</div>

[Traffic]

Hey markbrown4

I just tried that and it didn't do anything. Here is my code:

#leftcontent {
float:left;
width: 65%;
background:#fff;
border-right:2px solid #000;
border-bottom:2px solid #000;
margin-right:15px;
padding-bottom:20px;
}

#rightcontent { }

I Can't seem to get this thing right.

[markbrown4]

Hi,

You said you tried it but I don't see anything I provided in your code..
If you have the two columns in your markup with the floated column first then the following CSS will work.
CSS

#rightcontent { 
  float: right;
  width: 200px;
}
#leftcontent {
  background:#fff;
  border-right:2px solid #000;
  border-bottom:2px solid #000;
  margin-right:200px;
  padding-bottom:20px;
}

HTML

<div id="rightcontent">
  <p>Right column</p>
</div>
<div id="leftcontent">
  <p>Left column</p>
</div>