8 replies [Last post]
obliocat
obliocat's picture
Offline
newbie
Last seen: 16 years 44 weeks ago
Joined: 2004-01-23
Posts: 9
Points: 0

is there any way to avoid this? when i float a div with content to the left, if there's a list of some sort that falls to the right of the box, the floated box i've defined hides or partially hides the bullet or number.

here's some code. pardon the nonsensical text.

<div style="width: 600px;">

<div style="float: left; background-color: #FFFFFF; border: 2px solid #CDD0B8; width: 300px; padding: 15px; margin: 10px 10px 10px 0px;">
<p><strong>Umpteen electronic hierarchies align a leasehold, but five institutional consortiums:</strong></p>

<ol style="margin: 0px 0px 5px 18px; color: #000000;">
	<li>ardwares enhance NASA, then a esssentially significant</li>
	<li>hen three suns outsource the on-lab objectives</li>
	<li>and/or five technology transfers autonomously strengthen umpteen</li>
	<li>hard-bound maneuver, and/or five technology transfers</li>
</ul>

</div>
<p>Umpteen electronic hierarchies align a leasehold, but five institutional consortiums extremely incrementally outsource ten alignments, and/or five anomalous:</p>

<ul style="margin-left: 25px;">
	<li>institutional partnerships quickly simplfy five</li>
	<li>three suns outsource the on-lab objectives</li>
</ul>

<p>Umpteen electronic hierarchies align a leasehold, but five institutional consortiums extremely incrementally outsource ten alignments, and/or five</p>

</div>

thanks!

Smile obliocat

obliocat
obliocat's picture
Offline
newbie
Last seen: 16 years 44 weeks ago
Joined: 2004-01-23
Posts: 9
Points: 0

ignore the...

ignore the:

<ul style="margin-left: 25px;">

i was trying to solve the issue. if you remove that, you'll still see the overlap.

it's driving me batty!

Smile

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

floats &amp; lists

OK 1st of all there is no satisfactory answer, but two unsatisfactory solutions.

This is occurring due to the indent not recognising the floated div.

The list that sits next to the floated div has a problem with its indent. This is due to the floated div being outside the normal html flow, and list margin or padding not recognising the floated div. In other words the indent is pushing off the left hand side of the body, but is not big enough.

A)
1) first of all for the floated div increase the margin on the right to force the text on the right further over - like thus

<div style="position: relative; float: left; background-color: #FFFFFF; border: 2px solid #CDD0B8; width: 300px; padding: 15px; margin: 10px 20px 10px 0px;">

2) But to make the indent work you need to account for the width of the floated div + margins+ borders+ padding (if standard mode) + any indent you want. like this -

<ul style="margin-left: 374px; padding-left: 0px;">

(need padding to be 0px for Moz)

But there is a problem with the above - if you have more text above the UL list and that text is higher than the floated div, then the margined UL will still be stuck out to the right no matter that the other text above it has started to wrap to the left.

B)

You can place a div around the non floated items like thus

<div style="width: 600px;"> 

<div style="float: left; background-color: #FFFFFF; border: 2px solid #CDD0B8; width: 300px; padding: 15px; margin: 10px 10px 10px 0px;"> 
<p><strong>Umpteen electronic hierarchies align a leasehold, but five institutional consortiums:</strong></p> 

<ol style="margin: 0px 0px 5px 18px; color: #000000;"> 
   <li>ardwares enhance NASA, then a esssentially significant</li> 
   <li>hen three suns outsource the on-lab objectives</li> 
   <li>and/or five technology transfers autonomously strengthen umpteen</li> 
   <li>hard-bound maneuver, and/or five technology transfers</li> 
</ol> 

</div> 
<div style="float: left; background-color: #FFFFFF; width: 256px;">
<p>Umpteen electronic hierarchies align a leasehold, but five institutional consortiums extremely incrementally outsource ten alignments, and/or five anomalous:</p> 

<ul> 
   <li>institutional partnerships quickly simplfy five</li> 
   <li>three suns outsource the on-lab objectives</li> 
</ul> 

<p>Umpteen electronic hierarchies align a leasehold, but five institutional consortiums extremely incrementally outsource ten alignments, and/or five</p> 
</div>
</div>

Of course then it will not wrap back to the left when it exceeds the height of the floated div.

Regards
Day

note - I have always tried to avoid the wrapping of text back around to the left by (if possible always floating to the right) You have just given me another good reason.

The only way to learn is to do it yourself

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

floats &amp; lists

BTW

Big John - do you know of any hack for this problem?

Regards
Day

The only way to learn is to do it yourself

obliocat
obliocat's picture
Offline
newbie
Last seen: 16 years 44 weeks ago
Joined: 2004-01-23
Posts: 9
Points: 0

i see, but still have a problem

hi day! thanks again!

it is an ugly thing, isn't it? well, glad to know i am experiencing "normal" behavior.

the problem i have with the solutions you offer is the fact that i really don't want to define a width on the page, i want the page to be liquid. i defined the width in the div on the example so you could see the overlap.

i guess i should have said that.

i'll keep poking at it. let me know if you have any other thoughts.

Smile obliocat

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

floats &amp; lists

You have to define a width for the floated div other wise it will just continue across the page - can't get away from that.

Regards
Day

The only way to learn is to do it yourself

barik
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2004-08-20
Posts: 1
Points: 0

floats &amp; lists

I had the same problem with floats and lists. I solved this by wrapping the list in the div and setting its float property also to 'left'.

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 11 years 51 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

floats &amp; lists

I did find a simple solution.

<div style="width: 600px;"> 
			<div style="float: left; background-color: #FFFFFF; border: 2px solid #CDD0B8; width: 300px; padding: 15px; margin: 10px 10px 10px 0px;"> 
				<p><strong>Umpteen electronic hierarchies align a leasehold, but five institutional consortiums:</strong></p> 
				
				<ul style="margin: 0px 0px 5px 18px; color: #000000;"> 
				   <li>ardwares enhance NASA, then a esssentially significant</li> 
				   <li>hen three suns outsource the on-lab objectives</li> 
				   <li>and/or five technology transfers autonomously strengthen umpteen</li> 
				   <li>hard-bound maneuver, and/or five technology transfers</li> 
				</ul> 
			</div> 
			
			<div style="height: 1%;">
				<p>Umpteen electronic hierarchies align a leasehold, but five institutional consortiums extremely incrementally outsource ten 
				alignments, and/or five anomalous:</p> 
				
				
				<ul style="margin-left: 25px;"> 
				   <li>institutional partnerships quickly simplfy five</li> 
				   <li>three suns outsource the on-lab objectives</li> 
				</ul> 
				
				<p>Umpteen electronic hierarchies align a leasehold, but five institutional consortiums extremely incrementally outsource ten 
				alignments, and/or five</p> 
			</div>		
		</div>

Basicallly, I created a new div around the second unordered list using the Holly hack. It seems to do the trick in IE. Hopefully, this is the effect you are looking for.

Cheers.
cb.

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

chrispie
Offline
newbie
Last seen: 16 years 13 weeks ago
Joined: 2004-08-28
Posts: 4
Points: 0

floats &amp; lists

Okay I'm a newbie to css, but I just had a look at your code, then w3.org css stuff, and I found list-style-position:inside. If you apply this to your ul, then you get your desired effect (well what I assume you are trying to do?!), of getting your bullets away from the div.

Erm, good, bad, stupid? Smile

Chris