title: Python Tkinter - How to make a child frame with image inside a set width
body: <p>I'm working on a program, which I'm building using python's tkinter gui library. </p>
  
  <h1>My 2 Problems</h1>
  
  <ol>
  <li><p>I'm trying to make a frame which will house a screenshot of the selected website. I have the frame and image created, but the frame is not anchoring to the right side of the window as expected. When the label element inside the frame has an image the frame is the expected length<br>
  <a href="https://i.stack.imgur.com/YUUeE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YUUeE.png" alt="with screenshot"></a>
  But, <strong>when the selected site does not have an image yet the frame is not stretching all the way to the right side of the window.</strong>
  <a href="https://i.stack.imgur.com/mvJqI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mvJqI.png" alt="without screenshot"></a><br>
  Below is the portion of my code where I set up the image container/frame and respective image.</p>
  
  <pre><code>self.frame_ImageContainer = Frame(self.tab_Details, width=320, height=180, bg='black', bd=2)
  self.frame_ImageContainer.grid(column=4, row=0, rowspan=11, columnspan=3, sticky=(N, S, E, W))
  self.button_TakeScreenshot = Button(self.frame_ImageContainer, text='Take Screenshot', command=self.fn_RunScraper)
  self.button_TakeScreenshot.grid(column=1, row=5, sticky=(E, W))
  self.widget_Image = Label(self.frame_ImageContainer, compound='top')
  self.widget_Image.grid(column=0, row=0, rowspan=12, columnspan=3, sticky=N)
  
  self.frame_ImageContainer.grid_columnconfigure(0, weight=1)
  self.frame_ImageContainer.grid_columnconfigure(1, weight=1)
  self.frame_ImageContainer.grid_columnconfigure(2, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(0, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(1, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(2, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(3, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(4, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(5, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(6, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(7, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(8, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(9, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(10, weight=1)
  self.frame_ImageContainer.grid_rowconfigure(11, weight=1)
  </code></pre></li>
  <li><p><strong>The Take Screenshot button will not center both vertically &amp; horizontally</strong>. I've attempted to center the Take Screenshot button in the middle of the frame, but it only applies vertically currently. I've also tried using <code>.place(relx=.5, rely=.5, anchor=CENTER)</code>, but when I try that the frame/image doesn't even show up on the screen.</p></li>
  </ol>
  
  <h1>What I'm trying to accomplish</h1>
  
  <ol>
  <li>Making the image frame a set width</li>
  <li>Showing a Take Screenshot button in the center of the image frame when a site does not have a screenshot yet.</li>
  </ol>
  
  <h1>In Question Form</h1>
  
  <ol>
  <li>How can I make the frame &amp; image stay a consistent width &amp; height (320x180)?</li>
  <li>How can I center the Take Screenshot button both vertically and horizontally inside the Image frame?</li>
  </ol>