SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div layout - absolute or not ?

    hi all

    i had a thread friday and manage to get my left divs to relate to each other. Basically one div under another with a margin-top: 10px so they spread neatly with a space no matter how much content was in them.

    but now i have some middle divs and using the same process, but now when i place these under my exsiting left divs in my html they bsically relate to them and cancel out my css code.

    what ive done is not apply postion: absolute; to the left divs and it works fine, like i said before when i bring in the middle divs unless i apply postion: absolute; they jump to the left and my left:147px; dosent work, all so when i add postion: absolute; the middle divs dont rlate to each other and overlap by 10px.

    hope i made sense here, my code is below.

    left divs:
    Code:
    #L1 { 
    	margin-top: 20px;
    }
    #L1, #L2, #L3 {
    	left: 0px;
    	width: 132px;
    	height: auto;
    	border: 1px solid #333;
    	}
    #L2, #L3 {
    	margin-top: 10px;
    }
    middle divs:
    Code:
    #M1 { margin-top: 20px; }
    #M1, #M2 {
    	width: 400px;
    	height: auto;
    	left: 147px;
    }
    #M2 { margin-top: 10px; }
    basically this code works but how can i get the middle divs to think for themselves without postioning of my left divs and get the left: 147px to work?

    html:
    HTML Code:
    <div id="wrapper"><!-- Start Wrapper -->
    
    <div id="L1">
      <p>left 1</p>
      <p>&nbsp;</p>
    </div>
    <div id="L2">
      <p>left 2</p>
      <p>&nbsp;</p>
    </div>
    <div id="L3">
      <p>left 3</p>
      <p>&nbsp;</p>
    </div>
    <div id="M1">middle 1</div>
    <div id="M2">middle 2</div>
    
    
    </div><!-- End Wrapper -->
    my wrapper is postion: relative if that makes any diffrence.

    Many thanks!!

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank u very much!! made a thew alterations working great.. my first time with floats , always used relative and absoulte poistioning.. thanks agian!!

    that width check come in handy aswell, great little feature for the developer..

    while am i it, would anybody like to explain the diffrence betwen floats and absolute, when you should use 1 over the other?

    thanks every1!!!

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by computerbarry
    would anybody like to explain the diffrence betwen floats and absolute, when you should use 1 over the other?
    I wrote an article on some of the problems you can face using absolute positioning. There's a related article that looks at some examples of when it is good to use as well.

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes am with it now, defantly easy to mantain with the float.

    "float model is content controlled" just what am after! thanks all4nerds, really sorted me out, thanks every 1!!!!

    nice article tyssen, thanks!


Bookmarks

Posting Permissions

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