Can I place a DIV row under a row of DIV columns?

Screenshot attached. On my bestblogs.asia site at the bottom I have some free space.

I tried placing a DIV under the columns but it floats to the right side next to the Adverts...GRRR can't seem to make it fit under.

Any help appreciated! Thanks

 

Can you please post the url of your website so that we can use the web developer tool bar firefox addon to play around with the css?

Thanks

 

Sure it's http://www.bestblogs.asia

There's a web dev add on for FF which plays around with the CSS?!

 

if you are trying to add a new row under the ones in the black, just clear your floats with a <BR> as such:

.celarfloats {clear: both}

Code (markup):

Then add <BR class="clearfloats" /> after the divs to start a new row.

 

Thanks but that doesn't work, because a clear: both kills the proceeding float containing the adverts on the left.

<div class="footer_column">
<h3>title</h3>
<ul>
<li><a href="/link/">link</a></li>
</ul>
</div>

??<br clear="both">?? **This is the space I need to add content**

<div class="footer_column long">
<h3>Best Blogs Asia Advertisers</h3>
<p>IMAGE<br/>
<a href="/advertise/">Advertise on Best Blogs Asia</a></p>
</div>

Code (markup):

Placing the float after the adverts float means any content is well below the black space...

 

can anyone help with this?

 

That is what I want to say. Hi , guy, try this CSS style as above.

 

err, i did try the style set above..it cancels out all columns, but i only want it to cancel out the 3 columns above...

 

Um, yeah this can be a problem.

First, instead of adding something JUST for clearing, you'll add clearing to the div you want to add.

But before that, you'll have to float a container which only holds the stuff you want cleared... anything inside a floated container which clears floats won't clear stuff that's outside the floated container. I mean this:

Let's say a page has a floated left sidebar, and a main right side of the page.

On the right side of the page, something gets floated left, and then needs to be cleared.

One way to clear this thing without also clearing the sidebar too is to wrap the right side of the page in a float. Now, any inside content that needs to be cleared can be safely cleared without clearing the sidebar too:

<div id="sidebar"> (CSS, float: left</div>
<div id="content">
<div>stuff stuff stuff...</div> (CSS, float: left
<p>this p needs to clear the div above</p>
</div>

Here, #content would need to be floated left so that <p> could clear <div> without also clearing <sidebar>.

There is likely another technique but my brain is addled from heat and I can't think of it.

So if you don't already have a container around just the stuff you want cleared, then you'll have to make one.

*edit, I looked at the page, you are talking about the footer? You could re-set-up your CSS, cause like currently you have all these classes you don't need.

Instead of the footer content classes, just say in CSS:
#footer #container div {
width: blah;
float: left;
}
And keep the .long class for the wider one
#footer #container .long {
new width;
}

In the meantime, those are floating insde #container who has a set width... I don't see why you can't just have your new div coming right after .long with it's own class and simply clearing the footer-content divs... who else would that clear?? I must be missing it.

<footer>
<container>
<div>floated</div>
<div>floated</div>
<div>floated</div>
<div>floated</div>
<div.long>floated</div>
<div.newline>clear: left; float: none;</div>
</container>
</footer>

You could put overflow: hidden on #container to wrap the floats and set the new div outside (and under) #container but I don't see why you'd need to do that.

Uh or I need to see a picture of what you WANT it to look like, but I'm leaving teh Internets tomorrow for a week in the dark Finnish woods : )