SitePoint Sponsor

User Tag List

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

    Is it possible to order floats semantically?

    It seems like I should know how to do this, but I am stuck... I wanted to check to see if it's one of those not suited for CSS or if I am simply missing something.

    I have a layout ( as shown in code). I am trying to have either/or the pink area ( which I want to have a width of ~75% of the main container) and the cyan area ( which I want to have a width of ~25% of the main container)push down the orange area (which I want cover the breadth of the main container, %100) as either ( the pink or the cyan) become taller to contain their content. Visually, this is simple and I know several ways to do it. But it struck that I would have to re order the markup hierarchy to achieve this... which is irking me a LOT.

    The Pink area is the MAIN content, The Orange area would be secondary content, and the Cyan area is an aside or sidebar, so it follows that the markup would be:

    <content>
    PINK
    ORANGE
    CYAN
    </content>
    But because of the ways floats work, the cyan would appear BELOW the ORANGE.
    Using a wrapper and letting the orange section extend beyond it , (as shown bellow) , doesnt work either ( the Cyan doesn't push the orange down)

    It seems the ONLY way to achieve the desired layout is to order the content this way:
    <content>
    PINK
    CYAN
    ORANGE
    </content>

    But it doesn't seem to make much sense to me to have:

    Main Content
    Aside
    Secondary content

    H Would love to know how the forum experts handle this issue.

    Code:
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    			 /* null margins and padding to give good cross-browser baseline */
    			html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,li,ol,ul,table,tr,td,th,p,img,dl,dd,dt {margin:0;padding:0;}
    			img,fieldset {border:none;}
    			img {max-width:100%;}
    			a{text-decoration:none;}
    			a:hover {text-decoration: underline; }
    			body {background: silver}
    			 
    			.nav { overflow:hidden; padding:0; margin:0;}
    			.nav li { float:left; margin:0; list-style:none;}
    			 ._col3 {color:red;}
    			.content, .foot , .motto{clear: both}
    			.inner {width: 960px; margin:0 auto;}
    			.head {background: brown}
    			.head .inner{background:tan }
    			.logo { width:20%; float: left; background: green; margin:0;padding:0}
    			.head .nav{padding:0; margin:0; list-style: none; width: 70%; font-family: Arial; font-weight: bold; float:right; background: silver;  }
    			.head .nav li{float:left; font-size: 80%; height: 5em; width: 20%}
    			.head .nav li + li a{border-left:2px groove #ddd; -moz-border-left-colors: #000  #fff;}
    			.head .nav a {display:inline-block; padding:0 1em   1em 1em; text-decoration: none; height: 4em;   vertical-align: bottom}
    			.head .nav a:after {display:inline-block; content:"";   height: 4em;width:1px;  ;vertical-align: bottom;  vertical-align: bottom; }
     			.head .nav a span {display:inline-block; vertical-align: bottom}
     			
     			.content {background: #fff; overflow: hidden}
     			.main { width: 75%;  float:left; background: pink;}
     			.sec { width: 960px;    background: orange; clear:both}
     			.aside { width: 25%; float:right; background: cyan; min-height: 650px }
    			.dwld {font-style: italic; display: block; margin:0 auto; width: 50%;text-align: center}
    			.priciples dt, .priciples dd{  margin:0; padding: 0;}
    			.priciples dd+dt{ clear:left}
    			.priciples dd{ padding-bottom:20px; margin-left: 1em;}
    			.priciples  dt{ float:left; padding-right:.3em; font-weight:bold;}
    			.priciples  dt:before{ content :"\00BB\0020" }
    			
    			.foot .nav {float:right;}
    			.foot .nav a {display:block;  padding: .25em .5em .25em 0;}
    			.foot .nav li + li {border-left: 1px solid  #ccc}
    			.foot .nav li + li a{padding-left:.5em}
    			.cright{float: left;}
    		</style>
    	</head>
    	<body>
    		<div class="head">
    			<div class='inner'>
    				<h1 class='logo _col3'>Logo</h1>
    				<ul class="nav">
    					<li><a href="about.html"><span>Item<span></a></li>
    					<li><a href="contact.html"><span>Item2<span></a></li>
    					<li><a href="portfolio.html"><span>Item3<span></a></li>
    					<li><a href="projects.html"><span>Item Four</span></a></li>
    					<li><a href="http://www.metrix.mn/"><span>Item 5<span></a></li>
    				</ul>
    				<p class='motto'> Some stements go here.. it's a single pararagraph... </p>
    			<!-inner--></div>
    		<!--head--></div>
    		<div class="content">
    				<div class="inner">
    					<div class="main">
    						<div class="prime">
    							<h2>Headline of sorts</h2>
    							<p>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.<span class="dwld">Download linky stusff statement<a href>here</a>.</span></p>
    							<hr>
    							<h2>GAnother headline  in main content</h2>
    							<dl class="priciples">
    								<dt>Term: </dt> 
    								<dd>Our purpose is to create dwellings in harmony with nature.</dd>
    								<dt>Term: </dt>
    								<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt stuf and smore stuff  sand yet more stuff</dd>
    								<dt>Term: </dt>
    								<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt stuf and smore stuff  sand yet more stuff</dd>
    								<dt>Term: </dt>
    								<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor VAMPIRES!!! incididunt stuf and smore stuff  sand yet more stuff</dd>
    								<dt>Term: </dt>
    								<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor,is nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit MORE vampires... just checking if you were paying attention  incididunt stuf and smore stuff  sand yet more stuff</dd>
    								<dt>Term: </dt>
    								<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt stuf and smore stuff  sand yet more stuff</dd>
    								<dt>Term Term: </dt>
    								<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt stuf and smore stuff  sand yet more stuff</dd>
    								<dt>Term: </dt>
    								<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt stuf and smore stuff  sand yet more stuff</dd>
    							</dl>
    						<!--prime--></div>
    						<div class='sec'> secondary content and stuff
    						<!--sec--></div>
    					<!--main--></div>
    					<div class='aside'> aside content 
    					<!--aside--></div>
    				<!--inner--></div>
    		<!--content--></div>
    		<div class='foot'>
    			<div class="inner">
    				<ul class="nav">
    					<li><a href="about.html">About Archithesis</a></li>
    					<li><a href="contact.html">Contact Archithesis</a></li>
    					<li><a href="projects.html">Project Login</a></li><li><a href="index.html">Home</a></li>
    				</ul>
    				<p class="cright">Copyright &copy; 2002-2012 Archithesis.net<br> All rights reserved.</p>
    			<!--inner--></div>
    		<!--foot--></div>
    </body>
    </html>

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    But because of the ways floats work, the cyan would appear BELOW the ORANGE.
    Hi Ray,
    As you are well aware, the only way a float will push down another block is by clearing that block. In order to do that the float must come before it in the source order, which is where you meet your dilemma.

    It might be possible to do this with some convoluted inline-block styling. I remember back on CSS Quiz#36 I was able to vertically swap inline blocks with some trickery.

    The swapped block was able to push down the block that was higher in the source order. This was done without setting heights and using fluid content.

    EDIT:
    Whoops, I remember now that setting the main content as height:1px; and relying on overflow:visible was part of the trick

  3. #3
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,807
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    @dresden_phoenix

    If I understand the question correctly then try this:

    PHP Code:

    <body>
      <div style='background:YELLOW; position:relative; width:80%; margin:5em auto;'>

          <div style='background: PINK; width:75%;'>
            <?php include '_Main_Content.php'/* FILLED WITH TEST CONTENT */ ?>  
          </div>
          
          <div style='background-color: ORANGE'>
            <?php include '_ Secondary_content.php'/* FILLED WITH TEST CONTENT */ ?>  
          </div>  

          <div style='background: CYAN; position:absolute; top:0; right:0; width:25%'>
              <?php include '_Aside_content.php'/* FILLED WITH TEST CONTENT */ ?>  
          </div>  

      </div>
    </body>
    </html>
    Last edited by John_Betong; Aug 23, 2012 at 01:17. Reason: spelling: not my fortay

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by John_Betong View Post
    @dresden_phoenix

    If I understand the question correctly then try this:
    Good try John but the right column will overlap the orange if you add more content instead of opushing it down with the flow.

    Would love to know how the forum experts handle this issue.
    Hi Ray, it can't be done AFAIK (until the new flexbox and other css3 proposals become of age).

    You can swap the first element or the last element in the page around and still have them fluid as shown in the quiz #36 that the other Ray linked to. However, you can't pick one out of the middle and do it. I remember looking at this before for a quiz but I didn't see a viable solution (that doesn't mean that there may not be on but that i haven't found or seen it yet).

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You can swap the first element or the last element in the page around and still have them fluid
    The big differences between this and quiz #36 are that this involves three DIVs instead of two and this it isn't a "full width block" swap. The first element remains first, am just trying to float the third element along side the first while pushing off the second 100% width element...

    Still, the example shown is a goo trick to have in one's repertoire

    Good try John but the right column will overlap the orange if you add more content instead of pushing it down with the flow.
    Yup that's exactly this is happening in my current layout.

    However, you can't pick one out of the middle and do it. I remember looking at this before for a quiz but I didn't see a viable solution (that doesn't mean that there may not be on but that i haven't found or seen it yet).
    I wanted to tee if any of the experts had solved this issue already before found a bridge to jump from. Thanks all!

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    The big differences between this and quiz #36 are that this involves three DIVs instead of two and this it isn't a "full width block" swap.
    Right, I understood that it was three divs that maintained the source order you wanted.

    Though it's not really usable for the web, this is what I had in mind with the inline-block swap.
    http://www.css-lab.com/demos/inline-...-div-swap.html

    The vertical-align bottom on the main div and sidebar make it unsightly, but that was the only way I could get both of them to push the secondary block down while keeping your source order.

    I got pretty close though

  7. #7
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,807
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post

    ...

    Good try John but the right column will overlap the orange if you add more content instead of pushing it down with the flow.
    Yup that's exactly this is happening in my current layout.

    ...
    KLUDGE
    This springs to mind if and only if the height of the third column is known. Set a minimum height on the first column equivalent to the third column height.

    This technique will also have the benefit of preventing the page height from "jumping" if there is only a little dynamic content in the first column.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rayzur View Post

    I got pretty close though
    Yes that's pretty close Ray. A shame the vertical-alignment can't be fixed and it would be there

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    A shame the vertical-alignment can't be fixed and it would be there
    When floats fail you, reach for inline-block.
    When inline-blocks fail you, mix em' with a float and Behold The Glory.

    Everything is a child of the 240px right floated #inner div, then all divs except for the #side shift out with neg margins.

    I still have one little problem though, the footer. I had to nest it in the secondary content since everything after it is basically removed from the flow due to the height:0;

    If you were to increase the #wrap side padding you will see that it ends after the two top blocks.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Inline-Block Vertical Div Swapping</title>
     
    <style type="text/css">
    html {
        overflow-y:scroll;
    }
    body {
        margin:0;
        padding:10px 0;
    }
    h1 {
        margin:0 0 10px;
        padding:0 10px 10px;
        font-size:1.5em;
        text-align:center;
        background:#EEF;
    }
    p {margin:10px;}
     
    /*=== Begin Layout ===*/
    #wrap {
        width:900px;
        margin:0 auto;
        padding:10px;
        background:#CCC;
    }
    #wrap:after {
        content:"";
        display:block;
        height:0;
        clear:both;
        overflow:hidden;
    }
    #inner {
        width:240px;
        float:right;
        background:palegreen;
    }
    #main {
        width:650px;
        min-height:300px;
        display:inline-block;
        vertical-align:top;/* PART OF THE TRICK */
        margin:0 0 0 -660px;
        background:#EEF;
    }
    #sec, #side {
        display:inline-block;
    }
    #sec {
        width:650px;
        vertical-align:bottom;/* PART OF THE TRICK */
        height:0;/* PART OF THE TRICK */
        overflow:visible;/* This is the default anyways, it's just to confirm that visible overflow is needed*/
        margin:0 0 0 -660px;/*extra 10px to get past #inner left margin*/
        padding-top:2px;/*visual reference*/
        background:blue;/*visual reference*/
    }
        #sec .block {
            padding:1px 0 0;
            margin:0 -270px 0 0;
            background:#EEF;
            border:10px solid #CCC; 
        }
    #side {
        vertical-align:top; /* PART OF THE TRICK */ 
        width:240px; /*this is #inner's width*/
        min-height:300px;
        margin-left:20px;
        background:lime;
    }
    #footer {
        margin:0 -270px 0 0;/*same as #sec .block*/
        padding:0 10px 10px;
        background:#CCC;
    }
        #footer p {
            margin:0;
            padding:5px 0;
            text-align:center;
            font-weight:bold;
            background:#EEF
        }
     
    /*demo column expander*/
    p.expand{
        font-size:.8em;
        font-weight:bold;
        padding:.75em 0;
    }
    p.expand a{ 
        text-decoration:none;
        color:#00F;
    }
    p.expand a:hover{
        display:block;
        height:150px;
        color:#000;
        background:#FF4900;
    }
    </style>
     
    </head>
    <body>
     
    <div id="wrap">
        <h1>Inline-Block Vertical Div Swapping</h1>
        <div id="inner">    
            <div id="main">
                <p>
                <b>START #main content</b><br>
                This is the main content that comes first in the source order: 
                This is the main content that comes first in the source order: 
                This is the main content that comes first in the source order: 
                This is the main content that comes first in the source order: 
                This is the main content that comes first in the source order:
                </p>
                <p>
                This is the main content that comes first in the source order: 
                This is the main content that comes first in the source order: 
                This is the main content that comes first in the source order: 
                This is the main content that comes first in the source order: 
                This is the main content that comes first in the source order:
                </p>
                <p class="expand"><a href="#">Expand Column</a></p>
            </div><!--node fix
        --><div id="sec">
                <div class="block">
                    <p>
                    <b>START #sec content</b><br>
                    This is the secondary content that comes second in the source order: 
                    This is the secondary content that comes second in the source order: 
                    This is the secondary content that comes second in the source order: 
                    This is the secondary content that comes second in the source order: 
                    This is the secondary content that comes second in the source order:
                    </p>
                    <p>
                    This is the secondary content that comes second in the source order: 
                    This is the secondary content that comes second in the source order: 
                    This is the secondary content that comes second in the source order: 
                    This is the secondary content that comes second in the source order: 
                    This is the secondary content that comes second in the source order:
                    </p>
                </div>
                <div id="footer">
                    <p>Footer Stuff Here</p>
                </div>
            </div><!--node fix
            --><div id="side">
                <p><b>Start #side column</b><br> 
                This is the last fluid  block at the bottom of the html : 
                This is the last fluid  block at the bottom of the html : 
                This is the last fluid  block at the bottom of the html : 
                This is the last fluid  block at the bottom of the html : 
                This is the last fluid  block at the bottom of the html : 
                </p>
                <p class="expand"><a href="#">Expand Column</a></p>
            </div>
        </div>
    </div>
    </body>
    </html>

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rayzur View Post
    When floats fail you, reach for inline-block.
    When inline-blocks fail you, mix em' with a float and Behold The Glory.
    lol - good work Ray but you're sort of back to square one as this is much easier with my solution from the quiz.
    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>
    p { margin:0 0 1em;padding:5px;}
    #outer:after {
    	content:" ";
    	display:block;
    	clear:both;
    	height:0;
    }
    #outer {
    	width:960px;
    	margin:auto;
    	border:1px solid #000;
    	position:relative;
    }
    .one {
    	float:left;
    	width:599px;
    	background:cyan;
    	border-right:1px solid #000;
    	margin-right:-1px;
    }
    .two {
    	position:absolute;
    	top:100%;
    	left:-1px;
    	width:100%;
    	background:red;
    	border:1px solid #000;
    }
    .three {
    	background:#fcf;
    	float:right;
    	width:360px;
    	border-left:1px solid #000;
    }
    p.expand a:hover {
    	display:block;
    	height:150px;
    }
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<div class="one">
    				<p>One</p>
    				<p class="expand"><a href="#">Expand Column</a></p>
    		</div>
    		<div class="two">
    				<p>Two two two</p>
    		</div>
    		<div class="three">
    				<p>Three three three</p>
    				<p class="expand"><a href="#">Expand Column</a></p>
    		</div>
    </div>
    </body>
    </html>
    The limitation is that the second element in fact must hold the rest of the layout which is what I was talking about in post #4 although not very clearly. You can pick any element out and place it at the end of the layout but you can't pick an element out and then place it between something else.

    However, your inline block solution is interesting all the same and a tour de force of code

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    your inline block solution is interesting all the same and a tour de force of code
    Dito!
    Brilliant solutions, both of you. It's a bummer that position:absolutes gets involved so then we have to bring the footer in with the second content. But otherwise damn near perfect!

    Am still fiddling with variations of your solutions ( but using display:inline wraps) but nothing quite was graceful as what you have posted. Thanks , as always ,for your input

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Guys,

    I was looking through the CSS3 specs to see if there was anything that might make this work.
    Lo and behold there is the 'move-to' property in the "Generated and Replaced Content Module".

    The 'move-to' property causes the element or pseudo-element to be removed from the flow and reinserted at a later point in the document. The content is reinserted using the 'pending()' value of the 'content' property.
    It looks like that would have been the answer for a css solution, however the Current Work page shows that it is Severely outdated and is in Rewriting status. There is no browser support for it now. Hopefully it will remain in the Content Module through the rewrite stage.

    I did notice that starting with Opera 9.5 the content property now works on All Elements, not just :before and :after psuedos. It looks like Opera was taking steps with the module but halted on it as the status changed.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Ray, Yes that spec seems to have stalled but one that will allow the order of elements to change is the Flexbbox (Flexible box layout). See the section on ordering at the bottom.

    Most articles about this property are out of date as the spec was revised in June but chrome did have a partial implementation already.


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
  •