Getting a two column layout to work in CSS?

Comments

• nissan288

  February 2014

  Some updates:
  
  Tried to remove position and forcing the two pieces (content and header) only causes one to shift on top of the other. No luck in getting them to line up next to each other.
• Primrose

  February 2014

  Hmm, not exactly an aficionado in CSS myself, but try this:

  .passage {
position: static;
float: right;
}

  Now I don't have access to Twine right now to test it, but something like that has worked before for me, so it can't hurt to try.
  
  When I get back home at the end of the weekend, I'll try and help some more.
• nissan288

  February 2014

  No go I'm afraid.
  
  Boxes now act like the attached image below.
• narF

  February 2014

  I just did a 2 columns passage in my latest story. Show me you CSS and I'll see what the error is.
• narF

  February 2014

  Basically, the idea is to do this:

  #sectionLeft {
width: 49%;
float: left;
}

#sectionRight {
width: 49%;
float: right;
}
• greyelf

  February 2014

  Assuming your using the SugarCane story format then the following is one way to do what you want:
  
  1.  Add image to story via the Twine GUI.
  
  2. Add the image to a Passage, make sure it appears before any other text.

  
[img[example_small]]

This text will appear on the LEFT side of the passage area.


  3. Add a "stylesheet" type passage to your story and entry the following rule.

  
.passage img {
float:right;
}

  I hope this helps
  
  NOTE: This solution wraps the text around the image.
  
  EDIT: I had problems creating a non-image wrap version due to the passage's in-built css containing "white-space: pre-wrap;" which complicates the issue. If anyone know how to get around this I would be interested in knowing how.
• nissan288

  February 2014

  No go.
  
  As I wrote earlier, I am using a template I found on Glorious Trainwrecks called "The Earth's Story Illustrated".
  
  It is available on this page. http://www.glorioustrainwrecks.com/node/5163
  
  My code looks like the following, and it comes out as the previously posted screenshot:
  
  #sidebar {
    display:none;
  }
  body {
    margin: 0;
    padding: 0;
    height:100%;
  }
  #passages {
    margin:0;
    padding: 0;
    height:100%;
  }
  .passage[data-tags~=niceapartmentgf] .header {
    background-image: url(images/niceapartmentgf.jpg);
  }
  
  #passages * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .passage {
    position:right;
    width: 50%;
    font-size:2em;
    font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;
    margin: 2em auto 0 auto;
  }
  .passage .header {
    width:480px;
    height:480px;
    min-height: 480px;
    width: 50%;
    border: #fff double 0.5em;
    border-radius: 1em;
    margin: 0 auto 1.5em auto;
    padding: 0;
    background-repeat: no-repeat;
    float: left;
  }
  .passage .content {
    width:480px;
    height:480px;
    min-height: 480px;
    border: #fff double 0.5em;
    border-radius: 1em;
    padding: 1em;
    float: right;
  }
  a.internalLink, a.externalLink {
    border-bottom: solid #fff 1px;
    color:#eee;
    font-weight:normal;
  }
  a.internalLink:hover, a.externalLink:hover {
    text-decoration:none;
    border-bottom: none;
    color:#000;
    background-color:#fff;
    font-weight:normal;
    padding-left: 0;
  }
  a.internalLink:active, a.externalLink:active {
    border-bottom: 0;
  }
  @media screen and (max-width: 960px) {
    .passage {
      font-size: 1.5em;
    width: 50%;
    }
  }
  @media screen and (max-width: 640px) {
    .passage {
      font-size: 1.25em;
    width: 50%;
    }
  }
• greyelf

  February 2014

  Remove the "width: 50%" from the ".passage" class rule.
  
  Leave it in the ".passage .header" and ".passage .content" class rules
• nissan288

  February 2014

  Woo! It worked! Thanks a million! Code is below.
  
  Last request: could I center this somehow?
  
  #sidebar {
    display:none;
  }
  body {
    margin: 0;
    padding: 0;
    height:100%;
  }
  #passages {
    margin:0;
    padding: 0;
    height:100%;
  }
  .passage[data-tags~=nice] .header {
    background-image: url(images/nice.jpg);
  }
  
  #passages * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .passage {
    position:right;
    font-size:1.25em;
    font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;
    margin: 2em auto 0 auto;
  }
  .passage .header {
    width:855px;
    min-width:640px; 
    height:720px;
    min-height: 720px;
    border: #fff double 0.5em;
    border-radius: 1em;
    margin: 0 auto 1.5em auto;
    padding: 0;
    background-repeat: no-repeat;
    float: left;
  }
  .passage .content {
    width:425px;
    height:720px;
    min-height: 720px;
    border: #fff double 0.5em;
    border-radius: 1em;
    padding: 1em;
    float: left;
  }
  a.internalLink, a.externalLink {
    border-bottom: solid #fff 1px;
    color:#eee;
    font-weight:normal;
  }
  a.internalLink:hover, a.externalLink:hover {
    text-decoration:none;
    border-bottom: none;
    color:#000;
    background-color:#fff;
    font-weight:normal;
    padding-left: 0;
  }
  a.internalLink:active, a.externalLink:active {
    border-bottom: 0;
  }
  @media screen and (max-width: 640px) {
    .passage {
      font-size: 1.5em;
    width: 50%;
    }
  }
  @media screen and (max-width: 640px) {
    .passage {
      font-size: 1.25em;
    width: 50%;
    }
  }
