Float affecting everything after div

Question

basically I want to have two divs on the same line, which I got to work exactly how I wanted to except when I add anything under them they will be behind the top of them. I've tried clear: left; and that didn't work. Any suggestions? Thanks in advance! <3

#stream_panels {
  padding-left: 25%;
  padding-right: 25%;
}
#stream_chatrules {
  max-width: 320px;
  float: left;
}
#stream_questions {
  max-width: 320px;
  float: left;
  text-align: center;
}
footer {
  background-color: #1E1E1E;
  color: white;
  font-size: 18px;
  text-align: center;
}

<!doctype html>
<html>

<body>
  <div id='stream_panels'>
    <div id='stream_chatrules'>
      <img src='chat.png' alt='chat rules' draggable='false'>
      <br>
      <b>Just some random text<b><br>
 </div>
 <div id='stream_questions'>
  <img src='qa.png' alt='questions' draggable='false'><br>
   <b>Question 1</b>
      <br>Answer 1
      <br>
      <b>Question 2</b>
      <br>Answer 2
    </div>
  </div>


  <footer>website by cold hands, 2014
    <br>
    <span id='footer_links'>
  <a youtube</a> / 
  <a twitter </a> / 
  <a stream </a> / 
  <a deviantart</a>
 <span>
</footer>
</body>
</html>

You can apply the clearfix class to stream_panels. More information here: http://stackoverflow.com/questions/12540436/height-of-parent-div-is-zero-even-if-it-has-child-with-finite-heights/12540590#12540590 — VVV, Nov 23 '14 at 00:43

score 0 · Accepted Answer · answered Nov 23 '14 at 00:42

Try adding

#stream_panels {
    overflow: hidden;
}

#stream_panels {
  padding-left: 25%;
  padding-right: 25%;
  overflow: hidden;
}
#stream_chatrules {
  max-width: 320px;
  float: left;
}
#stream_questions {
  max-width: 320px;
  float: left;
  text-align: center;
}
footer {
  background-color: #1E1E1E;
  color: white;
  font-size: 18px;
  text-align: center;
}

<div id='stream_panels'>
  <div id='stream_chatrules'>
    <img src='chat.png' alt='chat rules' draggable='false' />
    <br />
    <b>Just some random text</b>
    <br />
  </div>
  <div id='stream_questions'>
    <img src='qa.png' alt='questions' draggable='false' />
    <br />
    <b>Question 1</b>
    <br />Answer 1
    <br />
    <b>Question 2</b>
    <br />Answer 2
  </div>
</div>
<footer>website by cold hands, 2014
  <br />
  <span id='footer_links'>
    <a>youtube></a>
    <a>twitter</a>
    <a>stream</a>
    <a>deviantart</a>
  </span>
</footer>

Or

footer {
    clear: both;
}

#stream_panels {
  padding-left: 25%;
  padding-right: 25%;
}
#stream_chatrules {
  max-width: 320px;
  float: left;
}
#stream_questions {
  max-width: 320px;
  float: left;
  text-align: center;
}
footer {
  background-color: #1E1E1E;
  color: white;
  font-size: 18px;
  text-align: center;
  clear: both;
}

<div id='stream_panels'>
  <div id='stream_chatrules'>
    <img src='chat.png' alt='chat rules' draggable='false' />
    <br />
    <b>Just some random text</b>
    <br />
  </div>
  <div id='stream_questions'>
    <img src='qa.png' alt='questions' draggable='false' />
    <br />
    <b>Question 1</b>
    <br />Answer 1
    <br />
    <b>Question 2</b>
    <br />Answer 2
  </div>
</div>
<footer>website by cold hands, 2014
  <br />
  <span id='footer_links'>
    <a>youtube></a>
    <a>twitter</a>
    <a>stream</a>
    <a>deviantart</a>
  </span>
</footer>

Float affecting everything after div

1 Answers1