smrkangl
Jul 29th, 2010, 06:10 AM
Hi, I am currently making a layout using two divs on the same page. On my current resolution, 1280x1024, everything is fine and aligned properly. However, when I view it on my laptop with a smaller resolution the divs move and aren't where they are supposed to be anymore.
Specifically, the div titled "hi" moves to the left. Can someone please help me to fix this? Thanks!
<div id="content" style="position: absolute; overflow: auto; z-index: 3; text-align: left; left:
540px; width: 315px; text-align: justify; top: 305px; height: 400px;">
<h1>hello</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan, felis at commodo adipiscing, felis ligula rhoncus nunc, sit amet feugiat sem lectus vel lacus. Curabitur dapibus, libero at venenatis lacinia, felis augue egestas libero, quis hendrerit massa erat sed sem. Donec sodales semper massa, pharetra placerat eros condimentum vitae. Fusce ornare pellentesque porta. Aenean semper enim vitae nisi aliquam interdum. Suspendisse potenti. Nulla ut facilisis sapien. Donec consectetur, dui sed porta dignissim, augue ipsum suscipit justo, in pulvinar metus dui tristique augue.
</p>
</div>
<div id="content" style="position: static; overflow: auto; z-index: 3; line-height: 14px; text-align:
left; right: 280px; width: 112px; text-align: justify; top: 305px; height: 400px;">
<h1>hi</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan, felis at commodo adipiscing, felis ligula rhoncus nunc, sit amet feugiat sem lectus vel lacus. Curabitur dapibus, libero at venenatis lacinia, felis augue egestas libero, quis hendrerit massa erat sed sem. Donec sodales semper massa, pharetra placerat eros condimentum vitae. Fusce ornare pellentesque porta.
</div>
Specifically, the div titled "hi" moves to the left. Can someone please help me to fix this? Thanks!
<div id="content" style="position: absolute; overflow: auto; z-index: 3; text-align: left; left:
540px; width: 315px; text-align: justify; top: 305px; height: 400px;">
<h1>hello</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan, felis at commodo adipiscing, felis ligula rhoncus nunc, sit amet feugiat sem lectus vel lacus. Curabitur dapibus, libero at venenatis lacinia, felis augue egestas libero, quis hendrerit massa erat sed sem. Donec sodales semper massa, pharetra placerat eros condimentum vitae. Fusce ornare pellentesque porta. Aenean semper enim vitae nisi aliquam interdum. Suspendisse potenti. Nulla ut facilisis sapien. Donec consectetur, dui sed porta dignissim, augue ipsum suscipit justo, in pulvinar metus dui tristique augue.
</p>
</div>
<div id="content" style="position: static; overflow: auto; z-index: 3; line-height: 14px; text-align:
left; right: 280px; width: 112px; text-align: justify; top: 305px; height: 400px;">
<h1>hi</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan, felis at commodo adipiscing, felis ligula rhoncus nunc, sit amet feugiat sem lectus vel lacus. Curabitur dapibus, libero at venenatis lacinia, felis augue egestas libero, quis hendrerit massa erat sed sem. Donec sodales semper massa, pharetra placerat eros condimentum vitae. Fusce ornare pellentesque porta.
</div>