Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2012
    Location
    Ohio, United States
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post

    Exclamation Can't fix this problem, it's been hours.

    Okay, so I can not figure out this CSS problem for the life of me. The main section to the RIGHT of the list of states, the table of "tests." It looks perfect on my screen but then on my laptops screen, or anything else for that matter, looks awful.

    This is how it should look:


    This is the HTML
    Code:
    <html>
    <head>
    	<title>Work Wanted | Job listings, find work / help today!</title>
    	<link rel="stylesheet" type="text/css" href="inc/styles.css" />
    </head>
    <body>
    <div id="main">
    	<div id="content">
    	<table width="100%" align="center" border="1" cellspacing="1" cellpadding="5">
    	<?php printHeader(); ?>
    	<tr>
    	<td width="100%" valign="top">
    		<?php states(); ?>
    		<div id="container">
    		<!--Start Content-->
    		<div id="index">
    		<table align="center" width="100%" class="test" border="0" cellspacing="1" cellpadding="15">
    			<tr align="left">
    				<th>Posted</th>
    				<th>Title</th>
    				<th>Description</th>
    				<th>Location</th>
    				<th>User</th>
    			</tr>
    		</table>
    		</div>
    		<!--End Content-->
    		</div>
    	</td>
    	</tr>	
    	</table>
    	<?php showFooter(); ?>
    	</div>
    </div>
    </body>
    </html>
    And this is the CSS:
    Code:
    #container{
    	position:relative;
    	margin-bottom:40%;	
    	margin-left:11%;
    	width:88%;
    }
    
    #index{
    	position:relative;
    	margin-top:-61%;
    }

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You're using a fix of margin-top:-61% to drag the table upwards, but the effect of this percentage will be different for different media and screen resolutions (as margin-bottom:40% on the container also affects this).

    I would use floats: float both the list of states and the table (and possibly its parent(s)) to the left.

    It would also be possible to use absolute positioning for the list of states (giving the table's div, or container, a wide-enough left margin) but using floats is usually preferable.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Nickriggi (09-10-2012)

  • #3
    New Coder
    Join Date
    Sep 2012
    Location
    Ohio, United States
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post
    wow, that worked. Thanks so much man!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •