?
Solved

Alignment and screen resolution

Posted on 2003-03-06
6
Medium Priority
?
183 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

765 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