PDA

View Full Version : Moving divs/misaligned



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>

Rowsdower!
Jul 29th, 2010, 05:53 PM
Using position:static; won't allow for left/right top/bottom style rules or for z-index. Static position is actually the default setting for browsers so this isn't actually doing anything for you.

A basic rule of thumb is that position:<whatever> is to be used only sparingly and only when it is relevant to your needs. It's a tempting thing for many new developers, but as time goes by you will find that it isn't quite what you thought it was.

Also, a valid doctype should be used along with html, head, and body tags. Can you show us your full code or a link to your test page?