Floating elements

HTML & CSS
1

Hello:

Can I have floating elements (ex. squares) within other floating elements (ex. columns)? And what do I need to do to position and clear the floats of the first ones?

Here’s the code:

http://codepen.io/CarolinaSawney/pen/eNZOpV

In section on Layout and floats, under float left, I want to have 3 small squares floating for the float left example.

Thanks.

2

The top level floats will need some sort of clearing mechanism in place.

http://www.codefundamentals.com/blog/clearing-and-containing-floats

The inner floats will need nothing done because floats are a containing mechanism for floats :stuck_out_tongue: .

The best way to help, is with a code sample. If you run into trouble please do give us an example where we can help :slight_smile: .

3

I added the code now, thanks.

4

Ok now what exactly is your issue? I see the 4 columns are floated but I don’t see any inner floats.

PS - A HTML/CSS reference? I was starting one too :stuck_out_tongue: . Until I saw this - The Best CSS Reference website you might want to bookmark

5

I created this code to style it as squares, but the squares aren’t showing. And as I was trying to do it, it was messing up my following column.

 <h1>Layout</h1>
    <h2>Floats</h2>
    <p id="floatLeft">Float left</p>
       <div id="floatLeftContent1"><div>
            <div id="floatLeftContent2"><div>
                <div id="floatLeftContent3"><div>
6

Are floatLeftContent1/2/3 all floated? In that example? (I assume this example is an example of the entire page structure you have.)

7

Yes, look at section 8, line 555.

If I don’t add the code for the floated squares, then the following column is floating in the right position.

By the way, I’ve printed your article, looks good.

8

http://codepen.io/ryanreese09/pen/xGVKrM

I’m not sure why you are setting heights on everything. I’m unsure what you want from here. Your code is a bit messy and I’m currently unsure of what floatLeftContent1/2/3 are going to do. Can you fill in the content and tell me how you want it to display?

9

Below Float right, I want to create 3 small squares floating left. The same where it says float right, to show the example.

10

That’s so little space though - how do you expect this to scale down at all?
http://codepen.io/ryanreese09/pen/xGVKrM
I removed the floats from floatContentLeft1/2/3 for now, along with the widths/heights. Also, what exact text do you want per line. Background color covering what? I’m not very smart please spell it out :slight_smile: .

11

I’m getting there. I guess I have to put that within a div now, so they float alongside.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.