Why is this html/css/rails template not nesting properly?

Question

I have created a page of text and nested it within a container div. All was fine until I added a couple of divs labelled 'left-column and 'right-column'. Now the text is no-longer nested inside the container div as I expected, but is instead displayed at the bottom, below what should be the containing div.

I tried changing the divs to spans but the same thing keeps happening. I looked over the code and from everything I can tell these sections should be nested, but they are not.

The code:

index.html.erb

<div class="container">
  <h1>Fanfic/Poetry</h1>
  <h2>Fanfic and poetry about or related to Alisa Esage Shevchenko</h2>
  <h3>Whichever contact details you're using for us and whatever email you're sending to PLEASE be respectful! Some sexual content sure, we're all human beings and publication will be considered on a case by case basis, but nothing sick or gross! Or particularly, nothing harmful. We won't put it up so there's no point sending it. So far out of the works I've had sent in the general quality and level of dialogue is <em>not at all</em> close to expectations -- only two came anywhere near the mark in terms of tone and quality, and one needed extensive cleaning and editing. So <em>up</em> the standard! THANK YOU!</h3>

  <span class="left-column">

    <h2>Poetry</h2>

    <h4><strong>Alisa Shevchenko Hacked My Computer</strong> by <em>AnonHacker3</em></h4>
      <p>Last night I hacked your computer.<br>
       Well, when I said "I" I actually mean you,<br>
       but I'm pretending the other way around<br>
       because it confuses the security protocols.<br></p>
      <p>At first you were writing a function in C++<br>
       I think, and it was actually pretty fun<br>
       to see someone so obviously naive<br>
       still thinking like they're going to be<br></p>
      <p>some sort of secret agent or something<br>
       on the cover of the Guardian,<br>
       or Forbes magazine. But anyway,<br>
       I'm pretty sure you shouldn't have<br></p>
      <p>registered alisaesage.com<br>
       as a domain name if you weren't willing<br>
       to take a little heat from a girl<br>
       hopping onto your Ubuntu core<br></p>
      <p>via a little known, though much publicised<br> 
       single kernel function hook,<br>
       and leaving you a message, coz you were<br>
       for some fucking ridiculous reason<br></p>
      <p>CODING THE THING IN FUCKING<br>
       RUBY ON RAILS VERSION 4!<br>
       Like what the actual fuck, so I wrote<br>
       "nuhuh" on your command line<br></p>
      <p>and pretty much left you to it.</p>

      <h4><strong>I Bet Alisa Shevchenko's Mouth Tastes Nice</strong> by <em>A Pirate Giraffe</em></h4>

      <p>I was watching Blade Runner last night,<br>
       As well as Ghost in the Shell,<br>
       Which totally made me think of hot spies<br>
       With robot bodies hacking computers.<br>
       So I thought about touching Alisa Shevchenko<br></p>

      <p>In her *mouth*, with my fingers,<br>
       And how it feels<br>
       Inside her body<br>
       As she moves about just<br>
       As slowly as she wants to<br>
       Over my fingers, how she'll taste...<br>
       When I put my fingers in my own mouth after.<br></p>

       <h4><strong>Timelines</strong> by <em>Gray Lizard 564</em></h4>

       <p>The thought of you laying<br>
       your body bridged just a little<br>
       toward the small of your back<br>
       at the quivering soft tip of your breast<br>
       the question: is this mine<br>
       to touch, by this point<br>
       has been answered<br></p>

       <p>in the positive future timeline<br>
       where I am lain just above<br>
       the feel of my tongue lingering<br>
       at this, the point of most possibility.<br></p> 

   </span>

   <span class="right-column">

    <h2>Fanfic</h2>

    <h4><strong>The Curious Case of Alisa Shevchenko</strong>: Sherlock Holmes and AeS crossover by <em>andcarpenoctem</em></h4>

    <p>"I have never made a secret of my distaste for forks" said Sherlock, with    a complex sort of smile.</p>

    <p>"What in the hells are you talking about Holmes?" said Watson, in an uncouth way.</p>

    <p>"I'm talking about forks, Watson," Sherlock lied, "and the quote is from Hemingway. Though ghost-written, I believe."</p>

    <p>"Oh," said Watson. "Then I suppose it's probably a good quote."</p>

    <p>"Oh certainly," said Holmes. "A very good quote indeed. One of the finest in the English language."</p>

    <p>Holmes tapped out the contents of his pipe into his hand and then poured the ash into Watson's upward facing palm. Watson looked at him, aghast. Holmes continued,</p>

    <p>"You mean Alisa Esage" Watson said with a look of a proud dog who's just finished pooing. Holmes ignored the smell.</p>

    <p>"Now, if you'll excuse me I really need to talk about Alisa Shevchenko."</p>

    <p>"The Russian spy?"</p>

    <p>Sherlock gave Watson a look of loving disdain.</p>

    <p>"Yes yes, whatever you say Watson. The problem is I'm not entirely sure if the person who runs her Twitter account really is her anymore. And we need to find out where she is."</p>

     <p>"I see." replied Watson. "How will we do that? I suppose I could put out a trace on her IP address and maybe set her webcam to switch on remotely..."</p>

    <p>"Oh, no Watson." Said Holmes. "That won't work at all. We'll need to start with her grammar."</p>

    <p>"Or," continued Watson, deep in thought, "we could go onto her Instagram and cross-reference any new pictures with one of those location triangulators they have at the MET. The ones that use the image information to figure out weather, air pressure, things like that."</p>

    <p>"Nope. Because I got most of London banned from her Instragram."</p>

    <p>"How did you manage that, Holmes?"</p>

    <p>"Quite simple really, I tried to install her as head of Шалтай Болтай."</p>

    <p>"Humpty Dumpty?" said Watson, instinctively translating the Russia outloud.</p>

    <p>Holmes paused a little while to let the information sink in.</p>

    <p>"Yes, quite."</p>

    <p>"Pardon?"</p>

    <p>"I have a flight booked to Twitter HQ and we have to be there in and hour, so you're coming with me."</p> 

    <p>"Shaltai Boltai, are you certain?"</p>

    <p>"Yes."</p>

    <p>"Then I suppose I am. Coming with you, I mean. Yes, I suppose I am."</p>

  </span>
</div>

default.css

.container {
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  border: 10px solid black;
  background-color: #CB0E0E;
}
a {
  color: lightgrey;
}
p {
  font-family: Arial;
}
.left-column {
  float: left;
  width: 45%;
}
.right-column {
  float: right;
  width: 45%;
}

I know this isn't very MCV but since I can't locate the source of the issue at present, I've just included everything that seems like it might be relevant. Again, I would like all text to be nested within the .container div if poss. Probably something simple I'm looking straight past? Thanks :).

Answer 1

There are much better "clearfix" solutions to the problem that floating elements do not affect the height of the parent element.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  border: 1px gray dotted;
}

.left, .right {
  width: 49%;
} 

.left {
  background-color: red;
  height: 200px;
  float: left;
}

.right {
  background-color: blue;
  height: 150px;
  float: right;
}

<div class="container clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

This pure CSS solution uses a psuedo element to force a new rendering context - this makes the element adjust its height after the children. Littering your markup with a bunch of empty <div> tags has been obsolete for many years.

Answer 2

From looking like your code, it looks like this is a css-floating issue and not directly related to rails. With your left and right float within the unfloated container div, you have issues with positioning. The quickest solution is to include a clear:both inside the container div.

Here's an example of how I would format the html to fix the problem.

<style>
div.container {
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  border: 10px solid black;
  background-color: #CB0E0E;
}
a {
  color: lightgrey;
}
p {
  font-family: Arial;
}
div.left-column {
  float: left;
  width: 45%;
}
div.right-column {
  float: right;
  width: 45%;
}
div.position_fix {
  clear:both;
}
</style>

