Border Split Example
Last of the Time Lords
You hit me with a cricket bat. The way I see it, every life is a pile of good things and bad things.…hey.…the good things don't always soften the bad things; but vice-versa the bad things don't necessarily spoil the good things and make them unimportant. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong?
You hit me with a cricket bat. The way I see it, every life is a pile of good things and bad things.…hey.…the good things don't always soften the bad things; but vice-versa the bad things don't necessarily spoil the good things and make them unimportant. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong?
The Rebel Flesh
All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? Heh-haa! Super squeaky bum time! You hit me with a cricket bat. *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You've swallowed a planet! I hate yogurt. It's just stuff with bits in.
All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? Heh-haa! Super squeaky bum time! You hit me with a cricket bat. *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You've swallowed a planet! I hate yogurt. It's just stuff with bits in.
Fear Her
You hit me with a cricket bat. I am the Doctor, and you are the Daleks! The way I see it, every life is a pile of good things and bad things.…hey.…the good things don't always soften the bad things; but vice-versa the bad things don't necessarily spoil the good things and make them unimportant. Aw, you're all Mr. Grumpy Face today.
The Rebel Flesh
All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? Heh-haa! Super squeaky bum time! You hit me with a cricket bat. *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You've swallowed a planet! I hate yogurt. It's just stuff with bits in.
/* split code */
.wrap {
background: #ee381d;
overflow: hidden;
}
.section-wrap {
float: left;
margin-right: -300px;
width: 100%;
}
section {
border-right: 300px solid #1d80ee;
padding:1.5em;
}
aside {
background: #1d80ee;
float: right;
padding: 1.5em;
width: 300px;
}
@media all and (max-width: 40em) {
.section-wrap {
width: 100%;
margin-right: 0;
float: none;
}
section {
border-right: none;
padding: 1.5em;
/* this width: isn't strictly necessary */
width: 100%;
}
aside {
width: 100%;
max-width: 100%;
padding: 1.5em;
}
}Gradient Split Example
He might run off!
Oh, I always feared he might run off like this. Why, why, why didn’t I break his legs? Meh. Spare me your space age technobabble, Attila the Hun! A true inspiration for the children. Hey, tell me something. You’ve got all this money. How come you always dress like you’re doing your laundry? Does anybody else feel jealous and aroused and worried?
What are you hacking off? Is it my torso?! ‘It is!’ My precious torso! You won’t have time for sleeping, soldier, not with all the bed making you’ll be doing. I’ll tell them you went down prying the wedding ring off his cold, dead finger.
A sexy mistake
Kif might! Oh dear! She’s stuck in an infinite loop, and he’s an idiot! Well, that’s love for you. It’s toe-tappingly tragic! Now, now. Perfectly symmetrical violence never solved anything. That’s not soon enough! I feel like I was mauled by Jesus.
So I really am important? How I feel when I’m drunk is correct? Is that a cooking show? Shut up and take my money!
Stop! Don’t shoot fire stick in space canoe! Cause explosive decompression! Uh, is the puppy mechanical in any way? A sexy mistake. Yes! In your face, Gandhi! Eeeee! Now say “nuclear wessels”! Kif, I have mated with a woman. Inform the men.
Nuclear wessels
Oh, I always feared he might run off like this. Why, why, why didn’t I break his legs? Meh. Spare me your space age technobabble, Attila the Hun! A true inspiration for the children. Hey, tell me something. You’ve got all this money. How come you always dress like you’re doing your laundry? Does anybody else feel jealous and aroused and worried?
What are you hacking off? Is it my torso?! ‘It is!’ My precious torso! You won’t have time for sleeping, soldier, not with all the bed making you’ll be doing. I’ll tell them you went down prying the wedding ring off his cold, dead finger.
Space age technobabble
She’s stuck in an infinite loop, and he’s an idiot! Well, that’s love for you. It’s toe-tappingly tragic! Now, now. Perfectly symmetrical violence never solved anything. I feel like I was mauled by Jesus.
/* split code */
article {
position: relative;
max-width: 60em;
width: 90%;
background: linear-gradient (
left, #a90329 0%,#a90329 60%,#6d0019 60%,#6d0019 100%
);
}
section {
width: 55%;
margin: 0 2.5%;
padding: 1.5em 0;
}
aside {
position: absolute;
top: 0;
right: 0;
width: 35%;
margin: 0 2.5%;
padding: 1.5em 0;
}
@media all and (max-width: 40em) {
article {
/* this is unnecessary.
it's just here to show that we're overwriting the article styles
by adding colors to section and aside */
background: transparent;
}
section {
position: relative;
width:100%;
margin-left:auto;
margin-right:auto;
background: #a90329;
/* this padding is only necessary when using box-sizing */
padding: 5%;
}
aside {
position: relative;
width: 100%;
margin-left:auto;
margin-right:auto;
background: #6D0019;
padding: 5%;
}
}Pseudo Split Example
Bridgekeeper
Burn her! Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! He hasn't got shit all over him.
What a strange person
No, no, no! Yes, yes. A bit. But she's got a wart. Now, look here, my good man. Well, she turned me into a newt. And the hat. She's a witch! Camelot! Be quiet!
What a strange person. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! …Are you suggesting that coconuts migrate? Well, I got better. No, no, no! Yes, yes. A bit. But she's got a wart. Why?
We want a shrubbery!! Shut up! Will you shut up?! Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. I am your king.
You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! Bring her forward! Now, look here, my good man.
Shut up! Did you dress her up like this? Shut up!
Blue. No, yel…
Now, look here, my good man. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot!
Makes Ben Hur look like an Epic!
I'm not a witch. The Knights Who Say Ni demand a sacrifice! How do you know she is a witch? I am your king. The nose?
We shall say 'Ni' again to you, if you do not appease us. The Knights Who Say Ni demand a sacrifice! I am your king.
And the hat. She's a witch! Shut up! Will you shut up?! No, no, no! Yes, yes. A bit. But she's got a wart. How do you know she is a witch?
Shut up! Did you dress her up like this? Shut up!
/* split code */
.wrap {
margin: 3em auto;
max-width: 960px;
width: 100%;
overflow: hidden;
}
section {
float: left;
width: 60%;
padding: 1.5em 2.5%;
position: relative;
background: #ee381d;
}
section::after {
content: "";
position: absolute;
right: -999em;
top: 0;
background: #1d80ee;
display: block;
z-index: -10;
/* may as well make these huge */
height: 999em;
width: 999em;
}
aside {
float: right;
width: 40%;
padding: 1.5em 2.5%;
}
@media all and (max-width: 40em) {
section {
width: 100%;
padding: 1.5em 5%;
}
section::after {
/* there is probably a better way of doing this */
display: none;
visibility: hidden;
}
aside {
float: left;
width: 100%;
background: #1d80ee;
padding: 1.5em 5%;
}
}About this post
Here are three completely overly complicated techniques for creating responsive split layouts. I don’t know how it all started. I’m sure it was a post on Forrst. I just got kind of carried away.
These are proof of concept techniques, all achieving the same end result through completely different means. They may not be useful for what they are, but I believe that they still can serve a purpose. They were fun to create, anyway.