Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with DIV width

    Hello All,

    When you check the example: www.picoba.nl/123/index22.html
    You see a simple layout.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	 background-color: #666;
    	margin: 0px;
    }
    #frame {
    	background-color: #CCC;
    	height: 500px;
    	width: 100%;
    	margin: 0px;
    }
    #frame2 {
    	background-color: #FFF;
    	height: 400px;
    	width: 700px;
    	margin-right: auto;
    	margin-left: auto;
    	border: 1px solid #000;
    	top: 40px;
    	position: relative;
    }
    </style>
    </head>
    
    <body>
    <div id="frame">
      <div id="frame2"></div>
    </div>
    </body>
    </html>
    But now my problem; when i resize the browser window, firefox, IE, safari etc. And i make it a width of 10/15cm.
    You see a horizontal scrollbar appear. when you scroll to the right, you will see what i mean.

    frame div does not stay 100% width.


  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Have you tried: html {overflow-x: hidden;}

    or try placing the overflow-x:hidden; style on your frame.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re:Problem with DIV width

    I also have this problem


    Regards
    oak furniture

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by optimus203 View Post
    Have you tried: html {overflow-x: hidden;}

    or try placing the overflow-x:hidden; style on your frame.
    Glad i am not the only one having this problem.

    I tried it in the #frame. That does fix it in some way, i found out myself that set; #frame to position: fixed;
    Does the same.
    But i am more looking for a solution that when i make my browser window smaller, that like now, a horizontal scrollbar appear. But that that my width: 100%; stays 100%

    Also i can add; overflow-x: auto; to #frame then when i resize my browser window a scrollbar appear in #frame But i don't like that.
    And when i add; overflow-x: auto to my body tag the problem appear again.
    Last edited by Baswazz; 05-13-2010 at 11:37 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •