Best way to contain floating elements?

[Drae]

Hey guys!

 

I currently have some floating elements that I would like to wrap with a non-floating element so that they display in the correct positioning. What is the best way to do this?

[niche]

Please post your code so we can see what you mean. I think you're going to need to float your non-floating div unless you don't mind what it covers.

Edited August 13, 2013 by niche

[Drae]

Here is the coding for the floating elements:

 

 

.drae-bb {float: left;width: 200px;height: 200px;background: #180028;opacity: 1;margin: 10px 6px 10px;padding: 6px;border: 1px solid #2a0044;font-size: 20px;text-align: center;line-height: 3;}

 

They need to be in line within a set space before they then begin a new line below.

 

At the moment I have not coded the non-floating element as when I did earlier it did not contain them.

 

Would it help to see a mockup of what I am trying to accomplish?

[davej]

Would it help to see a mockup of what I am trying to accomplish?

 

Yes, very much so.

[DarkxPunk]

If I am not mistaken to contain would you not use overflow: hidden on the container? Once I see the mockup I will have a better understanding I suppose.

[Drae]

Thanks guys!

 

Here's a basic mock-up. At the moment I have six of the floating elements and ideally would like to part them into two sections (three above in one line, three more below) with the option of adding more. The sidebar on the right hand also floats at the moment and should not overlap with the floating box choices.

 

 

I've done the floating boxes on the left as div classes if that helps (tried spanning it but didn't quite work out). I'm also aiming to make it responsive.

 

Relevant coding is now like this:

.drae-bb {float: left;display: block;width: 10%;height: 200px;background: #180028;opacity: 1;margin: 10px 6px 10px;padding: 6px;border: 1px solid #2a0044;font-size: 20px;text-align: center;line-height: 3;}.drae-bb-con {height: auto;width: 80%;} #side {float: right;margin: 10px 20px 6px 6px;width: 20%;background: #180028;padding: 6px; border: 1px solid #2a0044;height: 600px;padding: 6px;text-align: justify;}

<div class="drae-bb-con"><div class="drae-bb"><a href="/design.html">Website Design</a></div><div class="drae-bb">Forum Design</div><div class="drae-bb">Web Hosting</div><div class="drae-bb">Art Commissions</div><div class="drae-bb">Traditional Animation</div><div class="drae-bb">Report a site on Draebox Hosting</div></div><div id="side"><h2>About</h2><p>Content here.</p><h2>Need Help or Info?</h2>Content here.</p></div>

Edited August 13, 2013 by Drae

[niche]

Based on the mockup, why not float everything? What's the benefit to taking one of the divs out of the flow?

Edited August 13, 2013 by niche

[davej]

I am terrible at CSS, but here is my rough version...

 

http://www.stlnetwork.net/test/private/Drae/index.html

[Drae]

Based on the mockup, why not float everything? What's the benefit to taking one of the divs out of the flow?

 

No reason - just trying to position it correctly (and not have things behind them).

 

Thanks Dave for that example. I'll have a good look at it after work today and then reply here again undoubtedly.