Need help clearing this div.

[FuzzyLogik]

<div id="bottomlinks">
<h3>Get Info On</h3>
<ul>
<li><a href="#">Search Engine Optimization</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML / XHTML</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Print Design</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Google Adwords</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
I need to clear this div,

I saw one usage of <br /after the last <liwith a clear applied to
it, but I would rather not use structural markup for this.

[dorayme]

In article
<11**********************@b28g2000cwb.googlegroups .com>,
"FuzzyLogik" <ta****@gmail.comwrote:

<div id="bottomlinks">
<h3>Get Info On</h3>
<ul>
<li><a href="#">Search Engine Optimization</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML / XHTML</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Print Design</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Google Adwords</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
I need to clear this div,

I saw one usage of <br /after the last <liwith a clear applied to
it, but I would rather not use structural markup for this.

You need to be posting some urls... ;-) What do you mean clear
this div? Do you mean you want to go on under neath it? Just have
another div, it is automatic. Not enough space? OK, make the next
div with a bigger top margin. Or this div with a bigger bottom
margin. Floating bottomlinks somehow and want the next to clear
it? Use clear:both (that will get it) on the next...

--
dorayme

[FuzzyLogik]

dorayme wrote:

In article
<11**********************@b28g2000cwb.googlegroups .com>,
"FuzzyLogik" <ta****@gmail.comwrote:

<div id="bottomlinks">
<h3>Get Info On</h3>
<ul>
<li><a href="#">Search Engine Optimization</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML / XHTML</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Print Design</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Google Adwords</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
I need to clear this div,

I saw one usage of <br /after the last <liwith a clear applied to
it, but I would rather not use structural markup for this.

You need to be posting some urls... ;-) What do you mean clear
this div? Do you mean you want to go on under neath it? Just have
another div, it is automatic. Not enough space? OK, make the next
div with a bigger top margin. Or this div with a bigger bottom
margin. Floating bottomlinks somehow and want the next to clear
it? Use clear:both (that will get it) on the next...

--
dorayme

sorry :)

http://www.phazm.net/newphazm/

[dorayme]

In article
<11**********************@i42g2000cwa.googlegroups .com>,
"FuzzyLogik" <ta****@gmail.comwrote:

dorayme wrote:

In article
<11**********************@b28g2000cwb.googlegroups .com>,
"FuzzyLogik" <ta****@gmail.comwrote:

<div id="bottomlinks">
<h3>Get Info On</h3>
<ul>
<li><a href="#">Search Engine Optimization</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML / XHTML</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Print Design</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Google Adwords</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
>
>
I need to clear this div,
>
I saw one usage of <br /after the last <liwith a clear applied to
it, but I would rather not use structural markup for this.

You need to be posting some urls... ;-) What do you mean clear
this div? Do you mean you want to go on under neath it? Just have
another div, it is automatic. Not enough space? OK, make the next
div with a bigger top margin. Or this div with a bigger bottom
margin. Floating bottomlinks somehow and want the next to clear
it? Use clear:both (that will get it) on the next...

--
dorayme

sorry :)

http://www.phazm.net/newphazm/

You could try moving the very last </divup to above the opening
of the "bottomlinks" div...

--
dorayme

[FuzzyLogik]

dorayme wrote:

In article
<11**********************@i42g2000cwa.googlegroups .com>,
"FuzzyLogik" <ta****@gmail.comwrote:

dorayme wrote:

In article
<11**********************@b28g2000cwb.googlegroups .com>,
"FuzzyLogik" <ta****@gmail.comwrote:
>
<div id="bottomlinks">
<h3>Get Info On</h3>
<ul>
<li><a href="#">Search Engine Optimization</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML / XHTML</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Print Design</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Google Adwords</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>


I need to clear this div,

I saw one usage of <br /after the last <liwith a clear applied to
it, but I would rather not use structural markup for this.
>
You need to be posting some urls... ;-) What do you mean clear
this div? Do you mean you want to go on under neath it? Just have
another div, it is automatic. Not enough space? OK, make the next
div with a bigger top margin. Or this div with a bigger bottom
margin. Floating bottomlinks somehow and want the next to clear
it? Use clear:both (that will get it) on the next...
>
--
dorayme

