Jump to content

Best way to contain floating elements?


Drae
 Share

Recommended Posts

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 by niche
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

 

post-103210-0-71583100-1376426907_thumb.png

 

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 by Drae
Link to comment
Share on other sites

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

Edited by niche
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...