?
Solved

Alignment and screen resolution

Posted on 2003-03-06
6
Medium Priority
?
184 Views
Last Modified: 2010-04-09
Hi,

I have two components that I want on the same line of my HTML page but on opposite sides, eg

<item1>                         <item2>

where the distance between item1 and item2 is the width of the browser window.

How can I code this so the items are aligned as said regardless of the screen resolution ?, i.e. to not simply tab item2 along until it is on the RHS, as this is clearly dependent on the resolution of the viewers' screen.  I know it can be done as many web pages resize their content as the user resizes the window, but don't know how.

Thanks in advance.
0
Comment
Question by:mrwad99
  • 3
  • 2
6 Comments
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8080596
>>>where the distance between item1 and item2 is the width of the browser window.


Do you mean you want 800 pixels the distance between item1 and item 2 if the screen is 800 x 600
 
or do you want item1 on the far left of the screen and item2 on the far right
0
 
LVL 19

Author Comment

by:mrwad99
ID: 8080670
Yeah the latter; item1 on the left hand side and item2 on the right hand side.  The formatting on Frontpage will not allow me to have the things on the same line with one right align and the other left align, but surely it can be done somehow...

If not I can cope with the items being on separate lines, but one on the far right (item2) and the other on the far left (item1) and sticking like this when the resolution is increased or decreased.

For example, if I, working on 1024 X 768 were to accomplish this via tabbing, a person viewing the same page on say a 800 X 600 resolution would have item2 stuck beneath item1, due to the 'wrapping' because of the tab characters.  A viewer on a resoultion > 1024 X 768 would find that item2 would be more towards the centre of the screen.

Hope this clarifies the requirements.

Cheers.
0
 
LVL 17

Accepted Solution

by:
dorward earned 100 total points
ID: 8080751
<div style="width: 100%; margin: 0; padding: 0;">
 <div style="float: left; width: 45%;">Left</div>
 <div style="float: right; width: 45%;">Right</div>
 <div style="margin: 0; padding: 0; clear: both; height: 0;"></div>
</div>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 19

Author Comment

by:mrwad99
ID: 8080965
Magic dorward; just what I wanted.

Cheers !
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8080977
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>item1</td>
    <td>
      <div align="right">item2</div>
    </td>
  </tr>
</table>
</body>
</html>
0
 
LVL 19

Author Comment

by:mrwad99
ID: 8081026
Also works, thank you jaysolomon; just edged by dorward though.

Thank you for the effort anyway; it is good to know you kind of people are out there to solve these issues !

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question