www.webdeveloper.com
Results 1 to 8 of 8

Thread: Trouble with float: right

  1. #1
    Join Date
    Jul 2009
    Posts
    17

    Trouble with float: right

    Hello,

    I'm trying to develop a two column page. I can float the div to the right, but it doesn't line up flush with the right margin. Here is the Website with the code:

    www.stcmedical.com/test/

    I use the following CSS to center and "jello" the page:

    #allcontent {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    }

    I suspect this is where my problem lies, but I can't be sure. If someone could please take a look at the simple code, I would appreciate it. Naturally, it is best viewed with Mozilla. Explorer doesn't render it as intended.

    Thank you,

    Greg

  2. #2
    Join Date
    Aug 2009
    Posts
    5
    i cant get u exactly.....

    <div id="sidebar"> & <div id="main"> are overlaping

    you dont want to overlap them?


    ie. you have header on top and below two column with out overlaping!

  3. #3
    Join Date
    Nov 2002
    Location
    England
    Posts
    693
    The page is rendering correctly. The width of the div element is equivalent to its width property plus its padding and border widths, thus, if we take a box of 200 px with a border value of 2px the actual visual width of the box is 204 px.

    The W3C box model sucks. Microsoft had it right.

  4. #4
    Join Date
    Jul 2009
    Posts
    17
    I've played around with changing widths on the various elements, and one thing that works is to reduce the width of the top header box by 6 pixels, to 394, and to reduce the width of the left-side element also by 6 pixels, to 194.

    Alternatively, I can enter 406px for the width of the allcontent div and reset the two other divs (header and main) to 400px and 200px, respectively.

    Both methods allow the borders to not overlap between the left-side element and the floated element, and for the header to line up on top. So I'm thinking that the default border width value must be 3px, and not 2. I verified this by entering 3px for the main and floated element, and the layout was unaltered.

    And this, of course, only works in W3C compliant browsers. IE doesn't respect any of this.

    Am I missing an easier way of doing this here?

    Thanks,

    Greg

  5. #5
    Join Date
    Nov 2002
    Location
    England
    Posts
    693
    There should be no difference between IE and other browsers, sounds like yo don't have a DOCTYPE and IE is rendering in quirks mode.

  6. #6
    Join Date
    Jul 2009
    Posts
    17
    Quote Originally Posted by Scriptage View Post
    There should be no difference between IE and other browsers, sounds like yo don't have a DOCTYPE and IE is rendering in quirks mode.
    I'm using this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Does anything look wrong there?

    Thanks,

    Greg

  7. #7
    Join Date
    Apr 2009
    Posts
    122
    Hi thehappyhack,
    This should work for you:

    Code:
    #allcontent {
    	WIDTH: 400px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto
    }
    #header {
    	BORDER-BOTTOM-STYLE: solid; BORDER-RIGHT-STYLE: solid; WIDTH: 400px; BORDER-TOP-STYLE: solid; HEIGHT: 100px; float: left; BORDER-LEFT-STYLE: solid
    }
    #main {
    	BORDER-BOTTOM-STYLE: solid; BORDER-RIGHT-STYLE: solid; WIDTH: 200px; BORDER-TOP-STYLE: solid; HEIGHT: 200px; float: left; BORDER-LEFT-STYLE: solid
    }
    #sidebar {
    	BORDER-BOTTOM-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; WIDTH: 200px; BORDER-TOP-STYLE: dotted; FLOAT: left; HEIGHT: 200px; BORDER-LEFT-STYLE: dotted
    }
    Just a matter of floating the other elements, but you may want to increase the container div to 403, as previously stated to accommodate for those borders, and also set the width of the borders too:

    Code:
    border: #000000 1px dotted;
    Hope this helps
    - Andy

  8. #8
    Join Date
    Jul 2009
    Posts
    17
    Andy,

    Your code resulted in the header div being on top of the dotted border sidebar div, with the solid border main div directly underneath the sidebar div.

    I don't understand why you would want to float the header div? For me, removing it made no difference.

    Thanks,

    Greg

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