dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] CSS float problem is driving me crazy, box goes underneath and is hidden

  1. #1
    Join Date
    Jan 2010
    Location
    Atlanta,GA
    Posts
    53

    resolved [RESOLVED] CSS float problem is driving me crazy, box goes underneath and is hidden

    Here is the markup and CSS:

    <!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>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" >

    </script>
    <style type="text/css">
    body {

    background:black;
    }

    div {
    border:1px solid white;
    margin:2px;
    }

    #container {
    width:1000px;
    margin:0 auto;
    border:1px solid white;

    }

    #box1 {
    width:330px;
    height:200px;
    border:1px solid red;
    float:left;
    }

    #box2 {
    width:330px;
    height:200px;

    border:1px solid yellow;

    }

    #box3 {
    width:330px;
    height:200px;
    border:1px solid green;

    }
    </style>


    </head>
    <body>
    <div id="container" >

    <div id="box1">

    </div>

    <div id="box2">
    </div>

    <div id="box3">
    </div>

    </div>

    </body>
    </html>

    --------------------------------------

    Applying the float to box 1 causes box2 to go underneath and be hidden by box1, I have done floats before successfully and can not figure this out. I am sure this will be a snap for you experts out there. Please help...

    JS

  2. #2
    Join Date
    Mar 2007
    Posts
    946
    What is the end outlook suppose to be? Are they suppose to be stacked on top of each other or line up next to each other? If they are suppose to be stacked then you need to clear the float with "clear:left;".

  3. #3
    Join Date
    Jan 2010
    Location
    Atlanta,GA
    Posts
    53
    I would like the divs to line up next to each other left to right.

  4. #4
    Join Date
    Mar 2007
    Posts
    946
    You can add float: left to each box inside the container div. Then you will need to clear the floats afterward to maintain the white border on the container div.

  5. #5
    Join Date
    Jan 2010
    Location
    Atlanta,GA
    Posts
    53
    thanks that solved it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles