SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 Collumn Css Question

    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.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    You just need to give the column a width and add the same margin to the other
    Code:
    <div style="float: right; width: 200px;">
      <p>Right column</p>
    </div>
    <div style="margin-right: 200px;">
      <p>Left column</p>
    </div>

  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    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
    Code:
    #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
    Code:
    <div id="rightcontent">
      <p>Right column</p>
    </div>
    <div id="leftcontent">
      <p>Left column</p>
    </div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •