fixed size of a webpage internet explorer

Question

reza.adinata 0 Junior Poster in Training

13 Years Ago

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..

css web-design

Edited 13 Years Ago by reza.adinata because: add code tag, extend code

2 Contributors
2 Replies
88 Views
12 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by teedoff

Reply to this topic

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.

reza.adinata 0 Junior Poster in Training · Answer 1 · 2010-10-26T16:52:56+00:00

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.

teedoff 3 Posting Pro · Answer 2 · 2010-10-26T22:27:59+00:00

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