How to force 2 DIVs one after another to start on new lines?

[WorldNews]

Hello,

I have a set of images displayed in a DIV like this:

'<div class="image-float-left" style = "float: left;">' . $image_code. '</div>'

And I want to place under these images another DIV, where the buttons are loacted.
However, whatever I do the DIV that is to contain the buttons rather being located beneath the
DIV containing the images is always located to its RIGHT!!

What does one need to include in the DIVs coming after:

'<div class="image-float-left" style = "float: left;">' . $image_code. '</div>'

to force this 2nd DIV to get located beneath it and not to its right?

ThanX.

[ralph.m]

We'd need to see this in context to know what's going on here.

[Paul O'B]

Hello,
And I want to place under these images another DIV, where the buttons are loacted.
However, whatever I do the DIV that is to contain the buttons rather being located beneath the
DIV containing the images is always located to its RIGHT!!

What does one need to include in the DIVs coming after:

'<div class="image-float-left" style = "float: left;">' . $image_code. '</div>'

to force this 2nd DIV to get located beneath it and not to its right?

ThanX.

As the images are floated then obviously any following content will sit to the side of the image unless you set it to clear or don't float the image at all.

If you want pairs of elements floated then wrap them both in a parent div and float the parent instead.

<div class="image-float-left" style="float: left;">
' . $image_code. '

<div class="button">Button</div>
</div>

or

<div style="float: left;">
 <div>' . $image_code. '</div>
<div class="button">Button</div>
</div>

However as Ralph said we'd probably need to know more about what you have in place already.

[WorldNews]

Hello,

I did what you suggested but it is not working.

You can see a sample page here:
http://www.anoox.com/news/profile_update_new.php

This is a password protected section, so enter with these login info:
Username: test-account
Password: test_temp

ThanX

As the images are floated then obviously any following content will sit to the side of the image unless you set it to clear or don't float the image at all.
If you want pairs of elements floated then wrap them both in a parent div and float the parent instead.

<div class="image-float-left" style="float: left;">
' . $image_code. '

<div class="button">Button</div>
</div>

or

<div style="float: left;">
 <div>' . $image_code. '</div>
<div class="button">Button</div>
</div>

However as Ralph said we'd probably need to know more about what you have in place already.

[ralph.m]

There are better ways to do this, but adding clear: both to the div underneath will get you what you want:

<div align="center" style="display: block; block; width: 100%; border: blue 1px solid; clear:both;">

[WorldNews]

Thanks. This worked.
I tell you though this darn CSS has given me so many headaches
I dont know why but some how I have never fully grasped its nuances!

Have good day anyway & happy new year

There are better ways to do this, but adding clear: both to the div underneath will get you what you want:

<div align="center" style="display: block; block; width: 100%; border: blue 1px solid; clear:both;">

[ralph.m]

I tell you though this darn CSS has given me so many headaches

Yes, I guess the key is to understand its nature, and how it relates to HTML, so that you can picture from the beginning the best way to set up your HTML. If you haven't already, I recommend getting a book or taking a course that builds the concepts from the ground up.

[WorldNews]

What do you think is a best book on mastering CSS?
FYI, I did buy a book or 2 here from SitePoint about this subject but they were not that good.
ThanX.

Yes, I guess the key is to understand its nature, and how it relates to HTML, so that you can picture from the beginning the best way to set up your HTML. If you haven't already, I recommend getting a book or taking a course that builds the concepts from the ground up.