Member Avatar for reza.adinata

Hi,

I am new in css and html, and trying to set up a page with a fixed size of a page.
I basically set up a position of a table using this

<body>
<div class="boxleft">
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>

<div class="boxright">
<select>
  <option value="a">A</option>
  <option value="b">B</option>
</select>
</div>
</body>
<style type="text/css">
div.boxleft
{
    float: left;
    padding: 25px;
}

div.boxright
{
    position: absolute;
    right: 5px;
    top: 150px;
    width: 140px;
}

body
{
margin-top: 1px;
margin-right: 700px;
margin-bottom: 10px;
margin-left: 10px;
}

</style>

and it is shown perfectly in google chrome. The two box allign with each other on the middle.
However, in internet explorer, the boxright is shown as out of the frame (shown on very right), where there is suddenly a draggable bar from left to right in the bottom of the page.
How can I fix this in internet explorer, so it does not show a draggable bar that extends the page to the right (and will show perfectly like in google chrome).
I am using internet explorer 7, and google chrome 7.0

thank you for any guidance..

Edited by reza.adinata because: add code tag, extend code
  • 2 Contributors
  • 2 Replies
  • 100 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

As discovered, the symptom (Chrome OK, IE7 shows a horizontal scrollbar and the right box pushed off) usually comes from mixing large page-level margins with absolutely positioned elements and/or being in quirks mode. is right to point out that margins add to the total page width and can force an overflow in some browsers.

A robust fix is to stop using a big body margin as layout and instead use a fixed-width wrapper centered with position: relative. Put the right-side element inside that wrapper and use position: absolute so it’s positioned relative to the wrapper, not the viewport. Also reset body margins to zero and use a standards DOCTYPE so IE uses the modern box model.

Example layout pattern:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body { margin: 0; padding: 0; }
.container { width: 900px; margin: 0 auto; position: relative; }
.left { float: left; padding: 25px; }
.right { position: absolute; right: 5px; top: 150px; width: 140px; }
</style>
</head>
<body>
<div class="container">
  <div class="left">…</div>
  <div class="right">…</div>
</div>
</body>
</html>

Quick troubleshooting checklist:

  • Ensure a proper DOCTYPE so IE isn’t in quirks mode (MDN: doctype).
  • Inspect computed sizes in the browser dev tools and temporarily outline elements to find the overflow.
  • Prefer containing the absolute element in a positioned wrapper; avoid huge body margins.
  • Use overflow-x:hidden on html/body only as a last resort (MDN: overflow-x). For how position:absolute containment works, see MDN: position.
Member Avatar for reza.adinata

Hi,

I am new in css and html, and trying to set up a page with a fixed size of a page.
I basically set up a position of a table using this

<body>
<div class="boxleft">
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>

<div class="boxright">
<select>
  <option value="a">A</option>
  <option value="b">B</option>
</select>
</div>
</body>
<style type="text/css">
div.boxleft
{
    float: left;
    padding: 25px;
}

div.boxright
{
    position: absolute;
    right: 5px;
    top: 150px;
    width: 140px;
}

body
{
margin-top: 1px;
margin-right: 700px;
margin-bottom: 10px;
margin-left: 10px;
}

</style>

and it is shown perfectly in google chrome. The two box allign with each other on the middle.
However, in internet explorer, the boxright is shown as out of the frame (shown on very right), where there is suddenly a draggable bar from left to right in the bottom of the page.
How can I fix this in internet explorer, so it does not show a draggable bar that extends the page to the right (and will show perfectly like in google chrome).
I am using internet explorer 7, and google chrome 7.0

thank you for any guidance..

Solved : just play around with the margin, and change the position to absolute.

Member Avatar for teedoff

Remember, not only widths but margins play into the width of the page in relation to the browser and available screen resolution.

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.