6 replies [Last post]
jag5311
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2003-08-28
Posts: 12
Points: 0

Hey everyone,

Well, here is the deal, I have been working on a redo of my site and I feel I am on my way very nicely. Everything seems to be working out, especially with IE 6.0, Mozilla 1.4, Opera 7, and Firebird (latest build).

here is the link in advance, and there is more information below
http://www.btkdesigns.com/newbtk/practice.htm

css file
http://www.btkdesigns.com/newbtk/practice.css

I have an area called "contentarea" and it is located in a div. It looks like this

<div id="contentarea">
<div style="clear:both"></div>
<div class="inner">
<div id="column1">
<h2>About me </h2>
<p>blahblahblah</p>
</div>
<div id="column2">
<h2> Latest </h2>
<p>blahblahblah</p>
</div>

I have <div id="column2"> set in my style to be float: right;

It floats right alright, but not up to the top.

Then, the footer. It appears in my site structure that the footer is in the appropriate place, except in some browsers, the text-align: center; that I gave it makes it center compared to the first column, not the whole thing.

Any help you can provide me would be awesome.

Thanks
Bryan

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Trouble with Float: right

Hi jag5311,
A couple of things you could try.

    Float the first column. Give the content area a width.
    Adjust the width of the right column to see if it floats into the correct position.
Sorry I'm out of time but shall check back later to see how you went.

[/]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Trouble with Float: right

Hi jag5311,
if you float column 1 and reduce the left margin

#column1 {
    float:left;
	margin: 0px 0px 10px 5px;
the boxes come up to the same level.
You should then be able to adjust the margins etc to get the look your after.

Hope that helps.

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Trouble with Float: right

Hi Bryan (me again),

You haven't been listening to my lessons have you Smile

A floated element must be the first element in the container in order for the following text to wrap. You must change the positions of column 1 and 2 around in your html. A floated element will float as high in the container as it is allowed but will not float above content that is above it. It will float to the side and the following content will wrap. (If you check my previous examples to you you will see that this position is maintained.)

Also you have set the widths too wide so that the float will drop anyway. There must be room for it to float so change your column widths and paragraph widths to suit.

Also, you have omitted to add the unit (eg px) on the end of quite a few of your sizes. Mozilla will not like it! You must specify a unit when declaring a size (except 0 of course).

Sorry for posting again but I couldn't help myself Wink

Paul

jag5311
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2003-08-28
Posts: 12
Points: 0

Trouble with Float: right

Thanks for the responses,

Hey Paul,

I have been listening to your answers, but lately I have asked alot of questions and received alot of answers from you, so I may have missed one or two that flew past my head.

I understand now how floating works.

JUst for sanity sakes,

What does it refer to when mentioning CLEAR: left, right, or both? I know you provided that example into my current page, but I am still not clear on why.

Thanks

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Trouble with Float: right

Hi Bryan,

I was only joking about not listening Smile

Clear prevents an element from being displayed next to floated elements.

Content following a float will wrap around the float. Therefore if you want to make sure that a following element doesn't get wrapped then you use clear:both. This means that both sides of the container will be free from floats. If you specified clear:left then only the left side of the container would be cleared but the right side would be allowed to have a float.

The clear:left/right/boyh etc can be applied to floats so that they only float if no other floats are at the side specified otherwise they will move until they can float.

The best way to see is just to put a few floats and static content on a page and play around with it.

If a float is too big for its container mozilla will let the float overwrite the container and extend outwards. (Ie incorrectly i think increases the container to compensate which is usually what you want.). The way to get around this is to follow a float with an empty div that has clear:both.

e.g.
<div style="clear:both"></div>

If this is placed after floated content but in the same container then mozilla will increase the container to contain the float and the empty div. (Sometimes just setting the float or the container (or both) to position relative will sometimes make mozilla enclose the float when it is too big for its container.)

Hope this explains it.

Paul

nswan
Offline
Regular
Last seen: 16 years 1 week ago
Joined: 2003-07-14
Posts: 20
Points: 0

Trouble with Float: right

Perhaps, I'm way off, but have you tried adding 'position: absolute;' for the first column and 'position: relative;' for the second column. I'm doing something similar, and that worked for me.

Also, this article might help:

http://www.alistapart.com/stories/flexiblelayouts/