Disapearing DIV? - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Disapearing DIV?

Were did it go and why did my list align-left?

Jay_R

8:58 pm on Aug 14, 2003 (gmt 0)

10+ Year Member

So I’m trying to center a highly manipulated list to display horizontally. Problem seems to come when I float the <li>s left. I’ve got the elements different colors, just for trouble shooting purposes… Anyway, The centerBox div seems to Disappear and the list goes to a seemingly left align. What gives, appreciate any help.
-Jay

(unrelated css…)

body#footerB {
background-image: url(../graphics/footer.jpg);
background-repeat: repeat-x;
text-align:center;
margin: 0px 0px 0px 0px;
}

div.centerBox {
align-left: auto;
align-right: auto;
background-color: red;
}

ul.rowLinks {
margin-top: 0px;
list-style-type: none;
background-color: blue;
}

li.rowLinks1 {
margin: 0px 20px 0px 0px;
list-style-type: none;
font-weight: bold;
float: left;
background-color: purple;
}

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/HTML4.01/loose.dtd">
<html>
<head>

(title and tags….)
<link rel="stylesheet" href="../css/markup.css" type="text/css">
</head>

<body id="footerB">

<div class="centerBox">
<ul class="rowLinks">
<li class="rowLinks1”> some link</li>
<li class="rowLinks1”> some link</li>
<li class="rowLinks1”> another link</li>
<li class="rowLinks1”> more links?</li>
</ul>
</div>

</body>
</html>

Reflection

9:08 pm on Aug 14, 2003 (gmt 0)

10+ Year Member

I think whats happening is when you float your list its taking it out of the normal-flow of the document and as a result there is no content in the div(aka it disappears).

Try replacing your float:left; with display:inline; and I think that should give you the effect you want.

Also you might want to check out this article on lists [alistapart.com], it should be helpful.

Jay_R

3:43 am on Aug 15, 2003 (gmt 0)

10+ Year Member

First, I want to thankyou reflection for taking the time to reply. It is a good guess at what's going on, cause i don't sure don't. I've already read through the alistapart article, in fact, that's where I learned most of these tricks. However, I'm reluctant to go with an inline display model because you loose some functional control over the elements. It just eludes me, because they have the same setup on glish.com for centering a div. I guess if nobody knows whats going on, I'll have to go inline. btw, I'm using i.e. 6 for viewing if that makes a difference. Again, thanks for taking the time.
-Jay

SuzyUK

9:38 am on Aug 15, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Jay_R

Reflection is correct it is the float: left which causes the "disappearing" div at least in everything but IE, don't know what you're using to test but this should work in IE.

However there are is an error in your HTML code but I don't know if it's a typo or a paste error just?

<li class="rowLinks1”> more links?</li>

the quotation marks after rowlinks are the wrong ones (not showing up in this paste though look at your original post), they are an unrecognized character (pasted from Word? maybe..) change them to " first..

Then in the CSS for div.centerBox:

align-left: auto;
align-right: auto;

these are not CSS properties.. the correct way to center is:
margin-left: auto;
margin-right: auto;
or
margin: 0 auto; which is shorthand for above.

and you will need to give it a width so it knows what to center.. so try this instead:
div.centerBox {
margin: 0 auto;
width: 500px;
background-color: red;
}

so now you should see the colors in IE anyway.. then to overcome the floated elements not "filling" the centerBox because they are floated there are 2 methods you can use..

1. Use the "clear: both;" method

put <div style="clear:both;"></div> into the HTML after the list, before you close the centerBox div..

or another method which involves no extra markup ;)

2. use generated content property method

put this into the CSS

div.centerBox:after{content: ""; display: block; height: 0; clear: both;}

IE will not understand method no. 2, but it doesn't need to as it already (incorrectly) stretches the parent div to surround the floats..

Suzy