So my problem is pretty simple. I am creating a report that can be anywhere from one to 100 pages roughly. it is variable based on multiple factors. What I am having issues with is that I need to have a set footer on EVERY page. I can get the footer to sit where I need it to and look the way I want. HOWEVER, the div's I am using to display my content overflow behind my footer. So my question is simply how to I for any content that does not fit in the content div to overflow on the next page and not simply to fill the printable space? is this even possible?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: #fff;
margin: 0px;
height: 278mm;
margin-bottom: 20mm;
}
.page {
width: 217mm;
height: 268mm;
}
footer {
bottom: 0;
height: 10mm;
background: black;
color: white;
width: 200mm;
position: fixed;
}
.whiteBox {
min-height: 5mm;
height: auto;
font-size: 3mm;
line-height: 2;
border-left: 1px solid #a95346;
border-bottom: 1px solid #a95346;
color: #000;
letter-spacing: 0.1mm;
float: left;
display: inline-block;
text-align: center;
}
.content {
width: 217mm;
height: 250mm;
font-family: 'Verdana';
display: inline-block;
background: #fff;
float: left;
}
.pb {
page-break-before: always;
}
#media print {
body {
background-color: #fff;
margin: 0px;
height: 278mm;
margin-bottom: 20mm;
}
.page {
width: 217mm;
height: 268mm;
}
footer {
bottom: 0;
height: 10mm;
background: black;
color: white;
width: 200mm;
position: fixed;
}
.whiteBox {
min-height: 5mm;
height: auto;
font-size: 3mm;
line-height: 2;
border-left: 1px solid #a95346;
border-bottom: 1px solid #a95346;
color: #000;
letter-spacing: 0.1mm;
float: left;
display: inline-block;
text-align: center;
}
.content {
width: 217mm;
height: 250mm;
font-family: 'Verdana';
display: inline-block;
background: #fff;
float: left;
}
.pb {
page-break-before: always;
}
}
</style>
</head>
<body>
<div class="page" style="border: 1px dotted;">
<div class="content" style="border: none">
<div class="whiteBox" style="width: 217mm; border: none;">
<div class="whiteBox" style="width: 217mm; border: none">Text ...</div>
<div class="whiteBox" style="width: 217mm; border: none">Text ...</div>
<div class="whiteBox" style="width: 217mm; border: none">Text ...</div>
</div>
</div>
<div class="pb"></div>
<div class="whiteBox" style="width: 217mm; border: none;">
<footer>
<p>Posted by: Hege Refsnes</p>
</footer>
</div>
</div>
</body>
</html>
Related
I am trying to create a website where I have divs side by side in a list (separated by a vertical line). I am referencing this design
I am having trouble making the design responsive: I tried using % but when resizing the browser, the divs containing my text content move down and awkwardly collide/crash into each other (and don't stay separated by the vertical line). I am wondering if anyone knows how to keep the divs separated and responsive when resizing
#experience {
border: 1px solid red;
padding-top: 0px;
margin-top: 0px;
min-height: 1000px;
}
.center_text {
border: 1px solid black;
padding-top: 1%;
text-align: center;
color: #001418;
font-weight: 600;
font-family: 'Josefin Sans', sans-serif;
font-size: 2em;
}
.vline {
height: 740px;
width: 1px;
border: none;
border-right: solid 1px black;
z-index: 10;
}
.circle2 {
border: 50px solid black;
width: 1px;
border: none;
border-right: solid 1px black;
z-index: 10;
}
#exp1 {
border: 1px solid blue;
font-family: 'Josefin Sans', sans-serif;
color: #182153;
margin-top: -43%;
height: 150px;
}
.circle:before {
content: ' \25CF';
font-size: 20px;
margin-left: 49.69%;
}
.exp_text {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
margin: 0 auto;
border: 1px solid red;
margin-top: -2%;
min-height: 110px;
}
.left_exp {
border: 1px solid green;
text-align: right;
margin-left: 25%;
}
.right_exp {
margin-top: -5.8%;
border: 1px solid green;
width: min-content;
margin-left: 60%;
}
.date {
font-size: 1.3em;
font-weight: 600;
}
.company {
font-size: 1.3em;
font-weight: 600;
}
.role {
font-size: 1em;
min-width: 250px;
}
.job_descr {
font-size: 1em;
min-width: 250px;
}
<div id="experience">
<h3 class="center_text"> Experience</h3>
<div>
<hr class="vline" />
<div id="exp1">
<span class="circle"></span>
<div class="exp_text">
<div class="left_exp">
<div class="date">
<p>2022 </p>
</div>
<div class="role">
<p>Software Engineering Intern</p>
</div>
</div>
<div class="right_exp">
<div class="company">
<p>Company Name</p>
</div>
<div class="job_descr">
<p>Description.................</p>
</div>
</div>
</div>
</div>
</div>
</div>
The solution was to use flexbox.
#experience_content {
margin: 0 auto;
min-height: 100vh;
width: min-content;
}
.row {
display: flex;
}
.column {
color: black;
flex:33.3%;
padding: 20px;
}
and
<div id="experience">
<div id="experience_content">
<div class="row">
<div class="column">
</div>
</div>
</div>
</div>
How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>
This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>
I've trouble finding a good solution fo a relativly simple responsive layout problem.
It's a product item component which should look like in this example.
It brings some sort of equal-height-requirement with it (on desktop img to other content and on mobile img to product-info).
As stand alone it woudnt be a problem but i struggle with finding a good practice for two different viewports without duplicate content/markup.
Main Problem is the wrapping/flow-behaviour. Usually i would place a wrapper arround info and detail, but because of the mobile version this isn't possible.
Can maybe give me someone a good hint how to solve my problem?
Would be much appreciated
Thx and greetings, eldaDev
.product-item {
display: flex;
flex-wrap: wrap;
border: 1px solid #333;
}
.product-item__image {
width: 25%;
background-color: #ccc;
}
.product-item__info {
width: 75%;
background-color: green;
}
.product-item__detail {
width: 100%;
background-color: blue;
}
<!-- Markup example mobile version alike -->
<div class="product-item">
<div class="product-item__image">img</div>
<div class="product-item__info">info content</div>
<div class="product-item__detail">detail content</div>
</div>
.product-item {
}
.product-item__image img{width:100%}
.product-item__image {
float: left;
width: 20%;
height: 400px;
background: #ffd9d9;
}
.product-item__info {
float: left;
width: 80%;
background: #f1f1f1;
text-align: center;
padding: 80px 0;
}
.product-item__detail {
float: left;
width: 80%;
background: #bfbfbf;
text-align: center;
padding: 80px 0;
}
#media (max-width: 767px) {
.product-item__image {
float: left;
width:20%;
}
.product-item__info {
float: right;
width: 70%;
background: #f1f1f1;
text-align: center;
padding: 120px 0;
}
.product-item__detail {
float: none;
width: 100% !important;
background: #bfbfbf;
text-align: center;
padding: 80px 0;
clear: both;
}
}
<div class="product-item">
<div class="product-item__image">img</div>
<div class="product-item__info">info content</div>
<div class="product-item__detail">detail content</div>
</div>
Try this: It is working for me. float and #media() used to make it responsive. If not work, then let me know. Its my pleasure to help others :)
*{
font-family: arial;
color: #aaa;
font-weight: normal;
}
.wrapper{
border: solid 1px #363636;
width: 500px;
height: 200px;
padding: 10px;
}
.image{
float: left;
height: 100px;
width: 20%;
border: solid 1px #363636;
}
.images > img{
height: 90%;
}
.product_info{
float: left;
margin-left: 2%;
border: solid 1px #363636;
width: 77%;
height: 100px;
text-align: center;
}
.product_detail{
float: left;
margin-top: 2%;
border: solid 1px #363636;
width: 99%;
text-align: center;
height: 85px;
}
#media(max-width: 767px;){
.image{
float: left;
height: 200px;
width: 20%;
border: solid 1px #363636;
}
.product_detail{
float: right;
margin-top: 2%;
margin-left: 22%;
border: solid 1px #363636;
width: 77%;
text-align: center;
height: 85px;
}
}
<center>Desktop</center>
<div class="wrapper">
<div class="image">
<img src="https://i.stack.imgur.com/D8dBds.png" alt="IMG">
</div>
<div class="product_info">
<h1>Product Info</h1>
</div>
<div class="product_detail">
<h1>Product Detail</h1>
</div>
</div>
I've got a group of three elements. Section, that contain a header and a div element. Now what I want to do is to add another div element within the div element, but when I do that both elements move down (dislocate from when they supposed to be).
HTML:
<div class="main"><!-- main container -->
<section class="head"><!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">Damian</h> Tuszynski<br>
Network Solutions Architect
<p>
Mobile<br>
</p>
<p>
Email<br>
</p>
</div>
</div>
</section><!-- header section -->
</div>
CSS, for the header group:
.head {
border: 1px solid green;
white-space: nowrap;
width:1900px;
height:900px;
}
.img_header {
border: 1px solid black;
display: inline-block;
width: 600px;
height: 900px;
background-color: #E8E2E2;
position: relative;
}
#head_container {
border: 1px solid orange;
display: inline-block;
width: 1250px;
height: 900px;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
display: block;
margin-top: 300px;
margin-left: 280px;
position: relative;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
position: relative;
display: block;
}
.mark {
color: #A1E3D8;
}
what am I missing here?
.head {
border: 1px solid green;
white-space: nowrap;
width:1900px;
height:900px;
}
.img_header {
border: 1px solid black;
display: inline-block;
width: 600px;
height: 900px;
background-color: #E8E2E2;
position: relative;
}
#head_container {
border: 1px solid orange;
display: inline-block;
width: 1250px;
height: 900px;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
display: block;
margin-top: 300px;
margin-left: 280px;
position: relative;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
position: relative;
display: block;
}
.mark {
color: #A1E3D8;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<section class="head"><!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">John</h> Snow<br>
Network Solutions Architect
<p>
Mobile<br>
</p>
<p>
Email<br>
</p>
</div>
</div>
</section><!-- header section -->
</body>
When you are making both header and div as inline-block they should be side-by-side ,but as you adding an image in the header the next div is moving . The best way to do this is to use display:flex
check this snippet
.head {
border: 1px solid green;
white-space: nowrap;
width: 1900px;
height: 900px;
display: flex;
}
.img_header {
border: 1px solid black;
width: 600px;
height: 900px;
background-color: #E8E2E2;
}
#head_container {
border: 1px solid orange;
width: 1250px;
height: 900px;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
display: block;
margin-top: 300px;
margin-left: 280px;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
position: relative;
}
.mark {
color: #A1E3D8;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<section class="head">
<!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">John</h>Snow
<br>Network Solutions Architect
<p>
Mobile
<br>
</p>
<p>
Email
<br>
</p>
</div>
</div>
</section>
<!-- header section -->
</body>
Solution without flex,is to use display:table and make every content within it as display:table-cell
check this snippet
.head {
border: 1px solid green;
white-space: nowrap;
width: 1900px;
height: 900px;
display: table;
}
.img_header {
border: 1px solid black;
display: table-cell;
width: 600px;
height: 900px;
background-color: #E8E2E2;
}
#head_container {
border: 1px solid orange;
display: table-cell;
width: 1250px;
height: 900px;
vertical-align: top;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
margin-top: 300px;
margin-left: 280px;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
}
.mark {
color: #A1E3D8;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<section class="head">
<!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">John</h>Snow
<br>Network Solutions Architect
<p>
Mobile
<br>
</p>
<p>
Email
<br>
</p>
</div>
</div>
</section>
<!-- header section -->
</body>
Hope this helps
I have a three column layout. My center div is my main content area. I would like that when my content is not wide this div stretches to fill the available space horizontally and while not critical it would be nice to have it stretch vertically also. I used an online layout generator to create this style. See the attached image
Any help would be apreciated.
<!DOCTYPE html>
<html>
<head>
<title>CSS Portal - Layout</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<STYLE>
/* Generated by http://www.cssportal.com */
#import url("reset.css");
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color:#333
}
p {
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 600px;
max-width: 1000px;
margin: 0 auto;
}
#headerwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#header {
height: 75px;
background: #FF6633;
border-radius: 10px;
border: 1px solid #eb521f;
margin: 5px;
}
#navigationwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#navigation {
height: 40px;
background: #FFCC33;
border-radius: 10px;
border: 1px solid #ebb81f;
margin: 5px;
}
#contentliquid {
float: left;
width: 100%;
}
#contentwrap {
margin-left: 150px;
margin-right: 150px;
float: left;
}
#content {
background: #FF724F;
border-radius: 10px;
border: 1px solid #eb5e3b;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
margin-left:-100%;
float: left;
}
#leftcolumn {
background: #33CCFF;
border-radius: 10px;
border: 1px solid #1fb8eb;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
margin-left: -150px;
float: left;
}
#rightcolumn {
background: #CC33FF;
border-radius: 10px;
border: 1px solid #b81feb;
margin: 5px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #33FF66;
border-radius: 10px;
border: 1px solid #1feb52;
margin: 5px;
}
</STYLE>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<?PHP include 'header_page.php'; ?>
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
<?PHP include 'main.php'; ?>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<?PHP include 'left.php'; ?>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<?PHP include 'right.php'; ?>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<?PHP include 'footer.php'; ?>
</div>
</div>
</div>
</body>
</html>
you can use flex layout to solve it, here you can find an example .