css - Border around HTML Faux Columns -

I am working on a webpad and I will put the boundaries around the floating devices, which I can not get better in the absence of the column Call me I know this is very basic, but for some reason - incompetence - maybe I can not get it to work

Process: I have two divs left and right, these divisions are nested in other divisions I want to keep the boundary around

Code:

  & lt; Html & gt; & Lt; Top & gt; & Lt; Meta http-equiv = "content-type" content = "text / html; charset = UTF-8" & gt; & Lt; Title & gt; StackOvervlow & lt; / Title & gt; & Lt; Style type = "text / css" media = "screen" & gt; Body {width: 900px; } #Weather (border: 2px solid brown color;} # container {width: 600px; left swim; background color: # 678;} # sidebar {width: 200px; right boat; background color: biscuits;} #footer {clear : Both; Text align: center;}  gt; & gt; & gt; body & gt; & lt; div id = "header" & gt; & lt; / div & Lt; div id = "wrapper" & gt; div id = "container" & gt; & lt; p & gt; placeholder text. & Lt; / p & gt; & lt; p & Gt; Placeholder text. & Lt; / p & gt; & lt; / div & gt; & lt; div id = "sidebar" & gt; & lt; p & gt; Placeholder text. & Lt; / p & gt; ; & Lt; / div & gt; & lt; / di  DIV>  ; & Lt; / html>   
  
 Please indicate how the border looks as a line and not around the two attached divisions as expected. If you can suggest ways to fix this, I would appreciate it.  
 Thank you.   
 
 
 simply add:  
  overflow: hidden;   
 for CSS on  #wrapper , on the demo:.  
 The border falls into a line, because the reason is that the initial element was removed from the flow of the document, which means they can not essentially place any space within their original element, which That there is no content, falls.  Overflow: Hidden;  The cause of the original element is to wrap around her children, however, to be honest, I do not particularly understand why  why  this happens.  
 CSS is worth reading for a refresher / primer at floats, however, their behavior for the indicator.