sorry :)

http://www.phazm.net/newphazm/

You could try moving the very last </divup to above the opening
of the "bottomlinks" div...

--
dorayme

That's not the result I want, though.

http://www.phazm.net/newphazm/index.gif

[John Hosking]

FuzzyLogik wrote:

dorayme wrote:

>>In article
<11**********************@i42g2000cwa.googlegrou ps.com>,
"FuzzyLogik" <ta****@gmail.comwrote:

[exchange snipped]

>>>http://www.phazm.net/newphazm/

You could try moving the very last </divup to above the opening
of the "bottomlinks" div...

That's not the result I want, though.

http://www.phazm.net/newphazm/index.gif

I'm still not real clear on what you want to do. Does it help you near
your goal if you do this:

#bottomlinks ul {
width: 520px;
background-color:#303b3c;
margin:0 0 8em 0; /* <=change bottom margin from 12px to 8em */
padding:7px;
}
and add the same background color to #bottomlinks ul li?

I mean, does it start to *look* like what you want?

--
John

[FuzzyLogik]

John Hosking wrote:

FuzzyLogik wrote:

dorayme wrote:

>In article
<11**********************@i42g2000cwa.googlegroup s.com>,
"FuzzyLogik" <ta****@gmail.comwrote:

[exchange snipped]

>>http://www.phazm.net/newphazm/

You could try moving the very last </divup to above the opening
of the "bottomlinks" div...

That's not the result I want, though.

http://www.phazm.net/newphazm/index.gif

I'm still not real clear on what you want to do. Does it help you near
your goal if you do this:

#bottomlinks ul {
width: 520px;
background-color:#303b3c;
margin:0 0 8em 0; /* <=change bottom margin from 12px to 8em */
padding:7px;
}
and add the same background color to #bottomlinks ul li?

I mean, does it start to *look* like what you want?

--
John

Yes, it makes it start to *look* right, but certainly not the code I am
looking for.

I basically want it to look like it does in IE, in FF.

To do that, I need to clear the float on the #bottomlinks, but I need a
semantic way of clearing it.

[Bergamot]

FuzzyLogik wrote:

>
I need to clear the float on the #bottomlinks, but I need a
semantic way of clearing it.

http://www.quirksmode.org/blog/archi...ng_floats.html
http://www.positioniseverything.net/easyclearing.html

--
Berg

[John Hosking]

FuzzyLogik wrote:

>>>>In article
<11**********************@i42g2000cwa.googlegr oups.com>,
"FuzzyLogik" <ta****@gmail.comwrote:

>http://www.phazm.net/newphazm/

>
I basically want it to look like it does in IE, in FF.

I hadn't even tried it in IE, just looked at your gif.

To do that, I need to clear the float on the #bottomlinks, but I need a
semantic way of clearing it.

See Bergamot's link, but maybe also try this:

#bottomlinks ul {
width:32em;
background-color:#303b3c;
margin:0 0 1em 0;
padding:.5em;
min-height:8em;
}
#bottomlinks ul li {
list-style-type:none;
float:left;
width:15em;
}
My suggested changes are slightly indented. Not tested in IE.

I believe you'll have (more) trouble if you don't switch to ems or %.
Watch what happens when you resize the text.

--
John

[Michael Fesser]

..oO(FuzzyLogik)

>To do that, I need to clear the float on the #bottomlinks, but I need a
semantic way of clearing it.

#bottomlinks ul {
overflow: hidden;
...
}

Micha

[dorayme]

In article
<11*********************@i42g2000cwa.googlegroups. com>,
"FuzzyLogik" <ta****@gmail.comwrote:

>
http://www.phazm.net/newphazm/

You could try moving the very last </divup to above the opening
of the "bottomlinks" div...

--
dorayme

That's not the result I want, though.

http://www.phazm.net/newphazm/index.gif

Moving the div up as I suggested made it look nothing like this
in my FF (on a Mac). It made the "Get Info On" and list move out
of the brighter green zone and down into the olive green
background.

--
dorayme