Div position problem.

[newbie14]

Dear All,
I have a page here http://183.78.169.54/tree/1.html. I have split into 2 div side by side the problem when it appear on the browser it appear the form div is below the tree div. How to make it appear side by side exactly and the tree div to start exactly from left. Secondly my form have table strucuture but the label and the contents are far separate how to make them side by side too.

[G&G Designing]

add

float: right;

to the content and

float: left;

to the dropdown menu

Try that...

[newbie14]

Dear Bryan,
I have two div set in my css with your suggestion #leftcolumn { width: 300px; left:0px; float: left} and #rightcolumn {width: float: right}. Can you visit my link it works fine in the firefox not in IE and Chrome. Another thing it does not start from 0px left either. Thank you.

[G&G Designing]

Set a width on #rightcolumn

[Arkinder]

Remove the width from this rule in your CSS.

p {
    margin: 0 auto;
    padding: 1em 0;
    width: 680px;
}

Regards
Arkinder

[newbie14]

Dear Arkinder,
Can you visit here http://183.78.169.54/tree/1.html? All is fine but only problem I want the menu to start from the left edge.

[Arkinder]

You're floating the right column to the left. Instead, use clear: left; to make it start on the next line.

#rightcolumn {
    clear: left;
    width: 380px;
}

Regards
Arkinder

[newbie14]

Dear Arkinder,
Actually what is the job of the clear?

[Arkinder]

I'll let the W3C explain it. :)

If you would like for me to paraphrase it, just let me know.

Regards
Arkinder

[newbie14]

Dear Arkinder,
I have visited the side. So the clear also have the left element in it I am confuse there?

[Arkinder]

No, the clear property makes the element be below the bottom outer edge of any floating element. Basically you could say that it makes it start on a new line.

Regards
Arkinder

[newbie14]

Dear Arkinder,
Based on the link I notice this Value: none | left | right | both | inherit. So what are you trying to explain to me is not so clear?

[Arkinder]

The default value is none, and you cane set it to the others.

<div id="floating_division">
</div>

<div id="cleared_division">
</div>

#floating_division { width: 100px; float: left;}
#cleared_division { clear: left;}

Let's say that we wanted #cleared_division to start on a new line, or appear below #floating_division instead of beside it. We use clear: left; because #floating_division is being floated left. If #floating_division were floating right, you would use clear: right; If there were several divisions before #cleared_division, some floating left, and some floating right. Then you would use clear: both; which clears the left and right.

Let me know if you still don't understand.

Regards
Arkinder