1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Containing Divs within a Parent Div

Discussion in 'Web Design & Development' started by smooth, Sep 25, 2008.

Thread Status:
Not open for further replies.
  1. smooth

    smooth Thread Starter

    Joined:
    Sep 26, 2005
    Messages:
    4,029
    First Name:
    Garrett
    Hi everybody :)

    I have a simple example html page to test this with:

    HTML:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    
    <div style="width: 100%; float: left;border:1px solid #000000;">
    	<div style="float: left; width: 185px;border:1px solid red;">left</div>
    	<div style="float: left; width: 790px;border:1px solid blue;margin:auto;">center</div>
    	<div style="float: left; width: 185px;border:1px solid green;">right</div>
    </div> 
    
    </body>
    </html>
    
    Now, if you run this page, you'll see that everything is lined up pretty well, but when make the browser thinner, the center div ends up going outside of it's container div.

    I was wondering is there a way to keep fixed width divs within their container?

    Any help is greatly appreciated :)
     
  2. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    There sure is. Make sure the fixed width DIV is contained within a DIV that is guaranteed to be as wide as the fixed width DIV. :)

    You could use the min-width CSS attribute to control the width of the parent DIV (so it won't be more narrow than the fixed width child DIV) but IE doesn't support min-width (at least pre-IE8 versions don't and I don't know about IE8). *Sigh*

    Peace...
     
  3. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,270
    First Name:
    Colin
    I know pre IE8 browsers that don't support min-height actually treat height as a minimum so maybe they do the same for width? Worth a try with some IE specific CSS?
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/753240

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice