Thread: Margin moves

Page 2 of 2 First 12
  • Jump to page:
    #16
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0
    Originally Posted by jack13580
    Delete float left on the middle div and move your middle div under the other 2 and it will automatically be in the middle

    You also have an extra ; with your padding on your middle div
    Didn't work.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	min-width: 1000px; 
    	margin: 20px;
    	border: 2px solid #999;
    	background: #0f0;
    }
    	#left {
    		width: 360px;
    		padding: 20px;
    		float: left; 
    		border-right: 2px solid #999;
    	}
    	#middle {
    		padding: 20px;
    		width: 5px;
    		background: #ccc;
    		float:left;
    
    	}
    	#right {
    		padding: 20px;
    		overflow: auto;
    		background: #fcc;
    	}
    	/*#left, #right, #middle {height: 600px;} demo only*/
    </style>
    </head>
    <body>
    	<div id="container">
            <div id="left">
                <h2>left column</h2>
    		</div>
    		<div id="right">
    			<h2>right column</h2>
    			<p>
    				Float your left column left and <em>overflow: auto;</em> fits your right column into 
    				what space is left over.
    			</p>
    		</div>
    		<div id="middle"></div>
    	</div>  
    </body>
    </html>
  2. #17
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    change your CSS to the CSS below

    Code:
    	body {
    		margin: 0;
    		font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    		color: #000;
    		background: #fc6;
    }
    	#container {
    		width: 95%;
    		margin: 20px;
    		border: 2px solid #999;
    		background: #0f0;
    }
    	#left {
    		width: 36.3%;
    		padding: 20px;
    		float: left;
    		border-right: 2px solid #999;
    		height: 200px;
    	}
    	#middle {
    		padding: 20px;
    		width: 50px;
    		background: #ccc;
    		position: absolute;
    		height: 200px;
    		margin-left : 39.9%;
    	}
    	#right {
    		width: 40%;
    		padding: 20px;
    		background: #fcc;
    		float: right;
    		height: 200px;
    		border-left: 2px solid #999;
    	}
    	#clear {
    		clear: both;
    	}
    add <div id="clear"></div> below the middle div



    just to tell you the calculations I used are to make it work on my iPad and it my not work on a different screen size so change it accordingly

    I do not recommend using this design as it is very unpredictable
    Last edited by jack13580; April 9th, 2013 at 11:53 PM.
  4. #18
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0
    Thanks! I am looking for a very predictable method. What would be that?
    Last edited by Kravvitz; April 10th, 2013 at 02:42 PM. Reason: must we quote the whole post? :p
  6. #19
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Fixed heights and absolute positioning is not a flexible solution.

    Here check out this 3 column layout.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #20
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0
    Where is a good place to read about the latest CSS layout practices, like the example we're dealing with in this thread?
  10. #21
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0
    Originally Posted by Kravvitz
    Fixed heights and absolute positioning is not a flexible solution.

    Here check out this 3 column layout.
    Do you know a good place to read about the common practice of using margins for layout, and labels and input fields for forms? Where is a good place to read about the latest CSS layout practices, like the example we're dealing with in this thread?
  12. #22
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #23
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0
    Originally Posted by Kravvitz
    I link to a lot of the best materials in the CSS section of my site.

    As to working with forms specifically, these are worth reading:
    Thankyou!
    I created a 2 column css layout: the left column has the labels, the right column has returned data.
    Problem: When data is NOT returned, the left-hand column label wraps up into the right-hand column where the returned data should be.
    Question: How do you keep the label from wrapping up into the right column where the data usually is placed?
  16. #24
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    You're welcome.

    That would depend on how you coded it. It sounds like you may need to add elements with a min-width to save the place for items in the right column.

    P.S. When posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
Page 2 of 2 First 12
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo