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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Floating and Lists

    Hey, Ive got a problem with an ordered list breaking through a left floated div. an example is posted here: http://www.knightsofantioch.co.uk/listprob.htm

    it happens in both I.E and FF. I tried searching the forum, thinking it must be a common problem, but i couldn't find any thing, maybe i was using the wrong terms.

    Any help much appreciated, thanks.

    Phill

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Your list is not in sidebox. You are seeing the out listing of the number in it. Either add a margin to it to account for the float or indent the number.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Giving a margin-left:200px; to that <ol> would solve it in FF.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    the problem with adding padding is that if i add content above it, then when it drops down below the side box, the ol would appear to stick out in to the middle of the page!

  • #5
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Isn't the negative margin overkill though?

    His </div> tag is in the wrong place.
    Code:
    <body>
    <div id="main">
      <div id="sidebox"> Side Div
        <ol>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
        </ol>
      </div>
    </div>
    </body>
    edit: Oh nevermind, I thought you said -200px for margin to bring it to the left. I didn't realize the goal was to get it outside of the sidebar
    Last edited by Fisher; 02-26-2009 at 04:54 PM.

  • #6
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    eh? thats not right. I just checked the doc on my computer and viewed page source using ff, and i've got it like this:

    Code:
    <div id="main"> 
        <div id="sidebox">Side Div</div>
    	<ol>
    		<li>list item</li>
    		<li>list item</li>
    		<li>list item</li>
    		<li>list item</li>
    		<li>list item</li>
    		<li>list item</li>
    		<li>list item</li>
    	</ol>
    </div>


    Quote Originally Posted by Fisher View Post
    Isn't the negative margin overkill though?

    His </div> tag is in the wrong place.
    Code:
    <body>
    <div id="main">
      <div id="sidebox"> Side Div
        <ol>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
        </ol>
      </div>
    </div>
    </body>

  • #7
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Quote Originally Posted by phill_ridout View Post
    the problem with adding padding is that if i add content above it, then when it drops down below the side box, the ol would appear to stick out in to the middle of the page!
    Isn't that exactly what you would want? Not having half a list 200 pixels from the rest of it? Note we are talking about margins, not padding.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #8
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    just to be clear, i want the numbered list to appear out side of the left box!

  • #9
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Code:
    ol {
    float:left;
    }

  • #10
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    ok, so ive applied 200px of margin, but i want the second li to sit against the main div. I really wanna just have one style of ol's and not having to worry about applying individual styles to each ol depending if its next to the margin or not!

    http://www.knightsofantioch.co.uk/listprob2.htm

    There must be a different way!

  • #11
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    What second LI? Do you mean item #2 in your list? You want #1 to be to the right of the side and #2 to be in the middle of it? Your page looks OK right now (add a margin to the text to get it off the line).
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #12
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    ok, so floating left works, BUT the numbers disapper in I.E, and in i.e anf FF the content wraps arround the ol, clearing right does nothing!

  • #13
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jerry62704 View Post
    What second LI? Do you mean item #2 in your list? You want #1 to be to the right of the side and #2 to be in the middle of it? Your page looks OK right now (add a margin to the text to get it off the line).
    ive posted two pages now,

    http://www.knightsofantioch.co.uk/listprob.htm

    http://www.knightsofantioch.co.uk/listprob2.htm

    on the second one the 2nd ol sits out in the middle!

  • #14
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Got it. Simple. Justs make a class with the margin and apply it only to the first OL.

    css:
    .bigHonkingMargin { margin-left: 210px;}

    ol #1:
    <ol class="bigHonkingMargin">...

    ol #2:
    <ol>...

    There are more sophisticated ways, but this works and is simple.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    on the second one the 2nd ol sits out in the middle!
    That's due to that general rule
    Code:
    ol{
    margin-left:200px;
    }
    If you have more such tags, then apply a class or id to your first one and then set a specific style, like
    Code:
    ol.mylist{
    margin-left:200px;
    }
    Code:
    <ol class="myllist">
    .....
    </ol>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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