Dissecting PMOB example: 2col, fluid, content first

HTML & CSS
1

Hi,

PMOB demo.

My dissection of PMOB demo.

I have tested my dissection in the latest version of these browsers/operating systems and they all render the above without error:

Mac/OSX: Chrome, Safari, Firefox, Opera
PC/Vista: Safari, IE7, IE6
PC/XP: IE6

I am not worried about supporting these browsers:

Mac: IE 5.5
PC: IE < 6

My question: Is my dissection ready for prime time usage? Keep in mind, I am just focusing on the structure.

Relevant CSS:

.wrap {
	margin-right: 200px;
	background: #ccc;
}

.secondary {
	float: right;
	position: relative; /* Needed for IE/win */
	width: 200px;  /*same as margin on outer */  
	margin-right: -200px; /*must be 1px less than width otherwise won't push footer down */   
}

* html .secondary { margin-left: -3px; }/* ie 3 pixel jog */

.primary {
	float: left;
	width: 100%;
	position: relative;
}

HTML:

<div class="wrap clear"> 
	
	<div class="primary">
		<p>Primary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum hendrerit vestibulum. Etiam sodales, eros ac laoreet fringilla, elit lorem ullamcorper nulla, sed sollicitudin mauris justo nec mi.</p>
	</div>
	
	<div class="secondary"> 
		<p>Secondary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum hendrerit vestibulum.</p>
	</div>
	
</div>

<p>Cleared content</p>

Thoughts?

Thanks!
Micky

2

My question: Is my dissection ready for prime time usage? Keep in mind, I am just focusing on the structure.

Well seeing as I posted that layout sometime in 2003 I think it might be past it’s sell by date :slight_smile:

However, It still stands up better than most floated layouts and if you had a fixed width element in the first column you won’t get a float drop in IE6 unlike all other normal methods.

You don’t need the 1px overlap these days because that was for versions of Firefox (and moz equivalents) less than 1.5.

I’d really need to know what the actual requirements of the site you are designing are to answer the question properly. All layouts have different behaviours and there isn’t a one size fits all so I’d need to know the dynamics of what you want.:slight_smile:

3

Hi Paul!!! Thanks so much for the reply, I greatly appreciate your help! :slight_smile:

I have to say, I have learned so much from your posts and website… I really owe you one! :spf:

LOL! :lol:

Well, it appears to be working well from what I have tested so far! I think the technique is fundamentally sound.

I like that! Definitely a plus to this layout. :slight_smile:

I was wondering about that… I think I removed that from my example. Thanks for clarifying its purpose in there.

Oh, for sure! I definitely understand.

I am actually looking to use my example (based on your kick-butt demo) inside a fixed-width div. I want to have a fluid-width inner layout, if-n-when I decide to take the width off of the parent holder.

In other words:

<div container 1000px fixed width>
<div header></div>
<div other></div>
<div pmob wrap with clear for child floats>
Dissected PMOB example goes here.
</div>
<div other></div>
<div footer></div>
</div container>

In other words, I feel pretty good about slapping it into a fixed-width layout, I just wanted to get a little feedback… I am glad to hear you say that the technique still holds water… It has been a while since I did a content-first layout like this. :slight_smile:

Thanks again Paul! I really appreciate your pro help! Thanks for sharing your css skillz with the rest of us CSS mortals. :cool:

Have an excellent day!!!

Off Topic:

P.S. Let me know if you ever make it through Eugene Oregon, and I will buy you a brewski! :drink:

4

In a fixed width demo it will work even better :slight_smile:

Fluid layouts are always awkward and there’s always something to trip you up. Just shout if you run into problems :slight_smile:

5

Thanks a billion Paul! You rock!!!

Have an excellent day!

Cheers,
Micky