...

View Full Version : Floating and Lists



phill_ridout
02-26-2009, 03:29 PM
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

jerry62704
02-26-2009, 03:40 PM
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.

abduraooft
02-26-2009, 03:44 PM
Giving a margin-left:200px; to that <ol> would solve it in FF.

phill_ridout
02-26-2009, 03:48 PM
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!

Fisher
02-26-2009, 03:48 PM
Isn't the negative margin overkill though?

His </div> tag is in the wrong place.

<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

phill_ridout
02-26-2009, 03:54 PM
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:



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


:confused:


Isn't the negative margin overkill though?

His </div> tag is in the wrong place.

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

jerry62704
02-26-2009, 03:54 PM
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.

phill_ridout
02-26-2009, 03:55 PM
just to be clear, i want the numbered list to appear out side of the left box!

Fisher
02-26-2009, 04:00 PM
ol {
float:left;
}

phill_ridout
02-26-2009, 04:02 PM
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!

jerry62704
02-26-2009, 04:07 PM
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).

phill_ridout
02-26-2009, 04:08 PM
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!

phill_ridout
02-26-2009, 04:09 PM
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!

jerry62704
02-26-2009, 04:13 PM
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.

abduraooft
02-26-2009, 04:14 PM
on the second one the 2nd ol sits out in the middle! That's due to that general rule

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

ol.mylist{
margin-left:200px;
}

<ol class="myllist">
.....
</ol>

phill_ridout
02-26-2009, 04:17 PM
That's due to that general rule

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

ol.mylist{
margin-left:200px;
}

<ol class="myllist">
.....
</ol>

Yeah, i understand that. Cheers. I was just hoping for a more general soloution. Cheers for your help guys.

Fisher
02-26-2009, 04:18 PM
This works both in ie6 and FF:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Knights Of Antioch - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#sidebox {
border: 1px solid;
float: left;
height: 600px;
width: 200px;
}
.mylist {
float:left;
list-style-position: inside;
}
</style>
</head>
<body>
<div id="main">
<div id="sidebox"> Side Div </div>
<ol class="mylist">
<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>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum