PDA

View Full Version : Seemingly Simple Div Clear Problem



cmcconnell
Mar 24th, 2010, 10:31 PM
The page in question is www.brandeluxe.com on the homepage.

I've created a CSS image switcher to display featured portfolio pieces but I can't get the surrounding div to clear. The div that needs to wrap is: #content-background

I'm not a newbie - I've been able to get the following code to work flawlessly in the past many times:


.clear, br {
clear: both;
}

But I'm having no luck in this case. It could be that I'm missing something super simple and that my brain is fried because I just switched from editing visually in Dreamweaver to hand-coding in Coda and it's throwing me for a loop. Any help would be much appreciated.

Here's the HTML side of things for that specific section:


<h1 id="header-featured">Featured Work</h1>

<div id="content-background">

<div id="content-wrap">

<div id="switcher-wrapper">

<a id="img-one" href="#"><span>1</span></a>
<a id="img-two" href="#"><span>2</span></a>
<a id="img-three" href="#"><span>3</span></a>
<a id="img-four" href="#"><span>4</span></a>

</div>

</div>

<br>

</div>

<div id="content-bottom"></div>

Excavator
Mar 24th, 2010, 11:06 PM
Hello cmcconnell,
It's kind of hard to clear absolute positioned elements. Since everything is the same size is there any reason you can't do this?

#content-background {
height: 465px;
width: 570px;
background-image: url(http://www.brandeluxe.com/brandeluxe/images/bg-right-col.png);
background-repeat: repeat-y;
float: left;
}

As a sidenote, I noticed if you try to put a background image or color on #mid, you will see the floats it contains are not cleared either.

cmcconnell
Mar 24th, 2010, 11:33 PM
Hi Excavator - thanks for the input.

So, other than this specific div, I can't get anything else to clear, like the other div you are talking about - am I just missing something? Do you have any suggestions?

Excavator
Mar 25th, 2010, 01:06 AM
Hi Excavator - thanks for the input.

So, other than this specific div, I can't get anything else to clear, like the other div you are talking about - am I just missing something? Do you have any suggestions?

Normally I like to used overflow:auto; to clear floats. See that method explained here. (http://www.quirksmode.org/css/clearing.html)
In the case of your #mid though, overflow:auto; adds an x-scrollbar because of your absolute positioned stuff inside it. I think your <br> will clear things fine in this case. Since you are using an XHTML DocType and that requires all elements be closed <br /> is what you want to use.

cmcconnell
Mar 25th, 2010, 02:45 PM
Cool - thanks for your help!!