I tried to create the flexbox collapsible menu using HTML,css and angularjs the collapsible menu functionality working fine but the css transition effect not working when the content are big(ex: with "Lorem Ipsum" text block) its working fine when the "Lorem Ipsum" text block are not there, I couldn't find out the reason for the same. Thanks in advance for the help.
Plnkr Demo
var app = angular.module('app', []);
app.controller('myctrl', function($scope) {
$scope.toggle = function() {
angular.element(document.querySelector('.sidebar')).toggleClass('isClosed');
angular.element(document.querySelector('.hideButton')).toggleClass('isClosed');
angular.element(document.querySelector('.sidebar ul.nav')).toggleClass('isClosed');
}
})
/*
* ==== RESETS ====
*/
* {
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
/*
* ==== IMPORTS ====
*/
/*
* ==== STYLING ====
*/
html,
body {
height: 100%;
}
body {
font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
}
.wrapper {
display: flex;
height: 100%;
padding: 20px;
}
.hideButton {
display: flex;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hideButton a {
border: 1px solid;
border-radius: 2px;
}
/*
* ==== SIDEBAR ====
*/
.sidebar {
display: flex;
min-height: 100%;
flex-grow: auto;
transition: all linear 0.3s;
border: 1px solid;
border-radius: 5px;
padding: 5px;
}
.sidebar.isClosed {
flex-grow: 0;
border: none;
}
.sidebar ul.nav {
display: flex;
flex-direction: column;
width: 100%;
opacity: 1;
}
.sidebar ul.nav.isClosed {
display: none;
}
.sidebar ul.nav li {
list-style: none;
padding: 20px 0;
border: 1px solid #ccc;
border-radius: 5px;
margin: 2px 0;
}
.sidebar ul.nav li a {
display: block;
text-decoration: none;
color: #666;
text-align: center;
padding: 0 2px;
}
.sidebar ul.nav li a:hover {
color: #000;
}
.sidebar div {
max-width: 180px;
}
/*
* ==== CONTENT ====
*/
.content {
min-height: 100%;
flex-grow: 9;
padding: 40px;
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
/*
* ==== TOGGLE BUTTON ====
*/
a.button {
cursor: pointer;
/* position: absolute;
top: 10px;
left: 10px;*/
display: block;
}
a.button:before {
font-weight: bold;
font-size: 20px;
content: "<";
transition: content linear 1s;
}
.isClosed a.button::before {
content: '>';
transition: content linear 1s;
}
/*
* ==== MEDIA QUERIES ====
*/
#media only screen and (max-device-width: 736px) and (orientation: portrait) {
.wrapper {
flex-direction: column;
}
.sidebar {
min-height: 60px;
max-height: 60px;
}
.sidebar ul.nav {
padding: 20px;
flex-direction: row;
}
.sidebar ul.nav li {
display: inline-block;
padding: 2%;
}
.content {
/*TBD*/
}
.content a.button {
display: none;
}
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script data-require="angular.js#*" data-semver="4.0.0" src="script.ts"></script>
<script data-require="angular.js#*" data-semver="4.0.0" src="system.config.js"></script>
<script data-require="angular.js#*" data-semver="4.0.0" src="tsconfig.json"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myctrl">
<div id="wrapper" class="wrapper">
<div id="aside" class="sidebar">
<div>
<ul class="nav">
<li>Home</li>
<li>Experience is the key of the item of the rest of the kind</li>
<li>Services</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- /Aside -->
<div class="hideButton">
<div class="Aligner">
<a class="button" ng-click="toggle()"></a>
</div>
</div>
<div id="content" class="content">
<h1>Flexbox Off-Canvas Side Menu</h1>
<h2>Easy to use</h2>
<div>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The
point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where
does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College
in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in
their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Where can I get some? There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by
injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators
on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which
looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</div>
</div>
<!-- /Content -->
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script data-require="angular.js#*" data-semver="4.0.0" src="script.ts"></script>
<script data-require="angular.js#*" data-semver="4.0.0" src="system.config.js"></script>
<script data-require="angular.js#*" data-semver="4.0.0" src="tsconfig.json"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myctrl">
<div id="wrapper" class="wrapper">
<div id="aside" class="sidebar">
<div>
<ul class="nav">
<li>Home</li>
<li>Experience is the key of the item of the rest of the kind</li>
<li>Services</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- /Aside -->
<div class="hideButton">
<div class="Aligner">
<a class="button" ng-click="toggle()"></a>
</div>
</div>
<div id="content" class="content">
<h1>Flexbox Off-Canvas Side Menu</h1>
<h2>Easy to use</h2>
<div>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use
Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections
1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Where can I get some? There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,
by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators
on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum
which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</div>
</div>
<!-- /Content -->
</div>
</body>
</html>
/*
* ==== RESETS ====
*/
* {
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
/*
* ==== IMPORTS ====
*/
/*
* ==== STYLING ====
*/
html,
body {
height: 100%;
}
body {
font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
}
.wrapper {
display: flex;
height: 100%;
padding: 20px;
}
.hideButton {
display: flex;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hideButton a {
border: 1px solid;
border-radius: 2px;
}
/*
* ==== SIDEBAR ====
*/
.sidebar {
display: flex;
min-height: 100%;
flex-grow: auto;
transition: all linear 5s;
border: 1px solid;
border-radius: 5px;
padding: 5px;
opacity: 1;
}
.sidebar.isClosed {
flex-grow: 0;
border: none;
opacity: 0;
}
.sidebar ul.nav {
display: flex;
flex-direction: column;
width: 100%;
opacity: 1;
transition: all linear 5s;
}
.sidebar ul.nav.isClosed li {
display: none;
}
.sidebar ul.nav li {
list-style: none;
padding: 20px 0;
border: 1px solid #ccc;
border-radius: 5px;
margin: 2px 0;
transition: all linear 5s;
}
.sidebar ul.nav li a {
display: block;
opacity:1;
text-decoration: none;
color: #666;
text-align: center;
padding: 0 2px;
transition: all linear 5s;
}
.sidebar ul.nav.isClosed li a{
display:none;
opacity:0;
}
.sidebar ul.nav li a:hover {
color: #000;
}
.sidebar div {
max-width: 180px;
}
/*
* ==== CONTENT ====
*/
.content {
min-height: 100%;
flex-grow: 9;
padding: 40px;
transform: translate3d(0, 0, 0);
transition: transform 5s;
}
/*
* ==== TOGGLE BUTTON ====
*/
a.button {
cursor: pointer;
/* position: absolute;
top: 10px;
left: 10px;*/
display: block;
}
a.button:before {
font-weight: bold;
font-size: 20px;
content: "<";
transition: content linear 1s;
}
.isClosed a.button::before {
content: '>';
transition: content linear 1s;
}
/*
* ==== MEDIA QUERIES ====
*/
#media only screen and (max-device-width: 736px) and (orientation: portrait) {
.wrapper {
flex-direction: column;
}
.sidebar {
min-height: 60px;
max-height: 60px;
}
.sidebar ul.nav {
padding: 20px;
flex-direction: row;
}
.sidebar ul.nav li {
display: inline-block;
padding: 2%;
}
.content {
/*TBD*/
}
.content a.button {
display: none;
}
}
var app = angular.module('app', []);
app.controller('myctrl', function($scope) {
$scope.toggle = function() {
angular.element(document.querySelector('.sidebar')).toggleClass('isClosed');
angular.element(document.querySelector('.hideButton')).toggleClass('isClosed');
angular.element(document.querySelector('.sidebar ul.nav')).toggleClass('isClosed');
}
})
Related
Can't understand why the text inside my card is not expanding to the height I want. Find my code bellow in order to understand what I am doing wrong. I've tried everything, but I can't really get why this is not expanding without interfere in the size I want.
This is the part of the card I want to fill with text (in orange):
* {
margin:0;
box-sizing: border-box;
font-family: "Encode Sans", sans-serif;
}
.container {
width: 100%;
}
section {
padding: .1em;
}
.row {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
}
.column {
float: left;
width: 50%;
padding: 0 10px;
}
.card {
height: 100%;
padding: 5em 2em;
text-align: left;
background: linear-gradient(0deg, #ff6500 6px, transparent 1px);
background-repeat: no-repeat;
background-position: 0 0.62em;
box-shadow: 0 0 .5em rgba(0, 0, 0, 5);
border-radius: 1em;
transition: 0.5s;
}
.card h3 {
font-size: 1.1em;
margin: 1.5em 0 1em 0;
font-weight: 600;
letter-spacing: 1px;
color: #070024;
text-align: center;
}
.card .textadm {
line-height: 2.2em;
color: #625a71;
height: 580px;
}
.card .scroll-bg {
background-color: white;
width: 100%;
padding-bottom: 5px;
}
.card .scroll-div {
width: 102%;
background-color: white;
height: px;
overflow: hidden;
overflow-y: scroll;
}
.card .scroll-div::-webkit-scrollbar {
width: 3px;
}
.card .scroll-div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 8px #fff;
}
.card .scroll-div::-webkit-scrollbar-thumb {
background-color: #625a71;
}
.card .scroll-object {
line-height: 1em;
color: #625a71;
height:580px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<section>
<div class="row">
<div class="column">
<div class="card">
<h3>Message</h3>
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<p class="textadm">
<span lang="EN-US" style="line-height:120%">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
* {
margin: 0;
box-sizing: border-box;
font-family: "Encode Sans", sans-serif;
}
.container {
width: 100%;
}
section {
padding: .1em;
}
.row {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
}
.column {
float: left;
width: 50%;
padding: 0 10px;
}
.card {
height: 100%;
padding: 3em 2rem;
text-align: left;
background: linear-gradient(0deg, #ff6500 6px, transparent 1px);
background-repeat: no-repeat;
background-position: 0 0.62em;
box-shadow: 0 0 .5em rgba(0, 0, 0, 5);
border-radius: 1em;
transition: 0.5s;
}
.card h3 {
font-size: 1.1em;
margin: 1.5em 0 1em 0;
font-weight: 600;
letter-spacing: 1px;
color: #070024;
text-align: center;
}
.card .textadm {
line-height: 2.2em;
color: #625a71;
height: 580px;
}
.card .scroll-bg {
background-color: white;
width: 100%;
padding-bottom: 5px;
}
.card .scroll-div {
width: 102%;
background-color: white;
/* height: px; */
overflow: hidden;
overflow-y: scroll;
border: 2px solid orange;
/*Here is what you have to add*/
padding: 10px;
}
.card .scroll-div::-webkit-scrollbar {
width: 3px;
}
.card .scroll-div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 8px #fff;
}
.card .scroll-div::-webkit-scrollbar-thumb {
background-color: #625a71;
}
.card .scroll-object {
line-height: 1em;
color: #625a71;
height: 580px;
}
#Rekcs. I think it's due to padding-bottom of card element. Please try to reduce it.
Hope this helps. Happy coding~ :)
Just add padding-bottom: 10px; to .card, or whatever spacing you want.
The above photo is the output of the CSS code; it was supposed to display 2 columns (#leftcolumn and #rightcolumn) with some random text inside the 2 columns respectively, but the output displayed just the #leftcolumn with the text in it alone.
Please, how do I solve it?
body {
margin: 0;
padding: 0;
line-height: 1.5em;
}
#header {
background: black;
font-family: Arial;
height: 100px;
}
#contentwrapper {
float: left;
width: 100%;
}
#contentcolumn {
margin: 0px 230px 0px 230px;
}
#leftcolumn {
float: left;
width: 230px;
margin-left: -230px;
background: #f0071b;
}
#rightcolumn {
float: left;
margin-left: -230%;
width: 230px;
background: #20e6d2;
}
.innertext {
margin: 20px;
font-family: Arial;
color: #d6a7c4;
text-align: justify;
}
#footer {
clear: left;
/* Cannot float on left */
width: 100%;
background: #000000;
color: #FFF;
font-family: Arial;
text-align: center;
padding: 4px;
}
/* Navigation Bar Begins here */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-size: #000;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #d2f7f0;
}
.active {
background-color: #025dfa;
}
/* Responsive Css Layout */
#media (max-width: 840px) {
/* drop Right Column Drop Down */
#leftcolumn {
margin-left: -100px;
}
#rightcolumn {
float: none;
width: 100% margin-left: 0;
clear: both;
}
#contentcolumn {
margin-right: 0;
/* left margin to leftcolumnWidth */
}
}
#media (max-width: 600px) {
/* Drop left column down */
#leftcolumn {
float: none;
width: 100%;
clear: both;
margin-left: 0;
}
#contentcolumn {
margin-left: 0;
}
}
<div id="container">
<div id="header">
<ul style="display: inline;">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertext">
<b>Welcome!</b><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br />Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at
its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors
now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and
the like).
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertext">
<b>The left Column: <em>230px</em></b><br />Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes
from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
</div>
</div>
<div id="rightcolumn">
<div class="innertext">
<b>The right column:<em>230px</em></b><br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first
true generator on the Internet.
</div>
</div>
<div id="footer">Footer</div>
</div>
margin-left: -230%; moves the element out of the visible area (230% to the left). Erase that and you'll see it again.
Or did you mean pixels instead of percent?
As I understood I created a design using your code. Get some Idea if you expect this way
I have used
display:flex
method, have a look
.header{
background: black;
font-family: Arial;
height: 100px;
}
.contentwrapper{
display: flex;
}
.footer{
clear: left;
width: 100%;
background: #000000;
color: #FFF;
font-family: Arial;
text-align: center;
padding: 4px;
}
.leftcolumn {
background: #f0071b;
}
.rightcolumn {
background: #20e6d2;
}
/* Navigation Bar Begins here */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-size: #000;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #d2f7f0;
}
.active {
background-color: #025dfa;
}
<div id="container">
<div class="header">
<ul style="display: inline;">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="contentwrapper">
<div class="leftcolumn">
<b>The left Column: <em>230px</em></b><br />Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes
from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
</div>
<div class="innertext">
<b>Welcome!</b><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br />Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page
editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour
and the like).
</div>
<div class="rightcolumn">
<b>The right column:<em>230px</em></b><br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the
first true generator on the Internet.
</div>
</div>
<div class="footer">Footer</div>
</div>
In my search for a neat, nice and working "Read more / Read Less"-function I managed to find below code. This code works fine and can be used several times on the same page (what I really need).
This piece of code have one backslash. I need to also show/hide several images which this code will hide BUT the "Show more/less"-button will move according to the size of the image which is really not what I need.
I cannot see how to modify this code so it can hide images as well.
The problem can be seen in this JSFiddle: https://jsfiddle.net/xrtxqu94/16/
CSS
.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'Show more';
}
.read-more-state:checked ~ .read-more-trigger:before {
content: 'Show less';
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}
HTML
<input type="checkbox" class="read-more-state" id="post-1" />
<div class="read-more-wrap">
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<span class="read-more-target">Why do we use it?
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" height="auto" width="250px" />
<p>Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</span></div>
<label for="post-1" class="read-more-trigger"></label>
CSS Solution
Thanks to Logiwan, setting the image height to 0 and auto will make the image work as the text.
.read-more-target img {
height: 0;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target img {
height: auto;
}
Complete code:
.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-target img {
height: 0;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target img {
height: auto;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'Show more';
}
.read-more-state:checked ~ .read-more-trigger:before {
content: 'Show less';
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}
Should be able to use the same idea for the height of all images inside the .read-more-target.
Something like this:
.read-more-target img {
height: 0;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target img {
height: auto;
}
Here is an edit to your fiddle that does this: https://jsfiddle.net/xrtxqu94/20/
event if the container of the images are set to opacity:0 , the images will still occupy space in the document flow.
here is a solution, you can add the following rules :
.read-more-state ~ .read-more-wrap img {
display: none;
}
.read-more-state:checked ~ .read-more-wrap img {
display: block;
}
this will ensure that the image takes no space when the read-more state is closed
https://jsfiddle.net/xrtxqu94/26/
I am trying to create a full height div (.wrapper) which contains a header, body and a footer, where based on the content, the header/footer should expand/shrink and the body should scroll if it overflows,
or in other words
I don't want the container div to scroll, only the body should scroll upon overflow.
.wrapper {
position: absolute;
top: 0;
width: 50%;
right: 0;
bottom: 0;
overflow-y: auto;
box-shadow: 0 0 10px 1px #7f7f7f;
}
.wrapper .blade-container {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid #7f7f7f;
border-bottom: none;
align-self: strech;
}
.wrapper .blade-container .blade-header {
display: flex;
background-color: black;
color: white;
justify-content: space-between;
padding: 5px;
}
.wrapper .blade-container .blade-header .header-title {
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: "Segoe UI", "Segoe UI Light", "Segoe WP Light", "Segoe WP", Tahoma, Arial, sans-serif;
}
.wrapper .blade-container .blade-header .header-title .header-title-wrapper {
width: 100%;
color: inherit;
}
.wrapper .blade-container .blade-header .header-actions {
display: flex;
}
.wrapper .blade-container .blade-header .header-actions .action-button {
display: flex;
height: 30px;
width: 30px;
background-color: transparent;
justify-content: center;
align-items: center;
transition: background-color 0.4s ease-out;
cursor: pointer;
}
.wrapper .blade-container .blade-header .header-actions .action-button:hover {
background: rgba(230, 230, 230, 0.3);
}
.wrapper .blade-container .blade-header .header-actions .danger:hover {
background-color: #aa0000 !important;
}
.wrapper .blade-container .blade-body {
display: flex;
padding: 5px;
height: 100%;
background-color: white;
}
.wrapper .blade-container .blade-body .blade-body-wrapper {
width: 100%;
height: 100%;
background-color: inherit;
overflow-y: auto;
}
.wrapper .blade-container .blade-footer {
display: flex;
align-self: stretch;
color: white;
}
.wrapper .blade-container .blade-footer .blade-footer-wrapper {
padding: 3px;
width: 100%;
height: 100%;
background-color: #323232;
}
<div class="wrapper">
<div class="blade-container">
<div class="blade-header">
<div class="header-title">
<div class="header-title-wrapper">
Lorem Ipsum
</div>
</div>
<div class="header-actions">
<span class="action-button">
<b>⊟</b>
</span>
<span class="action-button" (click)="onMaximize()">
<b>⊞</b>
</span>
<span class="action-button danger" id="ngxBladeCloseBtn">
<b>×</b>
</span>
</div>
</div>
<div class="blade-body">
<div class="blade-body-wrapper">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
<h3> Where does it come from? </h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
versions from the 1914 translation by H. Rackham.
</p>
<h3> Where can I get some? </h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem
Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It
uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
words etc.</p>
</div>
</div>
<div class="blade-footer">
<div class="blade-footer-wrapper">
<h3> Footer </h3>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</div>
</div>
</div>
</div>
Right now I am getting a scrollbar for the wrapper too, how can I avoid it?
I tried setting overflow-y: hidden for .wrapper, but it just hides the footer.
I'm sorry about the lengthy code, it's for an angular component which uses ng-content, hence all the additional wrapper classes inside header, body and footer.
Codepen
Like this:
removed bottom:0
.wrapper {
position: absolute;
top: 0;
width: 50%;
right: 0;
overflow-y: auto;
box-shadow: 0 0 10px 1px #7f7f7f;
}
.wrapper .blade-container {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid #7f7f7f;
border-bottom: none;
align-self: strech;
}
.wrapper .blade-container .blade-header {
display: flex;
background-color: black;
color: white;
justify-content: space-between;
padding: 5px;
}
.wrapper .blade-container .blade-header .header-title {
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: "Segoe UI", "Segoe UI Light", "Segoe WP Light", "Segoe WP", Tahoma, Arial, sans-serif;
}
.wrapper .blade-container .blade-header .header-title .header-title-wrapper {
width: 100%;
color: inherit;
}
.wrapper .blade-container .blade-header .header-actions {
display: flex;
}
.wrapper .blade-container .blade-header .header-actions .action-button {
display: flex;
height: 30px;
width: 30px;
background-color: transparent;
justify-content: center;
align-items: center;
transition: background-color 0.4s ease-out;
cursor: pointer;
}
.wrapper .blade-container .blade-header .header-actions .action-button:hover {
background: rgba(230, 230, 230, 0.3);
}
.wrapper .blade-container .blade-header .header-actions .danger:hover {
background-color: #aa0000 !important;
}
.wrapper .blade-container .blade-body {
display: flex;
padding: 5px;
height: 100%;
background-color: white;
}
.wrapper .blade-container .blade-body .blade-body-wrapper {
width: 100%;
height: 100%;
background-color: inherit;
overflow-y: auto;
}
.wrapper .blade-container .blade-footer {
display: flex;
align-self: stretch;
color: white;
}
.wrapper .blade-container .blade-footer .blade-footer-wrapper {
padding: 3px;
width: 100%;
height: 100%;
background-color: #323232;
}
<div class="wrapper">
<div class="blade-container">
<div class="blade-header">
<div class="header-title">
<div class="header-title-wrapper">
Lorem Ipsum
</div>
</div>
<div class="header-actions">
<span class="action-button">
<b>⊟</b>
</span>
<span class="action-button" (click)="onMaximize()">
<b>⊞</b>
</span>
<span class="action-button danger" id="ngxBladeCloseBtn">
<b>×</b>
</span>
</div>
</div>
<div class="blade-body">
<div class="blade-body-wrapper">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
<h3> Where does it come from? </h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
versions from the 1914 translation by H. Rackham.
</p>
<h3> Where can I get some? </h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem
Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It
uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
words etc.</p>
</div>
</div>
<div class="blade-footer">
<div class="blade-footer-wrapper">
<h3> Footer </h3>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</div>
</div>
</div>
</div>
If you want .blade-body to scroll, then remove height: 100%; and use flex:1; + overflow:scroll;
.wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
right: 0;
overflow-y: auto;
box-shadow: 0 0 10px 1px #7f7f7f;
}
.wrapper .blade-container {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid #7f7f7f;
border-bottom: none;
align-self: strech;
}
.wrapper .blade-container .blade-header {
display: flex;
background-color: black;
color: white;
justify-content: space-between;
padding: 5px;
}
.wrapper .blade-container .blade-header .header-title {
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: "Segoe UI", "Segoe UI Light", "Segoe WP Light", "Segoe WP",
Tahoma, Arial, sans-serif;
}
.wrapper .blade-container .blade-header .header-title .header-title-wrapper {
width: 100%;
color: inherit;
}
.wrapper .blade-container .blade-header .header-actions {
display: flex;
}
.wrapper .blade-container .blade-header .header-actions .action-button {
display: flex;
height: 30px;
width: 30px;
background-color: transparent;
justify-content: center;
align-items: center;
transition: background-color 0.4s ease-out;
cursor: pointer;
}
.wrapper .blade-container .blade-header .header-actions .action-button:hover {
background: rgba(230, 230, 230, 0.3);
}
.wrapper .blade-container .blade-header .header-actions .danger:hover {
background-color: #aa0000 !important;
}
.wrapper .blade-container .blade-body {
display: flex;
padding: 5px;
flex: 1;
overflow: auto;
background-color: white;
border: solid red;
}
.wrapper .blade-container .blade-body .blade-body-wrapper {
width: 100%;
height: 100%;
background-color: inherit;
overflow-y: auto;
}
.wrapper .blade-container .blade-footer {
display: flex;
align-self: stretch;
color: white;
}
.wrapper .blade-container .blade-footer .blade-footer-wrapper {
padding: 3px;
width: 100%;
height: 100%;
background-color: #323232;
}
<div class="wrapper">
<div class="blade-container">
<div class="blade-header">
<div class="header-title">
<div class="header-title-wrapper">
Lorem Ipsum
</div>
</div>
<div class="header-actions">
<span class="action-button">
<b>⊟</b>
</span>
<span class="action-button" (click)="onMaximize()">
<b>⊞</b>
</span>
<span class="action-button danger" id="ngxBladeCloseBtn">
<b>×</b>
</span>
</div>
</div>
<div class="blade-body">
<div class="blade-body-wrapper">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
<h3> Where does it come from? </h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
versions from the 1914 translation by H. Rackham.
</p>
<h3> Where can I get some? </h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem
Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It
uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
words etc.</p>
</div>
</div>
<div class="blade-footer">
<div class="blade-footer-wrapper">
<h3> Footer </h3>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</div>
</div>
</div>
</div>
beside it might be wise to set some min-height, so content remains seeable on smaller screens
.wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
right: 0;
overflow-y: auto;
box-shadow: 0 0 10px 1px #7f7f7f;
}
.wrapper .blade-container {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid #7f7f7f;
border-bottom: none;
align-self: strech;
}
.wrapper .blade-container .blade-header {
display: flex;
background-color: black;
color: white;
justify-content: space-between;
padding: 5px;
}
.wrapper .blade-container .blade-header .header-title {
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: "Segoe UI", "Segoe UI Light", "Segoe WP Light", "Segoe WP",
Tahoma, Arial, sans-serif;
}
.wrapper .blade-container .blade-header .header-title .header-title-wrapper {
width: 100%;
color: inherit;
}
.wrapper .blade-container .blade-header .header-actions {
display: flex;
}
.wrapper .blade-container .blade-header .header-actions .action-button {
display: flex;
height: 30px;
width: 30px;
background-color: transparent;
justify-content: center;
align-items: center;
transition: background-color 0.4s ease-out;
cursor: pointer;
}
.wrapper .blade-container .blade-header .header-actions .action-button:hover {
background: rgba(230, 230, 230, 0.3);
}
.wrapper .blade-container .blade-header .header-actions .danger:hover {
background-color: #aa0000 !important;
}
.wrapper .blade-container .blade-body {
display: flex;
padding: 5px;
flex: 1;
overflow: auto;
min-height:50vh;
background-color: white;
border: solid red;
}
.wrapper .blade-container .blade-body .blade-body-wrapper {
width: 100%;
height: 100%;
background-color: inherit;
overflow-y: auto;
}
.wrapper .blade-container .blade-footer {
display: flex;
align-self: stretch;
color: white;
}
.wrapper .blade-container .blade-footer .blade-footer-wrapper {
padding: 3px;
width: 100%;
height: 100%;
background-color: #323232;
}
<div class="wrapper">
<div class="blade-container">
<div class="blade-header">
<div class="header-title">
<div class="header-title-wrapper">
Lorem Ipsum
</div>
</div>
<div class="header-actions">
<span class="action-button">
<b>⊟</b>
</span>
<span class="action-button" (click)="onMaximize()">
<b>⊞</b>
</span>
<span class="action-button danger" id="ngxBladeCloseBtn">
<b>×</b>
</span>
</div>
</div>
<div class="blade-body">
<div class="blade-body-wrapper">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
<h3> Where does it come from? </h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
versions from the 1914 translation by H. Rackham.
</p>
<h3> Where can I get some? </h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem
Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It
uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
words etc.</p>
</div>
</div>
<div class="blade-footer">
<div class="blade-footer-wrapper">
<h3> Footer </h3>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</div>
</div>
</div>
</div>
I'm learning frontend web design and i'm trying to build a fully responsive blog like static page.
But my problem is the image are not aligning properly with the paragraph.
As the "Dont Forget to follow Up!" image was supposed to come in the first post content only that is Don't forget to follow Up should be with content What is Lorem Ipsum .. But it's showing up with Where Does it comes from.
My Question is Why Does This happens ? workaround i've seen here How to float paragraph next to image without wrapping the image? but i didn't get this why this problem actually happens.
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
h1 {
font-size: 1.5em;
font-style: italic;
font-weight: normal;
}
h1 a {
color: #747474;
font: bold 0.45833em Calibri, Optima, Arial, sans-serif;
letter-spacing: 0.15em;
text-transform: : uppercase;
text-decoration: none;
}
#page {
margin: 36px auto;
width: 90%;
}
#nav {
float: right;
/*padding: 42px 0 0 30px;*/
}
#nav li {
float: left;
margin: 0 0 0 5px;
}
.blog {
clear: both;
margin: 50px auto 53px;
width: 93.75%;
}
.blog .main {
float: left;
width: 62.88%;
/* 566px / 900px */
}
.blog .other {
float: right;
width: 36.77%;
/* 331px / 900px */
}
.lede {
padding: 0.8em 5.333%;
}
.recent-entries {
margin: 0 auto;
width: 69.788%;
/* 231 / 331px */
}
.article {
padding: 40px 8.480%;
}
.date {
float: left;
margin-left: -17.088%;
/* 81px / 474px */
width: 14.55%;
/* 69px / 474px */
border: 1px solid black;
border-radius: 2px;
padding: 0.59%;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.date:hover {
background: #9c3;
}
img,
embed,
object,
video {
max-width: 100%;
}
.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.531%;
/* 12px / 474px */
width: 48.734%;
/* 231px / 474px */
}
h2 {
color: #F90B6D;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
font-weight: 300;
}
p {
color: #222;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
font-weight: 400;
}
<!-- <h1> This is the top header! Read More </h1> -->
<div id="page">
<ul id="nav">
<li>About me
</li>
<li>About Blog
</li>
<li>Stuff
</li>
<li>Junk Stuff
</li>
</ul>
<div class="blog section">
<h1 class="lede">Responsive Blog </h1>
<div class="main">
<div class="article">
<div>
<div class="date">
1 Sept 2015
</div>
<h2> What is Lorem Ipsum ?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages , and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div class="figure">
<p>
<img src="http://i.stack.imgur.com/I3hYQ.png" alt="">
<b class="figcaption">Remember This</b>
</p>
</div>
</div>
<div class="date">
5 Sept 2015
</div>
<h2> Where does it comes from ? </h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original
form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
<!--/end.main -->
<div class="other">
<p>Recent Enteries</p>
<div class="recent-entries">
<p>1.Simply First Entry</p>
<p>2. Simply second Entry</p>
</div>
</div>
<!-- /end .other -->
</div>
<!--/end .blog.section -->
</div>
<!-- /end #page-->
floatting element should come first/ahead in code from element in the natural flux.
see (among others links you can find on search engines) : https://css-tricks.com/all-about-floats/
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
h1 {
font-size: 1.5em;
font-style: italic;
font-weight: normal;
}
h1 a {
color: #747474;
font: bold 0.45833em Calibri, Optima, Arial, sans-serif;
letter-spacing: 0.15em;
text-transform: : uppercase;
text-decoration: none;
}
#page {
margin: 36px auto;
width: 90%;
}
#nav {
float: right;
/*padding: 42px 0 0 30px;*/
}
#nav li {
float: left;
margin: 0 0 0 5px;
}
.blog {
clear: both;
margin: 50px auto 53px;
width: 93.75%;
}
.blog .main {
float: left;
width: 62.88%;
/* 566px / 900px */
}
.blog .other {
float: right;
width: 36.77%;
/* 331px / 900px */
}
.lede {
padding: 0.8em 5.333%;
}
.recent-entries {
margin: 0 auto;
width: 69.788%;
/* 231 / 331px */
}
.article {
padding: 40px 8.480%;
}
.date {
float: left;
margin-left: -17.088%;
/* 81px / 474px */
width: 14.55%;
/* 69px / 474px */
border: 1px solid black;
border-radius: 2px;
padding: 0.59%;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.date:hover {
background: #9c3;
}
img,
embed,
object,
video {
max-width: 100%;
}
.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.531%;
/* 12px / 474px */
width: 48.734%;
/* 231px / 474px */
}
h2 {
color: #F90B6D;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
font-weight: 300;
}
p {
color: #222;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
font-weight: 400;
}
<!-- <h1> This is the top header! Read More </h1> -->
<div id="page">
<ul id="nav">
<li>About me
</li>
<li>About Blog
</li>
<li>Stuff
</li>
<li>Junk Stuff
</li>
</ul>
<div class="blog section">
<h1 class="lede">Responsive Blog </h1>
<div class="main">
<div class="article">
<div>
<div class="date">
1 Sept 2015
</div>
<div class="figure">
<p>
<img src="http://dummyimage.com/290x400&text=Dont-Forget-To-Follow-Up" alt="">
<b class="figcaption">Remember This</b>
</p>
</div>
<h2> What is Lorem Ipsum ?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages , and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="date">
5 Sept 2015
</div>
<h2> Where does it comes from ? </h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original
form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
<!--/end.main -->
<div class="other">
<p>Recent Enteries</p>
<div class="recent-entries">
<p>1.Simply First Entry</p>
<p>2. Simply second Entry</p>
</div>
</div>
<!-- /end .other -->
</div>
<!--/end .blog.section -->
</div>
<!-- /end #page-->
Each HTML element has got a display value which defines how the element is displayed. This value for most elements is block or inline; block elements always start on a new line and take up the full width available while inline elements stay on the same line and take only the amount of space they need.
<p> elements fall within the block elements class while <img> elements fall in the inline one.
For further explanations and example take a look here W3C School - HTML Block and Inline Elements