Member Avatar for newbie14

Dear All,
I have a page here . 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
  • 110 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

A few quick, practical points to get the two-column layout stable across browsers (and to make the form labels sit next to their fields). was right to point at floats as the basic approach and correctly spotted that a fixed, centered paragraph rule is shifting things inward — those two facts explain most of the cross‑browser differences you saw. The remaining common causes are a syntax error in the CSS (browsers react differently to broken rules), and column widths that don’t actually fit the parent so the second column drops below.

Recommended fixes you can apply right away

  • Reset the page edge and use a consistent box model so widths behave predictably:

    html, body { margin: 0; padding: 0; box-sizing: border-box; }

  • Replace fragile floats with a reliable two-column layout using flexbox (widely supported and easier to reason about):

    .container { display: flex; align-items: flex-start; gap: 10px; }
#leftcolumn { width: 300px; }
#rightcolumn { flex: 1; }

    If you must keep floats, make sure each floated column is given a width and the combined width (plus padding/border) fits the parent. To contain floats without extra markup, give the parent a new block formatting context:

    .container { overflow: auto; }

  • Fix the form label spacing by turning each label+control into a small flexible row (easier than fiddling with table cells):

    .form-row { display: flex; align-items: center; gap: 8px; }
.form-row label { width: 140px; }

Troubleshooting checklist

  • Inspect the page with devtools → check computed widths/margins and which rules are active.
  • Look for invalid declarations (a property in the wrong place) and a missing standards DOCTYPE.
  • Read up on layout choices: Flexbox guide (MDN) and how floats/clear behave (MDN).

Recommended Answers

All 12 Replies

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 newbie14

Dear Arkinder,
Can you visit here ? All is fine but only problem I want the menu to start from the left edge.

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.