<div class="container">
  <h1>Fanfic/Poetry</h1>
  <h2>Fanfic and poetry about or related to Alisa Esage Shevchenko</h2>
  <h3>Whichever contact details you're using for us and whatever email you're sending to PLEASE be respectful! Some sexual content sure, we're all human beings and publication will be considered on a case by case basis, but nothing sick or gross! Or particularly, nothing harmful. We won't put it up so there's no point sending it. So far out of the works I've had sent in the general quality and level of dialogue is <em>not at all</em> close to expectations -- only two came anywhere near the mark in terms of tone and quality, and one needed extensive cleaning and editing. So <em>up</em> the standard! THANK YOU!</h3>

  <div class="left-column">

    <h2>Poetry</h2>

    <h4><strong>Alisa Shevchenko Hacked My Computer</strong> by <em>AnonHacker3</em></h4>
      <p>Last night I hacked your computer.<br>
       Well, when I said "I" I actually mean you,<br>
       but I'm pretending the other way around<br>
       because it confuses the security protocols.<br></p>
      <p>At first you were writing a function in C++<br>
       I think, and it was actually pretty fun<br>
       to see someone so obviously naive<br>
       still thinking like they're going to be<br></p>
      <p>some sort of secret agent or something<br>
       on the cover of the Guardian,<br>
       or Forbes magazine. But anyway,<br>
       I'm pretty sure you shouldn't have<br></p>
      <p>registered alisaesage.com<br>
       as a domain name if you weren't willing<br>
       to take a little heat from a girl<br>
       hopping onto your Ubuntu core<br></p>
      <p>via a little known, though much publicised<br> 
       single kernel function hook,<br>
       and leaving you a message, coz you were<br>
       for some fucking ridiculous reason<br></p>
      <p>CODING THE THING IN FUCKING<br>
       RUBY ON RAILS VERSION 4!<br>
       Like what the actual fuck, so I wrote<br>
       "nuhuh" on your command line<br></p>
      <p>and pretty much left you to it.</p>

      <h4><strong>I Bet Alisa Shevchenko's Mouth Tastes Nice</strong> by <em>A Pirate Giraffe</em></h4>

      <p>I was watching Blade Runner last night,<br>
       As well as Ghost in the Shell,<br>
       Which totally made me think of hot spies<br>
       With robot bodies hacking computers.<br>
       So I thought about touching Alisa Shevchenko<br></p>

      <p>In her *mouth*, with my fingers,<br>
       And how it feels<br>
       Inside her body<br>
       As she moves about just<br>
       As slowly as she wants to<br>
       Over my fingers, how she'll taste...<br>
       When I put my fingers in my own mouth after.<br></p>

       <h4><strong>Timelines</strong> by <em>Gray Lizard 564</em></h4>

       <p>The thought of you laying<br>
       your body bridged just a little<br>
       toward the small of your back<br>
       at the quivering soft tip of your breast<br>
       the question: is this mine<br>
       to touch, by this point<br>
       has been answered<br></p>

       <p>in the positive future timeline<br>
       where I am lain just above<br>
       the feel of my tongue lingering<br>
       at this, the point of most possibility.<br></p> 

   </div>

   <div class="right-column">

    <h2>Fanfic</h2>

    <h4><strong>The Curious Case of Alisa Shevchenko</strong>: Sherlock Holmes and AeS crossover by <em>andcarpenoctem</em></h4>

    <p>"I have never made a secret of my distaste for forks" said Sherlock, with    a complex sort of smile.</p>

    <p>"What in the hells are you talking about Holmes?" said Watson, in an uncouth way.</p>

    <p>"I'm talking about forks, Watson," Sherlock lied, "and the quote is from Hemingway. Though ghost-written, I believe."</p>

    <p>"Oh," said Watson. "Then I suppose it's probably a good quote."</p>

    <p>"Oh certainly," said Holmes. "A very good quote indeed. One of the finest in the English language."</p>

    <p>Holmes tapped out the contents of his pipe into his hand and then poured the ash into Watson's upward facing palm. Watson looked at him, aghast. Holmes continued,</p>

    <p>"You mean Alisa Esage" Watson said with a look of a proud dog who's just finished pooing. Holmes ignored the smell.</p>

    <p>"Now, if you'll excuse me I really need to talk about Alisa Shevchenko."</p>

    <p>"The Russian spy?"</p>

    <p>Sherlock gave Watson a look of loving disdain.</p>

    <p>"Yes yes, whatever you say Watson. The problem is I'm not entirely sure if the person who runs her Twitter account really is her anymore. And we need to find out where she is."</p>

     <p>"I see." replied Watson. "How will we do that? I suppose I could put out a trace on her IP address and maybe set her webcam to switch on remotely..."</p>

    <p>"Oh, no Watson." Said Holmes. "That won't work at all. We'll need to start with her grammar."</p>

    <p>"Or," continued Watson, deep in thought, "we could go onto her Instagram and cross-reference any new pictures with one of those location triangulators they have at the MET. The ones that use the image information to figure out weather, air pressure, things like that."</p>

    <p>"Nope. Because I got most of London banned from her Instragram."</p>

    <p>"How did you manage that, Holmes?"</p>

    <p>"Quite simple really, I tried to install her as head of ?????? ??????."</p>

    <p>"Humpty Dumpty?" said Watson, instinctively translating the Russia outloud.</p>

    <p>Holmes paused a little while to let the information sink in.</p>

    <p>"Yes, quite."</p>

    <p>"Pardon?"</p>

    <p>"I have a flight booked to Twitter HQ and we have to be there in and hour, so you're coming with me."</p> 

    <p>"Shaltai Boltai, are you certain?"</p>

    <p>"Yes."</p>

    <p>"Then I suppose I am. Coming with you, I mean. Yes, I suppose I am."</p>

  </div>
  <div class="position_fix"></div>
</div>

Note, the clear:both is on the 'position_fix' div just above the end of the container.