I was learning how to make a recipe-app on youtube with Javascript, then I finished it, but there is a problem, the app I was learning how to make has a function that when you click on an image it shows the recipe info but the info screen was too big for my pc, like it overflows and I couldn't click on the button (which is an X) to close the image and the person I was watching to learn on how to make this app managed to put a scroll bar on the images while I did EVERYTHING he did, the scroll bar didn't show up for me. and when I tried to adjust the size of the image info it only affected the sides while the top and bottom were unaffected (the sides were too thin and that made the image and text compressed and that gave it a bad apparence).
Here is the HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Recipes App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="mobile-container">
<header>
<input type="text" id="search-term" />
<button id="search"><i class="fas fa-search"></i></button>
</header>
<div class="fav-container">
<h3>Favorite Meals</h3>
<ul class="fav-meals" id="fav-meals"></ul>
</div>
<div class="meals" id="meals"></div>
</div>
<div class="popup-container hidden" id="meal-popup">
<div class="popup">
<button id="close-popup" class="close-popup"><i class="fas fa-times"></i></button>
<div class="meal-info" id="meal-info"></div>
</div>
</div>
</body>
</html>
Here is the CSS/Style Code (the popup part is the image that overflows):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
margin: 0;
min-height: 100vh;
}
img {
max-width: 100%;
}
.mobile-container {
background-color: #fff;
box-shadow: 0 0 10px 2px #3333331a;
border-radius: 3px;
overflow: hidden;
width: 400px;
}
header {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
header input {
background-color: #eee;
border: none;
border-radius: 3px;
font-family: inherit;
padding: 0.5rem 1rem;
}
header button {
background-color: transparent;
border: none;
color: #aaa;
font-size: 1.5rem;
margin-left: 10px;
}
.fav-container {
background-color: #cc444494;
padding: 0.25rem 1rem;
text-align: center;
}
.fav-meals {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
padding: 0;
}
.fav-meals li { /* O position: relative; coloca o botão perto da foto da receita */
cursor: pointer;
position: relative;
margin: 5px;
width: 75px;
}
.fav-meals li .clear { /* Esse é para o botão de deletar as receitas da lista de favoritos */
background-color: transparent;
border: none;
cursor: pointer;
opacity: 0;
position: absolute;
top: -0.5rem;
right: -0.5rem;
font-size: 1.2rem;
}
.fav-meals li:hover .clear { /* O :hover é para quando você passar o cursor do mouse em cima de algo */
opacity: 1;
}
.fav-meals li img {
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 10px 2px #3333331a;
object-fit: cover;
height: 70px;
width: 70px;
}
.fav-meals li span {
display: inline-block;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 75px;
}
.meal {
border-radius: 3px;
box-shadow: 0 0 10px 2px #3333331a;
cursor: pointer;
margin: 1.5rem;
overflow: hidden;
}
.meal-header {
position: relative;
}
.meal-header .random {
position: absolute;
top: 1rem;
background-color: #fff;
padding: 0.25rem 1rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.meal-header img {
object-fit: cover;
height: 250px;
width: 100%;
}
.meal-body {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
}
.meal-body h4 {
margin: 0;
}
.meal-body .fav-btn {
border: none;
background-color: transparent;
color: #cecaca;
cursor: pointer;
font-size: 1.2rem;
}
.meal-body .fav-btn.active {
color: crimson;
}
.popup-container {
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.popup-container.hidden {
opacity: 0;
pointer-events: none;
}
.popup {
background-color: #fff;
border-radius: 5px;
padding: 0 2rem;
position: relative;
overflow: auto;
margin: 2rem;
max-width: 100vh;
max-width: 500px;
width: 100%;
}
.popup .close-popup {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 1.5rem;
position: absolute;
top: 1rem;
right: 1rem;
}
.meal-info h1 {
text-align: center;
}
In .popup you have two max-width rules - I believe one of them is meant to be max-height, because height have to be specified along with overflow: auto.
Nonetheless, a useful suggestion - most tutorial videos have a link to source code. You can look there if something else is missed and not shown in the video.
Related
I can not get a solution – after testing some hours. Maybe anybody can help me.
The mobile menu opens correct, but does not close when clicking the close-button or the dark background.
On all devices, Android, Windows, Mac, on every Browser it works very fine. Only on iOS (Safari), the close-function does not react.
Anybody has a solution for this problem?
Thank you very much!
#head-top-inner-right {
float: left;
padding-left: 12px;
}
#nav-container {
position: fixed;
height: 100vh;
width: 100%;
pointer-events: auto !important;
}
#nav-container .bg {
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 100% !important;
visibility: hidden;
opacity: 0;
transition: .3s;
background: #000;
}
#nav-container:focus-within .bg {
visibility: visible;
opacity: .6;
}
#nav-container * {
visibility: visible;
}
.button {
position: relative !important;
display: flex;
flex-direction: column;
justify-content: center;
-webkit-appearance: none;
border: 0;
background: #fff;
border: 1px solid #E6E6E6;
border-radius: 0;
height: 50px;
width: 30px;
padding-left: 10px;
padding-right: 10px;
margin-top: 5px;
cursor: pointer;
pointer-events: auto;
margin-left: 25px;
margin-right: 0px;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0,0,0,0);
float: right;
}
.icon-bar {
display: block;
width: 100%;
height: 1.5px;
background: #1C5292;
transition: .3s;
cursor: pointer;
}
.icon-bar + .icon-bar {
margin-top: 5px;
}
#nav-container:focus-within .button {
pointer-events: none;
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(1) {
transform: translate3d(0,6.5px,0) rotate(45deg);
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(2) {
opacity: 0;
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(3) {
transform: translate3d(0,-6.5px,0) rotate(-45deg);
cursor: pointer;
}
#head{
display: none;
}
#head-mobile{
background-color: #fff;
border-bottom: 1px solid #f5f5f5;
max-width: 100%;
height: auto;
text-align: left;
margin: 0px auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
overflow: hidden;
display: block;
}
#nav-content {
margin-top: -10px;
margin-left: -10px;
padding: 20px;
width: 67%;
max-width: 300px;
position: absolute;
top: 0;
left: 0;
height: 100% !important;
background: #fff;
pointer-events: auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateX(-100%);
transition: transform .3s;
will-change: transform;
contain: content;
overflow: visible;
}
#nav-content a:link {
font-weight: 500;
font-size: 16px;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
display: block;
}
#nav-content-spacer{
height: 1px;
width: 100%;
background-color: #E6E6E6;
display: block;
}
.small {
display: flex;
align-self: center;
}
.small a {
font-size: 12px;
font-weight: 400;
color: #888;
}
.small a + a {
margin-left: 15px;
}
#nav-container:focus-within #nav-content {
transform: none;
}
<style>
</style>
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mobilemenu.css">
</head>
<body>
<div id="wrapper">
<div id="head-top">
<div id="head-top-inner">
<div id="head-top-inner-left"></div>
<div id="head-top-inner-right"></div>
</div>
</div>
<div id="head-mobile">
<div id="nav-container">
<div class="bg"></div>
<span style="margin-right: 17px !important; display: block;"><div class="button" tabindex="0">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div></span>
<div id="nav-content" tabindex="0">
<h3 class="menu-title">Navigation</h3>
1
<span id="nav-content-spacer"></span>
2
<span id="nav-content-spacer"></span>
3
<span id="nav-content-spacer"></span>
4
<span id="nav-content-spacer"></span>
5
</div>
</div>
<div id="head-inner-left">
Logo
</div>
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
This question already has answers here:
What are the various ways to hide a <div>?
(5 answers)
Can I have an onclick effect in CSS?
(14 answers)
Closed 2 years ago.
I have an a element that acts like a toggle button :
var container = document.getElementsByClassName("favorite");
for (var i = 0; i < container.length; i++) {
//For each element in the container array, add an onclick event.
container[i].onclick = function(event) {
this.classList.toggle('selected');
}
}
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
.container .favorite {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
display: flex;
border-radius: 50%;
cursor: pointer;
}
.container .favorite:hover {
background: #D9DEEA;
}
.container .favorite::after {
z-index: 2;
position: relative;
margin: auto;
height: 20px;
content: url("https://img.icons8.com/ios/16/000000/star.png");
}
.container .favorite.selected::after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<a class="favorite"></a>
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
I want to transform it to a checkbox, but the solutions I find are for a checkbox with a label, I only want to use the checkbox in my html without the label or some additional div, this is what I tried :
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
input[type="checkbox"]{
height: 20px;
width: 20px;
position: absolute;
opacity: 1;
margin: auto;
height: 20px;
cursor: pointer;
top: 10px;
right: 10px;
}
input[type="checkbox"]::after{
content: url("https://img.icons8.com/ios/16/000000/star.png");
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
margin: auto;
height: 20px;
width: 20px;
pointer-events: none;
}
input[type="checkbox"]:checked:after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
input[type="checkbox"]:hover:after{
background: #D9DEEA;
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<input type="checkbox" />
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
Which doesn't look good.
How can I fix this ? and thanks in advance.
You can add appearance:none to remove to checkbox appearance and set fixed height/width to checkbox and :after, changing :after to flex allows you to center the background.
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
input[type="checkbox"]{
height: 40px;
width: 40px;
position: absolute;
opacity: 1;
margin: auto;
cursor: pointer;
top: 10px;
right: 10px;
appearance: none;
outline: none;
}
input[type="checkbox"]::after{
content: url("https://img.icons8.com/ios/16/000000/star.png");
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
margin: auto;
height: 40px;
width: 40px;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
input[type="checkbox"]:checked:after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
input[type="checkbox"]:hover:after{
background: #D9DEEA;
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<input type="checkbox" />
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
I have a simple distributed system project which aims to develop airlines booking and purchase system. In this project, the main goal is to achieve proper functionalities, not to achieve best visuality. However, I have really basic problem due to my lack of experience in web design area.
Any kind of interest of you will be appreciated!
In my home page, I tried to draw an airplane layout but the problem is margins. I can not arrange properly the seats in between plane borders.
Demonstration of my ugly home.php:
Architecture of my home.php:
<div class="content">
...
<div class="airplane">
...
<div class="cockpit">...</div>
<ol class="fuselage">
<li class="row row--1">
<ol class="seats">
<li class="seat">...</li>
</ol>
</ol>
</ol>
</div>
</div>
Here is my CSS code:
div.content
{
margin-left: 200px;
padding: 1px 16px;
height: auto;
}
#media screen and (max-width: 700px)
{
.sidebar
{
width: 100%;
height: auto;
position: relative;
}
.sidebar a
{
float: left;
}
div.content
{
margin-left: 0;
}
}
#media screen and (max-width: 400px)
{
.sidebar a
{
text-align: center;
float: none;
}
}
.airplane
{
margin: 10px auto;
max-width: 500px;
position: relative;
margin-left: 25px;
}
.cockpit
{
margin-left: 25px;
height: 250px;
position: relative;
overflow:hidden;
text-align: center;
border-bottom: 5px solid #993333;
}
.cockpit:before
{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 500px;
width: 98%;
border-radius: 50%;
border-right: 5px solid #993333;
border-left: 5px solid #993333;
}
.cockpit h2 {
width: 70%;
margin: 120px auto 35px auto;
}
.fuselage
{
margin-left: 25px;
border-right: 5px solid #993333;
border-left: 5px solid #993333;
}
ol
{
list-style :none;
padding: 0;
margin: 0;
}
.row
{
}
.seats
{
margin-left: 25px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
margin: 0 5px 0 250px;
}
.seat {
display: flex;
flex: 0 0 25.28571428571429%;
padding: 5px;
position: relative;
}
.seat:nth-child(3) {
margin-right: 15.28571428571429%;
}
.seat input[type=checkbox] {
position: absolute;
opacity: 0;
}
.seat input[type=checkbox]:checked + label {
background: yellow;
}
.seat input[type=checkbox]:disabled + label {
background: #dddddd;
text-indent: -9999px;
overflow: hidden;
}
.seat input[type=checkbox]:disabled + label:after {
content: "X";
text-indent: 0;
position: absolute;
top: 4px;
left: 50%;
transform: translate(-50%, 0%);
}
.seat input[type=checkbox]:disabled + label:hover {
box-shadow: none;
cursor: not-allowed;
}
.seat label {
display: block;
position: relative;
width: 70%;
text-align: center;
font-size: 11px;
font-weight: bold;
line-height: 1.5rem;
padding: 4px 0px;
background: green;
border-radius: 5px;
}
.seat label:before {
content: "";
position: absolute;
width: 75%;
height: 75%;
top: 1px;
left: 50%;
transform: translate(-50%, 0%);
background: rgba(255, 255, 255, 0.4);
border-radius: 3px;
}
.seat label:hover {
cursor: pointer;
box-shadow: 0 0 0px 2px #5C6AFF;
}
Could you please try seats class in below;
.seats
{
margin-left: 25px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
margin: 0 5px 0 200px;
}
You can fix your margin-left in the following part of your code:
.seat {
display: flex;
flex: 0 0 25.28571428571429%;
padding: 5px;
margin-left: -50px; // lay seats over plane borders
position: relative;
}
With this customization, you can lay your seats over the plane.
This value is for demonstration purposes only and as an example
This is my HTML structure:
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>
And here are my CSS rules:
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
height: 35px;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
The .pageSlider .slide-button is set to z-index: 1 and .pageSlider a[href] is set to z-index: 2, but the lower z-index actually overlaps the higher.
I somehow need toget the .slide-button under the links, but I can't seem to figure out a better way.
Live demo:
(function(e){e.parseURL=function(e){if(typeof e==="undefined"&&typeof window.location.href!=="undefined")e=window.location.href;var t={whole:/^((http|https):\/\/)?((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\/.*/,protocol:/^(http|https):\/\//,absolute:/^\/\/((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\//,relative:/^[\/](?!\/).*(\..*|\/)?.*$/,params:/\?.*=.*(\&.*\=.*)+[^#.*]/},n={protocol:undefined,hostname:undefined,hash:undefined,href:{original:undefined,noparams:undefined},parentDomain:undefined,parameters:undefined,pathname:{nohash:undefined,withhash:undefined},type:undefined};if(typeof e!=="string")throw new TypeError("Argument must be a string!");else if(!t.whole.test(e)&&!t.absolute.test(e)&&!t.relative.test(e))throw new Error("Invalid string");n.href.original=e;if(e.indexOf("#")!==-1){n.hash=e.substring(e.indexOf("#"));e=e.substring(0,e.indexOf("#"))}if(t.params.test(e)){n.parameters={};var r=e.match(t.params)[0].substring(1).split("&");for(var i=0,s=r.length;i<s;i++){var o=r[i].split("=");n.parameters[o[0]]=o[1]}e=e.replace(t.params,"");n.href.noparams=e+(typeof n.hash!=="undefined"?n.hash:"")}if(t.protocol.test(e)){n.protocol=e.match(t.protocol)[0];n.hostname=e.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.parentDomain=n.hostname.split(".");n.parentDomain.splice(0,1);n.parentDomain=n.parentDomain.join(".");if(n.parentDomain=="")n.parentDomain=n.hostname;var u=e.replace(t.protocol,"");n.pathname.nohash=u.substring(u.indexOf("/"));u=undefined;n.type="normal"}else{n.protocol=window.location.href.match(t.protocol)[0];if(t.absolute.test(e)){var u=e.replace(/^\/\//,"");n.hostname=u.substring(0,u.indexOf("/"));n.pathnam.nohashe=u.substring(u.indexOf("/"));n.type="absolute";n.href.original=n.href.original.replace(/^\/\//g,n.protocol)}else if(t.relative.test(e)){n.hostname=window.location.href.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.pathname.nohash=n.href.original;n.type="relative"}else{throw new Error("Invalid string")}}n.pathname.withhash=n.pathname.nohash+n.hash;return n};if(typeof e(".pageSlider")[0]!=="undefined"){e.pageSlider=function(t){if(t==="update"){e('.pageSlider a.active:not([href="'+e.parseURL().hash+'"])').removeClass("active");e('.pageSlider a[href="'+e.parseURL().hash+'"]').addClass("active");e(".pageSlider").each(function(){var t=e(this);var n=t.find("a.slide-button");var r=t.find("a[href]");var i=r.size();var s=100/i;var o=r.index("a.active");r.css("width",s+"%");console.log(o);n.css("width",s+"%").animate({left:o*-1*s+"%"})});return e('.pageSlider a.active[href="'+e.parseURL("/index.php").hash+'"]')}};window.location.hash="lounge";e.pageSlider("update");e(window).on("hashchange",function(){e.pageSlider("update")})}})(jQuery)
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
color: #fff;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
body{background-color:#777}#media all and (max-width: 500px){.pageSlider{white-space: normal}.pageSlider a[href]{display: block !important;width: 100% !important}.pageSlider [href].active {background-color: #cccc00}.pageSlider .slide-button{display: none}}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>
You forgot to add:
position:relative;
on your link (.pageSlider a[href]). z-index only applies to positioned elements.
Trying to get the grey box on the right to centre align without adding margins/padding to it:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; }
h3 span { margin-left: 0.5em; }
a { float: right; text-align: right; }
a span { vertical-align: middle; background-color: #ccc; width: 1em; height: 1em; color: #fff; margin-right: 0.5em; display: inline-block; }
#content { height: 16em; }
</style>
</head>
<body>
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
</body>
</html>
http://jsfiddle.net/hotdiggity/4yGh8/
There are a few different ways to go about this, but none of them are perfect.
I've modified the markup slightly to make it easier to write selectors for:
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
CSS Tables
The result might not be pretty if you have content that's going to wrap:
http://jsfiddle.net/4yGh8/4/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; display: table; width: 100%; }
h3 span { display: table-cell; vertical-align: middle; }
h3 span { padding: 0 0.5em; width: 100% }
h3 span:last-child { width: 1px; line-height: 1; }
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Flexbox
Make sure you check http://caniuse.com/#search=flexbox to see which prefixes you need to make this work.
http://jsfiddle.net/4yGh8/6/ (prefixes not included)
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
display: flex;
width: 100%;
justify-items: space-between;
align-items: center;
}
h3 span {
margin: 0 .5em;
}
h3 span:first-child {
flex: 1 1 auto;
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Absolute Positioning
http://jsfiddle.net/4yGh8/7/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
position: relative;
}
h3 span {
padding: 0 .5em;
}
h3 span:last-child {
position: absolute;
right: 0;
top: 50%;
margin-top: -.5em; /* half of the element's height */
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
2 things you can do.
add another box en limit is in width until your block is in the middle with float right
use margin & padding
You just need to add position:relative to your #frame and then position:absolute;top:0;bottom:0; margin:auto; to yout #header. I edited your fiddle