My code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
html,body {margin: 0;padding: 0;box-sizing: border-box;}
html{
height: 100%;
}
body{
height: 100%;
}
.app {
height: 100%;
}
.page {
height: 100%;
background: linear-gradient(to bottom, #c2e59c , #64b3f4);
position: relative;
}
.chat {
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: scroll;
}
p{
padding: 155px 5px;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="app">
<div class="page">
<div class="chat">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>
This is a simple full page chat box. It looks good. Just one problem, it can not scroll well on mobile, it stops scrolling when you untouch, it doesn't have continuity like it should.
Any idea why is that?
live demo for mobile test: http://demo.thatilike.com
note: you won't see the problem on chrome mobile mode, it needs to be tested on real mobile
Add -webkit-overflow-scrolling: touch; to the scrollable element. This will add momentum scrolling to the element on touch devices. But be sure to leave overflow-y: scroll for desktop.
Related
Here's a sample:
div {
height: 0;
overflow: hidden;
padding: 12px;
background: tan;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Is there a way to prevent padding from increasing the size of the div? Some threads suggest using box-sizing: border-box, but it doesn't seem to work in this case.
Replace it with margin by adding an extra div
div.box {
height: 0;
overflow: hidden;
background: tan;
}
div.box div {
margin: 12px;
}
<div class="box">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
Or consider some hack with pseudo element:
div.box {
height: 0;
overflow: hidden;
background: tan;
padding: 0 15px; /* horizontal padding */
}
div.box:before,
div.box:after {
content: "";
display: block;
height: 12px; /* vertical padding */
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
If you are there for extra space, you can use {margin} instead which will only add space outside of the ““ box. Also if you want spacing between the text, you can use css property {line-height}.
I have a css issue. As you can see in the sample below, I have a gray sidebar and a navbar. The sidebar is fixed, but I need the navbar to remain in place when the page scrolls. When I add fixed to that class, it breaks. How can I solve this issue? I also do not like that the text in the column with the paragraphs moves outside of the column when the screen resizes. How do I make the text remain inside its column on screen sizing?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Buttons Checkbox</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
<style>
#sidebar {
min-width: 250px;
}
.container {
width: 500px;
margin: 0px auto 0;
float: right;
}
.site-header {
/*width: 300px;*/
min-width: 400px;
height: 1000px;
background-color: gainsboro;
position: fixed;
}
</style>
</head>
<body>
<div id="app" class="container-fluid">
<nav class="navbar navbar-light bg-light">
<a class="" href="#">
my title
</a>
</nav>
<div class="row" style="max-width: 100%;">
<div class="col-lg-3 col-md-3">
<header class="site-header">
</header>
</div>
<div class="col-lg-6 col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script>
</script>
</body>
</html>
Add class with these properties to nav bar..this would help
position: fixed;
z-index: 1000;
width: 100%;
You can use bootstrap's built-in classes to achieve your result. If you don't want to, you need to use position:fixed on your sidebar. If you're using bootstrap, chances are that you really don't need to redefine containers unless there's a really good reason to.
I've amalgamated your problem with bootstrap's dashboard code. Here's the result I think you are looking for: https://jsfiddle.net/fatgamer85/6amht57u/9/
Here is updated code:
.site-header {
width: 100%;
max-width: 300px;
height: 1000px;
background-color: gainsboro;
position: fixed;
}
.nav-fixed {
position: fixed;
background-color: rgba(0,0,0,0.5);
transition: all 0.5s ease 0s;
width: 100%;
z-index: 991;
}
jQuery for scroll function:
$(window).scroll(function() {
var windowWidth = $(window).width();
var scroll = $(window).scrollTop();
if(windowWidth >= 768 && scroll >= 120) {
$(".navbar").addClass("nav-fixed");
}
else {
$(".navbar").removeClass("nav-fixed");
}
});
For site-header its better you add width by calulating its parent width using jQuery
I need layout with 3 columns with an image spanning across 2 in top right corner. Found several solutions, best one here:
Advanced CSS tricks: How to span an image over multiple columns in a CSS3 site layout?
But: Both don't work with Chrome. The negative top-margin makes the text disappear behind a non discoverable something.
I used the solution with the absolute positioning of the floater, as in the other solution the left margin of the floater would be a reason why the text becomes invisible...
I used div#floater to represent the image, has same effect.
HTML:
<div id="outer">
<div id="floater">
</div>
<div id="inner">
<h1>Title1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Title2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Title3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
And the CSS code:
#outer{
position: relative;
font-size: 10pt;
width: 100vw;
min-height: 88vh;
column-count: 3;
column-gap: 1vw;
padding-top: 54vw;
background-color: red;
}
#outer #floater{
position: absolute;
right: 0;
top: 0;
width: 66vw;
height: 50vw;
margin-bottom: 2vw;
display: block;
border: 2px solid blue;
}
#outer #inner{
max-width: 100vw;
background-color: green;
margin-top: -11vw;
}
I made a fiddle, in Chrome 'Title 1' diappears, in Safari and Firefox no problem. Any suggestions?
https://jsfiddle.net/20drzb3k/5/
You can give a try to backface-visibilty to cure that visual bug.
#outer #inner > *{
backface-visibility:hidden;
}
https://jsfiddle.net/20drzb3k/7/
For infos, Here is another example with a different approach (a pseudo element is pulling up first col content. https://codepen.io/gc-nomade/pen/boZaVJ
I have a three-column, fixed header/footer and three-column content layout, where left and right DIVs don't stretch to 100% height when the middle DIV overflows..
Any suggestion? Also, what do you think as far layout CSS and it's cross-browser compatibility and overall CSS usage?
Cheers,
David
jsFiddle: http://jsfiddle.net/VsTYJ/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
<style type="text/css">
html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
height: 100%;
}
#container-main
{
background: #888888;
margin: 0;
padding: 0;
font: 1.5em "Trebuchet MS", Helvetica, sans-serif;
height: 100%;
min-height: 100%;
min-width: 768px;
}
#container-left, #container-middle, #container-right
{
float: left;
margin: 0;
padding: 0;
min-height: 100%;
}
#container-left
{
background: #777777;
width: 25%;
}
#container-middle
{
background: #999999;
width: 60%;
}
#container-right
{
background: #777777;
width: 15%;
}
#container-header
{
background: #eee;
border: 0px solid #666;
height: 60px;
left: 0;
position: fixed;
width: 100%;
top: 0;
padding: 0;
}
#header-left, #header-middle, #header-right
{
text-align: center;
line-height: 60px;
margin: 0;
padding: 0;
float: left;
}
#header-left
{
background: #999999;
width: 25%;
}
#header-middle
{
background: #888888;
width: 60%;
}
#header-right
{
background: #999999;
width: 15%;
}
#container-content
{
margin: 0;
overflow: auto;
padding: 50px 0 50px 0;
width: 100%;
}
#content
{
}
#container-footer
{
background:#eee;
border: 0px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer-left, #footer-middle, #footer-right
{
text-align: center;
line-height: 60px;
margin: 0;
float: left;
}
#footer-left
{
background: #999999;
width: 25%;
}
#footer-middle
{
background: #888888;
width: 60%;
}
#footer-right
{
background: #999999;
width: 15%;
}
</style>
</head>
<body>
<div id="container-main">
<div id="container-left">
Content 1
</div>
<div id="container-middle">
<div id="container-header">
<div id="header-left">
Header Left
</div>
<div id="header-middle">
Header Middle
</div>
<div id="header-right">
Header Right
</div>
</div>
<div id="container-content">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="container-footer">
<div id="footer-left">
Footer Left
</div>
<div id="footer-middle">
Footer Middle
</div>
<div id="footer-right">
Footer Right
</div>
</div>
</div>
<div id="container-right">
Content 3
</div>
</div>
</body>
</html>
Try this
Fiddle Here:- http://jsfiddle.net/z837M/
Change i did was not to wrap the content with the background and you can use background-size is you are planning to place any image later and you can use 100% or cover as its value. Make the position Fixed and Z-Index :-1
CSS
#container-main
{
background: #888888;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
margin: 0;
padding: 0;
font: 1.5em "Trebuchet MS", Helvetica, sans-serif;
height: auto;
min-height: 100%;
min-width: 100%;
position:fixed;
z-index:-1;
}
Html
<div id="container-left">
Content 1
</div>
<div id="container-middle">
<div id="container-header">
<div id="header-left">
Header Left
</div>
<div id="header-middle">
Header Middle
</div>
<div id="header-right">
Header Right
</div>
</div>
<div id="container-content">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="container-footer">
<div id="footer-left">
Footer Left
</div>
<div id="footer-middle">
Footer Middle
</div>
<div id="footer-right">
Footer Right
</div>
</div>
</div>
<div id="container-right">
Content 3
</div>
UPDATE
Use table display to have the columns take full height. Since you have some fixed elements it doesn't matter where they reside. Fiddle
CSS
div.column {
display:table-cell;
}
div.section {
display:table-row;
}
HTML
<div id="container-wrapper" class="section">
<div id="container-left" class="column">
<div class="container-content">Content 1</div>
</div>
<div id="container-middle" class="column">
<div class="container-content">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div id="container-right" class="column">Content 3</div>
</div>
I’m looking for a way to create a newspaper layout for a website where the content is split into two columns but with a quotation box in the middle of the columns.
I know how to make two columns using CSS3 with the
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
But how do I create the quotation box in the middle and is there any way that I “wrap” the content inside the columns around the box in the middle?
I’ve attached an illustration of what I mean.
Please imagine in this illustration that the text in the two columns is wrapped around the box in the middle.
Here's a solution that works:
DEMO HERE
This would give your columns flexibility. However, your quote area would have to be a fixed height/width. If you want to adjust the quote area, change the widths/heights of the spacer divs at the beginning of each column div. Not an elegant solution, but it works.
CSS:
#one {
float:left;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#two {
float:right;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#three {
position: absolute;
left:50%;
top:100px;
margin-left:-300px;
border:1px solid;
width:600px;
height:200px;
background: maroon;
color: white;
}
HTML:
<div id="one">
<div style="float: right; height: 80px; width: 10px;"></div>
<div style="float: right; height: 210px; width: 300px; clear: both;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="three">Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. </div>
<div id="two">
<div style="float: left; height: 80px; width: 10px;"></div>
<div style="float: left; height: 210px; width: 300px; clear: both;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Notice: This builds upon peteris solution (which didn't wrap around the quote div) below.
I guess it's wrong but...:
<style>
#one {
float:left;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#two {
float:right;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#three {
position:absolute;
left:50%;
top:50%;
margin-top:-150px;
margin-left:-100px;
border:1px solid;
width:200px;
height:200px;
}
</style>
<div id="one">ONE</div>
<div id="three">3</div>
<div id="two">two</div>
It can be achieved, but... it's not flexible, you'll have to tweak the positioning for almost any change you make to the text.
DEMO
HTML
<div class='newspaper'>
<img src='http://img259.imageshack.us/img259/8049/birmancat.jpg'>
<p><!-- paragraph text --></p>
<!-- nine more paragraphs -->
</div>
CSS I've added:
.newspaper {
position: relative;
width: 580px;
padding: 10px;
margin: 0 auto;
box-shadow: 1px 1px 5px;
column-count: 2;
column-gap: 20px;
font-size: 12px
}
p { margin: 0 0 10px; }
p:nth-child(3):before, p:nth-child(8):before {
width: 145px;
height: 200px;
content: '';
}
p:nth-child(3):before {
float: right;
}
p:nth-child(8):before {
float: left;
}
.newspaper img {
position: absolute;
z-index: 2;
top: 85px; left: 50%;
margin: 0 -150px;
}
http://jsfiddle.net/iansan5653/xbfYD/4/
I modified #sean_mcgee's answer by adding some JavaScript to split the columns for you. Just place the text in the newspaperArticle div, and put your quote in the JavaScript field. It doesn't work well on a small screen because the words are longer than the space, so here is a full-screen example: http://jsfiddle.net/iansan5653/xbfYD/4/embedded/result/. The only problem is that it could split an HTML tag apart, so be careful.