Member Avatar for 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.

  • 3 Contributors
  • 12 Replies
  • 103 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Arkinder
Member Avatar for G&G Designing

add

float: right;

to the content and

float: left;

to the dropdown menu


Try that...

Edited by G&G Designing because: n/a
Member Avatar for 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.

Edited by TrustyTony because: fixed formatting
Member Avatar for G&G Designing

Set a width on #rightcolumn

Edited by G&G Designing because: n/a
Member Avatar for Arkinder

Remove the width from this rule in your CSS.

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

Regards
Arkinder

Member Avatar for 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

Member Avatar for newbie14

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

Member Avatar for Arkinder

I'll let the W3C explain it. :)

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

Regards
Arkinder

Member Avatar for newbie14

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

Member Avatar for 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

Edited by Arkinder because: n/a
Member Avatar for 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?

Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.