0

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: add code tag, extend code

2
Contributors
2
Replies
4
Views
6 Years
Discussion Span
Last Post by teedoff
0

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.

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.