Thread: Margin moves

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

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0

    Margin moves


    The goal I am looking for: "How to keep the right column from jumping under (liquid result), and fill out 100% to the right hand border of the browser.

    Tables are easy, and I don't know to make a two column layout where the left column is fixed and the right right column stretches 100%, BUT it's left hand margin does not move out to the right as the window's width is stretched.

    New members can't use links? what!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Welcome to DevShed Forums, ryanjohnsond.

    It's not clear what you mean by the left margin not moving. Perhaps the example you want to show will clarify that for us?

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    There is also a policy that prevents users from posting attachments until they have 30 posts and have been a member for 30 days, so if needed http://imageshack.us/ can be used to host images.
    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).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, ryanjohnsond.

    It's not clear what you mean by the left margin not moving. Perhaps the example you want to show will clarify that for us?
    Can't show it if I can't post a URL to my YouTube or an image.

    Made a video to show my dilemma.
    Go to you tube (dot)com (forward slash) "watch?v" (equals) KC9hJ6DvEMs
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    Can't help you unless you show me your code in your next reply
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0
    Originally Posted by jack13580
    Can't help you unless you show me your code in your next reply
    Made a video to show my dilemma.
    First example was made with a table. The rest in CSS.
    Go to you tube (dot)com (forward slash) "watch?v" (equals) KC9hJ6DvEMs
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    Made a video to show my dilemma.
    First example was made with a table. The rest in CSS.
    Go to you tube (dot)com (forward slash) "watch?v" (equals) KC9hJ6DvEMs
    I saw it already, show us the code for the one that works except in IE
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0
    Originally Posted by jack13580
    I saw it already, show us the code for the one that works except in IE
    Abosolute and Relative Position Version.
    PHP Code:
    <html>
    <
    head><title></title>
    <
    link rel="stylesheet" type="text/css" href="css/xleftNav.css">
    <
    style>
    html,body{font-family:sans-serif;margin:0padding:0}
    ul#leftNav {
         
    list-stylenone;
         
    padding0px;
         
    margin0px 50px 0px 0px;
        
    border:1px solid #cdcdcd;
        
    margin-left:1em;
         
    font-family:ArialHelveticasans-serif;
    }
    </
    style>
    </
    head>
    <
    body>
    <
    div style="position:relative; padding-right:50px">
        <
    div style="position: absolute; border:1px solid red; margin: 50px 50px 0 35px;">
                <
    ul id="leftNav">
                <
    li class="title">Title Header Here</li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>    
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href="#">voluptatem accusantium</a></li>
                <
    li><a href="#">voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li class="selected"><a href='#'>voluptatem accusantium</a></li>
            </
    ul>
        </
    div>
        
        <
    div style="position: absolute; border:1px solid red; margin: 50px 50px 0 280px;">
                <
    h1 class="claro">Maintenance</h1>
                <
    h2>Update Title Here</h2>
                
    Title Here Days * <input class="submit-field" type="text" size="25" />
                <
    p><input type="submit" value="Submit" /></p>
                <
    p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiumtotam rem aperiameaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicaboNemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugitsed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciuntNeque porro quisquam estqui dolorem ipsum quia dolor sit ametconsecteturadipisci velitsed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatemUt enim ad minima veniamquis nostrum exercitationem ullam corporis suscipit laboriosamnisi ut aliquid ex ea commodi consequatur?</p>
        </
    div>    
    </
    div>
    </
    body
    Float Left Version
    The problem with this is that the 2nd Column width is 78% and does not maintain a consistent right hand margin/padding against the browser border. The goal I am looking for: "How to keep the right column from jumping under (liquid result), and fill out 100% to the right hand border of the browser.
    PHP Code:
    <!doctype html>
    <
    html>
        <
    head><title></title>
            <
    style>
                
    html,body{
                    
    font-family:sans-serif;
                    
    margin:0;
                    
    padding:0;
                    
    width100%;
                    
    min-width1024px;
                    }

                .
    wrapper {
                    
    margin-leftauto;
                    
    margin-rightauto;
                    
    width100%;
                }
                .
    clearfix {
                    
    clearboth;
                }
                .
    menu {
                    
    border:1px solid red;
                    
    width220px;
                    
    floatleft;
                }
                .
    content {
                    
    border:1px solid red;
                    
    width78%;
                    
    floatleft;
                }
            

            </
    style>
        </
    head>
        <
    body>
            <
    div class="menu">
                <
    ul id="leftNav">
                <
    li class="title">Title Header Here</li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>    
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href="#">voluptatem accusantium</a></li>
                <
    li><a href="#">voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li class="selected"><a href='#'>voluptatem accusantium</a></li>
            </
    ul>
            </
    div>
                <
    div class="content">
                        <
    h1 class="claro">Maintenance</h1>
                        <
    h2>Update Title Here</h2>
                        
    Title Here Days * <input class="submit-field" type="text" size="25" />
                        <
    p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiumtotam rem aperiameaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicaboNemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugitsed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciuntNeque porro quisquam estqui dolorem ipsum quia dolor sit ametconsecteturadipisci velitsed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatemUt enim ad minima veniamquis nostrum exercitationem ullam corporis suscipit laboriosamnisi ut aliquid ex ea commodi consequatur?</p>
                </
    div>
                <
    div class="clearfix"></div>
        </
    body>
    </
    html
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    For this to work you need to put it in a wrapper div set with a height and width you define, can't be in percents
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    That's the best video describing a problem I've seen in quite a while. (Though of course people don't make videos for CSS questions very often.)

    I'm curious, is there a particular reason why the float version has a doctype but the absolute positioning one doesn't? Without a doctype IE will use "Quirks Mode", which is basically an IE5.5 compatibility mode.

    It's good to get familiar with all of the CSS2.1 positioning techniques, but I would not recommend using absolute positioning for creating columns in most cases, including this case.

    Have you considered neither floating nor absolutely positioning the right column and simply giving it a left margin?
    Originally Posted by jack13580
    For this to work you need to put it in a wrapper div set with a height and width you define, can't be in percents
    Setting a width defeats the whole purpose of what Ryan wants to do. Why would setting a height make a difference?
    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).
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    My bad, height won't be needed but a width would, so that it works in IE

    You could try using percents for the wrapper but I haven't tested it which is why I said px instead
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Originally Posted by jack13580
    a width would, so that it works in IE
    The absolute positioning would work in IE8 and newer if a doctype were used to tell them to use "standards mode".

    IE6-7 simply need the left and right properties to be set for the right column.
    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).
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0
    Originally Posted by Kravvitz
    The absolute positioning would work in IE8 and newer if a doctype were used to tell them to use "standards mode".

    IE6-7 simply need the left and right properties to be set for the right column.
    What's the purpose/practice/theory overflow:auto? create a container div and give it a min-width, and then If I make the first column float left, give it a width, and then with the second column, I just make it overflow:auto, why does it work?
  24. #13
  25. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    The most basic thing about "overflow:auto" is that a scrollbar will be added if any element needs to overflow it's right or bottom edges (assuming "direction:ltr"). Also it creates a new "block formatting context", like a floated element does.

    Here are several articles on it:
    https://developer.mozilla.org/en-US/...atting_context
    http://www.css-101.org/block-formatting-contexts/ (I like the "clearfix" technique much more than this article's author.)
    http://www.yuiblog.com/blog/2010/05/...ting-contexts/
    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).
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    12
    Rep Power
    0
    Originally Posted by Kravvitz
    The most basic thing about "overflow:auto" is that a scrollbar will be added if any element needs to overflow it's right or bottom edges (assuming "direction:ltr"). Also it creates a new "block formatting context", like a floated element does.

    Here are several articles on it:
    https://developer.mozilla.org/en-US/...atting_context
    http://www.css-101.org/block-formatting-contexts/ (I like the "clearfix" technique much more than this article's author.)
    http://www.yuiblog.com/blog/2010/05/...ting-contexts/
    Thanks Kravitz!

    I just found out that a div with "overflow:auto" will automatically create spacing when next to a floated div with a declared width.

    I added a middle column. If the example below was a TD, it would be connected to the other two TDs and be the same height. Is it possible to create a middle column grows in height with the other two columns?


    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;
    		float: left; 
    		background: #ccc;
    
    	}
    	#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>
                <!--end left-->
    			</div>
            <div id="middle">
    		</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>
            <!--end right-->
    		</div>
        <!--container-->
    	</div>  
    </body>
    </html>
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    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
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo