	[x] Posted via EE Mobile
	Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

Question

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

8.3

2 DIV tags next to each other that need to move dependent on screen res

Asked by TestieMcTest in Extensible HTML (XHTML), Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)

Tags: xhtml, css

Hello,

Im currently redesigning some of our web pages and converting from tables to DIVs using xhtml transitional.

On the page im having issues with i need to position div 1 (which containts text) and div 2 (which contains a series of ticks) next to each other. I've positioned them how i need them but i need to make them change position depending on the screen resolution of my visitors.

If i change my res it works fine but it soon starts to put the ticks on the opposite side to where i need them. This is causing me a major headache at the moment and im struggling with the whole positioning side of CSS.

hopefully the attached screenshot can explain it better.

What i want is the ticks that are covering the text to move to the left dependent on resolution BUT i only want them to move so far accross before the browser wont allow them to go any further, so that obviously they wont cover the text.

View the Solution FREE for 30 Days

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:

           
           
             div layout;
 
<body>
<div class="wrapper"><!--begin wrapper div class-->
 
 
<div class="header"><span class="phone">Tel: 0845 344 0234</span></div><!--Begin header div class, followed by phone span class/End header and phone class-->
 
<div id="content"><!--Begin content div id-->
	<div id="welcome"><!--Begin welcome div id-->
    
    	<p> Thank you for choosing 
			<span class="oci">One Call Insurance Ltd.</span> All of our policies offer the following benefits and services.<br /><br />Your benefits* with <span class="oci">One Call Insurance Ltd</span> include
        </p> 
        
    </div><!--End of welcome div id-->
  <div id="benefits"><!-- Begin benefits div id-->
    	<p>
        	<span class="oci">One Call's</span> No Claims Discount Guarantee<br />
            <span class="oci">One Call</span> Breakdown Cover<br />
            Use of a courtesy car<br />
            <span class="oci">One Call</span> Legal Service<br />
            Cover while driving in the EU<br  />
            Personal Accident Cover<br  />
            24 Hours Claims Service<br  />
            UK only call centres
        </p>
    </div><!--end benefits div ID-->
    <div id="ticks"><!--Begin tick div id-->
    	<p>&radic;<br  />
        &radic;<br  />
        &radic;<br  />
        &radic;<br  />
        &radic;<br  />
        &radic;<br  />
        &radic;<br  />
        &radic;
        </p>
    </div><!--End of ticks div id-->
    
    <div id="sp"><!--begin SP div ID-->
    </div><!--end SP div id-->
        
 
 
</div><!--End content div id-->
 
 
 
 
</div><!--End wrapper div class-->
</body>
 
 
 
 
css code;
 
.header {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFF;
	background-color: #006;
	height:20px;
}
 
.wrapper {
	height: auto;
	width: 95%;
	left: 2%;
	top: 9px;
	right: 2%;
	bottom: 2%;
	position: absolute;
	margin: 2px;
}
 
div#content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #006;
	border: thin solid #999;
	position: absolute;
	top: 100px;
	width: 75%;
	right: 12.5%;
	padding-left:5px;
	padding-right:5px;
}
 
.oci {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:18px;
	color:#006;
}
 
 
#ticks {
	float: right;
	position: fixed;
	right: 500px;
	
	
}
#benefits {
	float: left;
	
	
}

           
         

Attachments:

positioning.JPG (90 KB) (File Type Details)

screenshot of issue im having

2 DIV tags next to each other that need to move dependent on screen res

Asked by TestieMcTest in Extensible HTML (XHTML), Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)

Tags: xhtml, css

About this solution