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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How would I make a margin collapse?

    Hi, I'm new to CSS and HTML and am currently working on my first site. I'm fairly happy with the layout but there's one thing I'd like to fix up:

    I've set the left and right margins of the central container div to a fixed 100 pixels, and the container fills the rest of the space. Therefore when I resize the browser window, the div shrinks and the content re-arranges until the div gets to the width of the header image, which is what I want.
    What I now want when I shrink the window further is for the margins to start collapsing or shrinking, both at once with the content centred in between, rather than the window closing over the right margin and then the rest of the page.
    In case it helps, the site's http://apophysalien.110mb.com

    I hope the description's clear. Thanks in advance for your help.
    Last edited by apophysalien; 11-24-2008 at 01:00 AM.

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello apophysalien,
    I'm not sure I can make your 100px margins colapse...
    There are plenty of other things you can fix:
    You NEED a DocType! Read the link in my sig.

    Here is just one example quoted from your CSS
    Code:
    .shell {
    float:left; 
    margin:100; 
    margin-top:0; 
    margin-bottom:30
    }
    This is both wrong and conflicting. You can't float something without a width. You can't just say 100, you need to say 100px or 100em... the browser need to know what your measuring with.
    It's conflicting because margin:100; refers to all margins but then you have margin-top and -bottom specified otherwise. This should read like this:
    Code:
    .shell {
    width: xxxpx;
    float:left; 
    margin: 0 100px 30px 100px;
    }

    Try this and see if it acts better for you. Try it with and without the min-width setting. Still doesn't collapse the 100px margin but it's a much cleaner, and VALID!!, code for you to start with.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="" content="authored by http://www.nopeople.com/Design/" />
    <style type="text/css">
    html, body {
    	text-align: left;
    	font: 100% "Comic Sans MS";
    	color: #333333;
    	text-decoration: none;
    	background: #99FFFF url(http://apophysalien.110mb.com/background3.jpg) repeat;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #headercontainer {
    	width: 550px;
    	height: 100px;
    	margin: 10px 100px 20px;		
    }
    #tablecontainer {
    	margin: 0 100px;
    	/**min-width: 550px;**/
    	border: 3px double #000;
    	background: url(http://apophysalien.110mb.com/contentbackground2.jpg) repeat;
    }
    </style>
    </head>
    <body>
    <div id="headercontainer">
        	<a href="http://apophysalien.110mb.com/"><img src="http://apophysalien.110mb.com/header.png" width="550" height="100" alt="header" /></a>
        <!--ends headercontainer--></div>
    <div id="tablecontainer">
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
    <!--closes tablecontainer--></div>
    </body>
    </html>
    I'll keep messing around with that margin thing though...
    Last edited by Excavator; 11-24-2008 at 06:02 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Excavator.
    I've been told about DOCTYPES before but I really don't know what exactly they are; just tried using one and it completely messed up the layout, so I guess I'll stick to what I understand. The site seems to display well enough in IE and Firefox anyway, considering it's kinda pieced together from the bits and pieces of (probably horrendously mis-matched) code I've learnt.
    I had thought it was ok to use margin commands that overwrote prior ones, but maybe not ...

    Anyway, thanks for your help, I'd better get to work fixing stuff.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by apophysalien View Post
    Thanks Excavator.
    I've been told about DOCTYPES before but I really don't know what exactly they are; just tried using one and it completely messed up the layout, so I guess I'll stick to what I understand.
    The issue is not with the DOCTYPE. Adding a DOCTYPE triggers the browser to the standard mode, and which would reveal the errors in markup. So, the first step in making a good webpage is, adding a standard DOCTYPE.

    I'd recommend you to read www.alistapart.com/stories/doctype/ and www.w3.org/QA/Tips/Doctype
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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