css - Right float width 100% doesn't work -

This is my bella: I want to make the main div as big as possible, the toggle is located on the right side of the device. how can I do this ? Any help is really appreciated :)

HTML:

  & lt; Div id = "toggle" & gt; & Lt; / Div & gt; & Lt; Script & gt; $ (Document). Click (function () {$ ("#toggle") Toggle ("Slide", {Direction: "left"}, 1000);}); & Lt; / Script & gt; & Lt; Div id = "main" & gt; Object data = "http://euclidthegame.com/mathexchange/5.svg" type = "image / svg + xml" & gt; & Gt; Object & gt; & Lt; / Div & gt;   
 CSS:  
  #toggle {float: left; Width: 100px; Height: 800 pixels; Limit: 1px solid black; Background: #ccc; } #main {float: right; Width: 100%; Height: 800px; Limit: 1px solid black; }    
 
 
 Yo should use width: remove auto and floating in the main container : right .  
 This should be your CSS:  
  #toggle {float: left; Width: 100px; Height: 800 pixels; Limit: 1px solid black; Background: #ccc; } #main {altitude: 800px; Limit: 1px solid black; Width: Auto; }   
 Regards