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 to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Expanding/Shrinking Side Margins?

    Hi all,

    I looked around and searched the site but didn't find anything, so apologies if a similar question has already been resolved.

    I'd like to design a site that has empty space on the sides of the page that can either expand or shrink depending on display size. A good example of what I'm thinking of is the Geek and Sundry site. If you test different resolutions or mess with the browser size, you'll see that the white/black space on the sides either expands (keeping the actual content centered) or shrinks (until only the content is displayed, at which point the site scrolls). The concept I have in mind would be similar, likely with black bars running vertically along each side and expanding/shrinking.

    Is there a simple answer as to what the best way to implement this would be? I've learned a bit about using CSS for more dynamic/responsive layouts, but it's all gotten a bit jumbled and I'm not sure exactly how it applies here (I'm also not sure if it would actually involve margins, but it seemed like the most concise way to put it for the title ). Any help would be greatly appreciated.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,475
    Thanks
    6
    Thanked 980 Times in 953 Posts
    There is nothing fancy or “responsive” here, this has been done since CSS became widely supported in the late 90’s/early 2000’s. You have a container with fixed width and centered, and that’s it.
    Something like this should work:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>Test</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<style type="text/css">
    		html {background-color: black;}
    		body {margin: 0;}
    		#container {
    			background-color: white;
    			margin: auto;
    			width: 900px;
    			min-height: 1000px;
    		}
    		</style>
    	</head>
    	<body>
    		<div id="container">
    			page content here
    		</div>
    	</body>
    </html>
    (I put a minimum height there but in reality this would be controlled by the content)
    Last edited by VIPStephan; 07-03-2013 at 09:29 AM.

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, containers. I knew it had to be simpler than I was making it. Thanks for the help!


  •  

    Posting Permissions

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