Prev: Pseudoclass link doesen't work in Firefox 3
Next: Table Borders (was : My VALID page: technical CSS comments, please0
From: mscir on 10 Jan 2010 17:47
I have two vertical column divs to hold the main page content, the left
menu div is floated left and about 200px wide. The right main content
div is about 700px and is not floated, it has a 200px left margin to
position it to the right of the floated div. Both are several thousand
pixels tall.

I place small image/text divs roughly 200px tall that have borders in
the right main column to display text and images in some places, and
float the image inside that image/text div to the right or left so the
text flows around it. To get the image/text div to include the floated
image (so its lower border is below the image) I use an empty div to
clear the floated content after the image:

..Lfloat{ float: left; }
..clear{ clear: both; }

<img class='Lfloat' ...>
<div class='clear'></div>

But this pushes the bottom border of the small image/text div to the
bottom of the floated left column if it occurs above that. So if the
left menu column is 2000px tall and the top of the image/text div is
800px down the page, the bottom of the image/text div will be 2000px
down the page.

I'm obviously missing something basic and not using clear correctly,
what do I need to read to help me understand how to float a left column,
and still be able to use clear in a column to the right of that?

Thanks,
Mike

--- news://freenews.netfront.net/ - complaints: news(a)netfront.net ---
From: mscir on 10 Jan 2010 21:31
dorayme wrote:
> In article <hidld8$2pnt$1(a)adenine.netfront.net>,
> mscir <mscir(a)yahoo.com> wrote:
>
>> I have two vertical column divs to hold the main page content, the left
>> menu div is floated left and about 200px wide. The right main content
>> div is about 700px....
>
>> I'm obviously missing something basic and not using clear correctly,
>> what do I need to read to help me understand how to float a left column,
>> and still be able to use clear in a column to the right of that?
>>
> First you might provide a URL of your best shot. Second say what browser
> you are having trouble in because there are lots of float bugs in IE and
> some are really tricky. And third maybe this might give a tip on basics:
>
> <http://netweaver.com.au/floatHouse/>

Hi dorayme,

Thanks for your reply, one page is here:

http://thirdparadigm.org/3p_003.php

There's a div in the right column with a green background that starts
with the text, "Along with reducing passive" that is stretched to the
bottom of the left column. And I inadvertently introduced a white space
above and after the left and right columns in IE. Augh! I'll read
through the tutorial, thanks.

Mike


--- news://freenews.netfront.net/ - complaints: news(a)netfront.net ---
From: mscir on 11 Jan 2010 07:29
Chris F.A. Johnson wrote:
> On 2010-01-11, mscir wrote:
>> dorayme wrote:
>>> In article <hidld8$2pnt$1(a)adenine.netfront.net>,
>>> mscir <mscir(a)yahoo.com> wrote:
>>>
>>>> I have two vertical column divs to hold the main page content, the left
>>>> menu div is floated left and about 200px wide. The right main content
>>>> div is about 700px....
>>>> I'm obviously missing something basic and not using clear correctly,
>>>> what do I need to read to help me understand how to float a left column,
>>>> and still be able to use clear in a column to the right of that?
>>>>
>>> First you might provide a URL of your best shot. Second say what browser
>>> you are having trouble in because there are lots of float bugs in IE and
>>> some are really tricky. And third maybe this might give a tip on basics:
>>>
>>> <http://netweaver.com.au/floatHouse/>
>> Hi dorayme,
>>
>> Thanks for your reply, one page is here:
>>
>> http://thirdparadigm.org/3p_003.php
>
> There are input boxes that do not fit into their column:
> <http://cfaj.freeshell.org/testing/thirdparadigm.jpg>

Chris,

Thanks for going to the trouble of posting the image, I appreciate it.

I had checked the pages in XP but I forgot to check them in Linux, is
that where you saw the problem?

Right now I think I've managed to remove the white space from IE, fix
the left column problem on 3p_003.php, and and make the text boxes the
correct width, at least on my browsers:

XP: IE, FF, Opera, Safari
Linux: FF, Opera

Thanks Again,
Mike

--- news://freenews.netfront.net/ - complaints: news(a)netfront.net ---
From: mscir on 11 Jan 2010 08:52
dorayme wrote:
> In article <hidld8$2pnt$1(a)adenine.netfront.net>,
> mscir <mscir(a)yahoo.com> wrote:
>
>> I have two vertical column divs to hold the main page content, the left
>> menu div is floated left and about 200px wide. The right main content
>> div is about 700px....
>
>> I'm obviously missing something basic and not using clear correctly,
>> what do I need to read to help me understand how to float a left column,
>> and still be able to use clear in a column to the right of that?
>>
> First you might provide a URL of your best shot. Second say what browser
> you are having trouble in because there are lots of float bugs in IE and
> some are really tricky. And third maybe this might give a tip on basics:
>
> <http://netweaver.com.au/floatHouse/>

dorayme,

Thank you for the tutorial link, it was very informative and pretty
funny at times.

http://netweaver.com.au/floatHouse/page7.php

Using clear: right; instead of clear: both; did exactly what I needed.

Thanks Again for the very helpful advice,
Mike

--- news://freenews.netfront.net/ - complaints: news(a)netfront.net ---
 | 
Pages: 1
Prev: Pseudoclass link doesen't work in Firefox 3
Next: Table Borders (was : My VALID page: technical CSS comments, please0