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 © 2002-2012 Archithesis.net<br> All rights reserved.</p>
<!--inner--></div>
<!--foot--></div>
</body>
</html>