Dreamweaver floats

Question

After all that has been written on floats, I have still been
having trouble in a multicolumn situation because when I try to
clear images and divs in the second column (right column) with left
clears, the clear introduces a gap in the right column down to the
end of the left column. I have tried the techniques written about
in Gallant and Bergevin's tutorials without success, so either I
have some other problem that is in conflict, or I am missing
something.
Furthermore, when I try the hack to overcome the 3 px IE
problem, the
dreamweaver 8 design window falls apart, but curiously the
firefox and safari
browsers (Mac OSX) do not show the problem. Floating the
content div doesn't
seem to work right.
The page in question can be found at
http://cabrackett.com/bella_galleria/the_gallery.html
It looks good in the browsers I have but again has been
hacked by adding some   to
add the white space I want to use the clear for.
chuck

Answer 1

cabrackett wrote:
> The problem is this: I want to clear the text and images
in the right column
> such that the text associated with each image is
adjacent to it with no
> overlaps to prior or subsequent segments. For example:
The section with the
> header Original Art ends at the Verna Bartnick text
item. The next section is
> headed Exhibits, Shows, .... I currently have separated
these two sections by
> putting enough   in so that the following text
doesn't try to sneak up
> under the Verna Bartnick text.
The problem is you have over-complicated the structure by the
over use
of divs and a complex method of combining css classes and
ids..........its not any wonder when you choose this method
and when you
keep inserting empty <h3> tags, empty <p> tags,
use two or three classes
to do the same thing problems arise and it quickly gets out
of control
You only need 6 simple <div> containers to house your
diferent sections.
Use this method, its simple, not complex. Comment where the
<div> ends.
At the moment you have so many div tags in there its hard to
see which
belongs to which. Many are doing nothing.
<div id="one">
<img src="yourImage.jpg" alt="gallery photo" width="331"
height="249"
class="rightimage">
<h3>Enriching Lives ...</h3>
<p>The Bella Galleria has caused many "wows" from first
time visitors
who are
stunned at the large display of original artwork as they
enter the Old
Mission Tavern and are beckoned into the gallery.</p>
<p>Artwork is generously displayed in the restaurant as
well.</p>
<br style="clear: both;" />
</div><!-- end one -->
Six very simple containers as above, using a br clearing at
the end of
each will give you what you want.
> If I put in a clearing <br/> then the page
separates because it clears down
> through the end of that medium blue left column. That is
not what I want to
> happen.
If this is happening then you have something else in your
code/css which
is making that happen.
Build the section in a new document and then import it into
your page.
If it works in an independent document but not within the
page itself
its obviuosly you have troubles which run to greater depths.
In all seriousness I could take hours to unravel the mess in
your code
and it would only take 30-40mins to completley rebuild from
the ground up.
The key is YOU MUST be aware at all time what you are doing.
If you are
not and you dont test practically after everything you do
(until you get
more experienced) you will soon end up a creek without a
paddle.
> So, the way it looks as you see it does not show the
problem. Try changing
> your browser's text size downward and watch the various
text blocks move up and
> around the images. I don't want that to happen.
It shows the issue when I down size the text but if you use
the very
simple method I give above and try and slimline the amount of
css which
is doing the same thing your life will become far easier