• greyelf

  February 2014

  Not off the top of my head, using "float" in both the header and content classes makes it hard.
  
  One thing to watch out for is you have made the combined widths of the header and content equal exactly 1280.
  
  I have found in the past that different brands of browser sometimes calculate overall widths (including margin / padding / borders) differently, which can end up with a value with a decimal point (indicating a sub-pixel) and this value sometimes gets rounded up to 1281.
  This same issue can occur when using percentage widths that sum to exactly 100%
  
  I generally aim for 99% or say 1279 to allow for such calculation errors.
• nissan288

  February 2014

  greyelf wrote:

  
  Not off the top of my head, using "float" in both the header and content classes makes it hard.
  
  One thing to watch out for is you have made the combined widths of the header and content equal exactly 1280.
  
  I have found in the past that different brands of browser sometimes calculate overall widths (including margin / padding / borders) differently, which can end up with a value with a decimal point (indicating a sub-pixel) and this value sometimes gets rounded up to 1281.
  This same issue can occur when using percentage widths that sum to exactly 100%
  
  I generally aim for 99% or say 1279 to allow for such calculation errors.
  

  
  
  I'll remember that. I know it's starting to popup in some of the images I've been resizing. Thanks for all of your help!
• Bluntie

  February 2014

  This looks very promising! Been searching high and low for something like it myself, since I know absolutely nothing about CSS. This is by far the nicest one I've seen so far.
  
  Think I might try to reverse engineer it into what I need - who knows, I might actually learn something. Shall follow your progress here with great interest.
  
  And yes, getting it centered on the screen would be lovely indeed.
• Dazakiwi38

  March 2014

  nissan288 wrote:

  
  Woo! It worked! Thanks a million! Code is below.
  
  Last request: could I center this somehow?

  
#sidebar {
display:none;
}
body {
margin: 0;
padding: 0;
height:100%;
}
#passages {
margin:0;
padding: 0;
height:100%;
}
.passage[data-tags~=nice] .header {
background-image: url(images/nice.jpg);
}

#passages * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.passage {
position:right;
font-size:1.25em;
font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;
margin: 2em auto 0 auto;
}
.passage .header {
width:855px;
min-width:640px;
height:720px;
min-height: 720px;
border: #fff double 0.5em;
border-radius: 1em;
margin: 0 auto 1.5em auto;
padding: 0;
background-repeat: no-repeat;
float: left;
}
.passage .content {
width:425px;
height:720px;
min-height: 720px;
border: #fff double 0.5em;
border-radius: 1em;
padding: 1em;
float: left;
}
a.internalLink, a.externalLink {
border-bottom: solid #fff 1px;
color:#eee;
font-weight:normal;
}
a.internalLink:hover, a.externalLink:hover {
text-decoration:none;
border-bottom: none;
color:#000;
background-color:#fff;
font-weight:normal;
padding-left: 0;
}
a.internalLink:active, a.externalLink:active {
border-bottom: 0;
}
@media screen and (max-width: 640px) {
.passage {
font-size: 1.5em;
width: 50%;
}
}
@media screen and (max-width: 640px) {
.passage {
font-size: 1.25em;
width: 50%;
}
}

  
  
  Does anyone know with this stylesheet how I can have the main passages display in the left column and only certain passages display in the right? (such as stats, images etc). With those additions this would make a good custom basic template for people who want to make a rpg game.
  
  I had a play around with xax's multipane window script but i got confused with it after trying to add it into my project, not to mention the panes seemed to start half way down the page.  The stylesheet above is pretty close to what I am looking for and it would be neat if there was a little script to go with it so you could use say, add tags to certain passages to be displayed in the secondary column to the right or something. Currently this stylesheet has the main passage text on the right column.
  
  And in the past I have also tinkered around with Sharpes style sheet with the story region that sort of met my needs but this one looks closer to what ive been looking for.
  
  
   
• PatientRock

  August 2014

  Dazakiwi38 wrote:

  
  Does anyone know with this stylesheet how I can have the main passages display in the left column and only certain passages display in the right? (such as stats, images etc). With those additions this would make a good custom basic template for people who want to make a rpg game.

  
  
  Anyone ever do something like this?