SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,729
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)

    how to center a fix width DIV horizontally ( advanced).

    PREAMBLE:
    I was watching Leah Veru give a talk about new CSS3 (time index: 11:13) properties, like calc().

    She pointed out that , assuming one wanted to create bands of content, using said property one could center content with ONE element. so instead of:
    Code:
    .one{background: orange;}
    .two{background: pink;}
    .center {width: 960px; margin:0 auto;}
     <div class="one"><div class="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>
    <div class="two"><div class="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>
    one could have:
    Code:
    .one{background: orange;}
    .two{background: pink;}
    .one,.two {width: 960px; padding:0  calc(50%-480px);}
     
    <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="two">>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    However, support for this is limited even among modern browsers. She then wen on to mention a 'hacky' way of achieving the same effect with CSS2.1; which reminded me of an equal height technique just applied sideways. Basically the idea is to apply some ludicrous amount of horizontal padding, and offset it with an equal amount of negative horizontal margin.

    Code:
    .one{background: orange;}
    .two{background: pink;}
    .cc{padding:0  99999em;margin:0 -99999em;}
    .shell{margin:0 auto;width: 960px;}
    
    <div class="shell">
    	<div class="cc one"> centered content. i love you roni!. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    	<div class="cc two "> centered content. i love you roni!. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    However , when I try to follow her instructions I get a scroll bar and 'off center ' content.


    Thus far , the only way I have been able to fix this is to add YET ANOTHER wrapper with overflow:hidden around div.shell .

    of course, now we AT LEAST two extra non semantic elements and overflow:hidden involved, which doesnt seem as graceful as I had hoped. But maybe I missed something? I was hopping that, if I did, someone would poin

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    It looks centred to me Ray but of course will need an overflow:hidden somewhere to hide the scrollbar as you mention.

    I remember doing something similar with box shadow (I think Lea may have mentioned this method somewhere also but this is my version).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #outer {
    	width:960px;
    	margin:auto;
    	background:#f2f2f2;
    }
    #header {
    	background:#f6f8eb;
    	padding:1em 0;
    	/* 960px matches the width of the element - it can't be bigger than the element or the shadow moves away */
    	-webkit-box-shadow: 960px 0px rgba(234, 234, 234, 0.9), -900px 0px 0px rgba(234, 234, 234, 0.9);
    	-moz-box-shadow:   960px 0px 0px rgba(234, 234, 234, 0.9), -900px 0px 0px rgba(234, 234, 234, 0.9);
    	box-shadow:        960px 0px 0px rgba(234, 234, 234, 0.9), -900px 0px 0px rgba(234, 234, 234, 0.9);
    }
    p { margin:1em }
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<h1>Test IE9+ wide background strip no extra mark up</h1>
    		<div id="header">
    				<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
    				<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
    				<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
    		</div>
    		<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
    		<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
    </div>
    </body>
    </html>

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,729
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    i was figuring as much, even tho the video makes no mention of it.

    My issue with his was that the overflow had to go on another wrapper, so that drives up the # of unsematic elements needed for the effect to work. Making this effect no so much 'hacky' but having what I call a 'threshold of practicality'. if one only has 2-3 segments then there is no actual advantage gained. not to mention her trick may limit other effect somewhat. It's still useful, but in the video it seemed positively magic! I just wanted to make sure I understood the limitations of the technique, and just wasn't falling short somewhere.


    Your idea is , as always, a clever alternative for wider sites thanks Paul.


Bookmarks

Posting Permissions

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