Is it possible to order floats semantically?

HTML & CSS
1

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.

<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

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

@dresden_phoenix

If I understand the question correctly then try this:



<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>
4

Good try John but the right column will overlap the orange if you add more content instead of opushing it down with the flow.:slight_smile:

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

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

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-block/vert-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 :slight_smile:

7

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

Yes that’s pretty close Ray. A shame the vertical-alignment can’t be fixed and it would be there :slight_smile:

9

When floats fail you, reach for inline-block.
When inline-blocks fail you, mix em’ with a float and Behold The Glory. :slight_smile:

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.

<!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

lol - good work Ray but you’re sort of back to square one as this is much easier with my solution from the quiz.


<!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 :slight_smile:

11

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

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

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.