i have this website: http://ba-test.nowcommu.myhostpoint.ch/antonio2/
as you can see i'm using a background picture for the section with the 3 columns (i'm using Bootstrap). What i'm asking you is if it is possible, instead to use a background picture, to create this shape(screenshot) for that div (code)
HTML:
<div class="row fluid bg" style="background-image: url('img/bg_section.png') !important; background-size: 100%; background-repeat: no-repeat; height: 893px;">
<div class="col-lg-12">
<div class="col-md-4">
<h1 class="headline home">ARCHITEKTUR</h1>
<h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
<p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
</div>
<div class="col-md-4">
<h1 class="headline home">LAGE</h1>
<h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
<p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
</div>
<div class="col-md-4">
<h1 class="headline home">WOHNUNGEN</h1>
<h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
<p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
</div>
<div class="col-lg-8">
<img class="img-responsive" src="img/place.jpg" />
</div>
</div>
</div>
CSS Clip Path
This is possible using clip-path to create the desired design.
clip-path MDN
clip-path Browser Support
clip-path is not currently very well supported but looks to be the future in basic shape design.
div {
width: 500px;
-webkit-clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
background: lightgrey;
padding: 8px 10%;
box-sizing: border-box;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci arcu, sollicitudin eu sem sit amet, euismod commodo urna. Nullam lobortis sem orci, sit amet dictum metus sagittis sit amet. Sed molestie condimentum felis a ornare. In hac habitasse
platea dictumst. Sed dolor metus, convallis ac semper nec, tincidunt quis diam. Phasellus dapibus urna ac leo luctus tincidunt. Ut molestie aliquet ante, vitae dictum ligula pulvinar et. Sed bibendum a nulla non fermentum. Pellentesque magna ex, suscipit
consequat tincidunt id, semper sed arcu. Nam sodales a neque et vestibulum. Nam eu mi sapien. Nulla lacinia nibh in venenatis ornare. Integer sit amet arcu a massa tempus ultricies in eu orci. Aliquam sit amet scelerisque ex. Vestibulum auctor in
velit quis suscipit.</p>
<p>Vivamus porta turpis tempor auctor mattis. Quisque vitae nisi libero. Sed arcu dui, pharetra ac erat ac, euismod tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras bibendum tellus at luctus porttitor.
Curabitur imperdiet libero ligula. Sed ut lorem vel nisi porttitor efficitur ut finibus orci. Etiam auctor tellus sit amet ipsum porta, sed eleifend risus iaculis. Vivamus et lectus in diam molestie aliquet. Nulla a sapien vel felis imperdiet ornare.
Ut vulputate pellentesque lectus quis ultrices.</p>
</div>
You can use after and before pseudo-elements to do this. Apply transform to the pseudo-elements width perspective
div{
width:500px;
height:300px;
padding:50px;
position:relative;
color:#fff;
margin:50px;
}
div:after{
z-index:-1;
position:absolute;
content:"";
width:100%;
height:50%;
transform:perspective(500px) rotateX(10deg);
left:0;
top:0;
background:grey;
}
div:before{
position:absolute;
content:"";
width:100%;
height:50%;
transform:perspective(500px) rotateX(-10deg);
top:50%;
background:grey;
left:0;
z-index:-1;
}
<div class="container">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>
This can also be achieved by rotating the hexagons seen here
Related
I want to convert html to pdf. I was wondering if there is any way to add fixed header and footer to the pdf. I have been looking around the web, #page css is used to add it but its not working for me. Or am i using it wrong? Please help.
window.print();
*,
::after,
::before {
box-sizing: border-box;
}
html {
font-family:'sans-serif';
line-height: 1.15;
}
body {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #000000;
text-align: left;
background-color: #fff;
}
.wrapper {
margin: 0 auto;
padding: 20px;
}
#page {
size: A4;
margin-top: 0.25in;
margin-bottom: 0.25in;
border: 1px solid black;
#top-center {
content: 'Hello World';
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html</title>
</head>
<body>
<div class="wrapper">
<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>Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Massa tincidunt dui ut ornare lectus sit. At auctor urna nunc id cursus metus aliquam. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi. Quam elementum pulvinar etiam non quam lacus suspendisse. Nam at lectus urna duis convallis convallis tellus. Sem nulla pharetra diam sit. Viverra maecenas accumsan lacus vel facilisis volutpat. Ut enim blandit volutpat maecenas. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Pharetra massa massa ultricies mi quis hendrerit dolor. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis.
</p>
<p>Molestie ac feugiat sed lectus vestibulum mattis. Et netus et malesuada fames ac turpis egestas sed tempus. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Varius vel pharetra vel turpis. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Aliquam sem et tortor consequat id porta. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Elit duis tristique sollicitudin nibh sit amet commodo. Vel turpis nunc eget lorem dolor sed viverra. Aliquam sem fringilla ut morbi tincidunt. Viverra nam libero justo laoreet sit amet. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Accumsan tortor posuere ac ut consequat semper. Vulputate enim nulla aliquet porttitor lacus luctus. Eget duis at tellus at urna condimentum mattis pellentesque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
</p>
</div>
</body>
</html>
Your code is fine. The thing is, that your operating system pdf converter does not fully support #page syntax. You can try to convert your code to PDF using PrinceXML Converter and your headers and formatting is here.
Codepen: https://codepen.io/pprunesquallor/pen/qKxvrX
I'm a beginner playing around with grid and flexbox.
I'd like the height of the article element (yellow) to be only just as long as the text requires (so in this case cca half as long), and therefore the aside element (grey) should be of the same height depending on the height of the article, and scrollable.
Thank you in advance!!
html, body {
height: 100%;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"footer";
align-items: stretch;
}
header {
grid-area: header;
display: flex;
flex-direction: column;
background-color: lime;
}
header > h1 {
margin: 0;
background-color: brown;
}
nav {
display: flex;
flex-direction: row;
background-color: orange;
}
main {
grid-area: main;
display: flex;
flex-direction: row;
background-color: red;
}
article {
background-color: yellow;
}
aside {
width: 50%;
overflow: auto;
overflow-y: scroll;
background-color: grey;
}
footer {
grid-area: footer;
background-color: pink;
}
<html lang="en">
<body>
<header>
<h1 id="title">Header Title</h1>
<nav>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 1</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 2</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 3</button>
</form>
</nav>
</header>
<main id="main">
<article id="info">
<h2>Article Title</h2>
"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 <a id="link" href="" target="_blank">Link</a> 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."
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo urna, porta ac interdum placerat, rhoncus vel lectus. Aenean consectetur condimentum augue fringilla elementum. Mauris vel fermentum nisi. Donec nec condimentum sapien. Donec feugiat consequat est ac hendrerit. Phasellus nec turpis ex. Vestibulum malesuada leo mauris. Proin posuere ultricies mauris, at varius lorem laoreet sed. Nam congue, arcu sed feugiat scelerisque, massa turpis convallis ante, eu lobortis orci leo et ex. Vivamus ut aliquet massa.
<br>
Curabitur placerat gravida est, eu rutrum metus suscipit sit amet. Mauris placerat nibh felis, sit amet semper dolor facilisis ornare. Proin ut ultrices nisl. Aliquam laoreet porttitor ex quis elementum. Nullam nibh metus, convallis nec lectus vel, sollicitudin malesuada diam. Quisque nec semper turpis. Etiam vel eros porta, tincidunt nisl at, luctus elit. Fusce tristique nulla pharetra sagittis fermentum. Duis eget pharetra dolor, sagittis venenatis purus. Sed volutpat nisl et turpis consectetur blandit. In nunc eros, vehicula eu augue non, vehicula varius arcu. Mauris ut est elementum, tempus tellus pharetra, pretium urna. Nunc hendrerit finibus enim at efficitur. Vestibulum sagittis dolor et vehicula feugiat.
</article>
<aside><h3>Aside</h3>
Quisque volutpat turpis eu turpis elementum placerat. Integer auctor venenatis turpis, sit amet accumsan mi sagittis a. In scelerisque tempor dolor, sit amet mattis mi accumsan porta. Integer lacinia lobortis est sit amet bibendum. Vivamus faucibus aliquet odio vel vestibulum. Proin sit amet accumsan eros, hendrerit posuere magna. Ut et odio ac velit congue tincidunt. Suspendisse quis ex egestas, facilisis turpis id, cursus neque. Donec vulputate urna vel nisl convallis, pellentesque egestas felis placerat. Curabitur sit amet odio eget ante porttitor convallis et tempus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tellus sem, pharetra ut odio id, lobortis volutpat sem. In dictum at eros at vulputate. Morbi vel dui non erat vehicula suscipit quis eu ante. Proin condimentum sem dui, at mollis justo sollicitudin quis. Duis hendrerit tempus felis.
<br>
Morbi eget libero tristique eros porta tincidunt in et eros. Fusce tincidunt sit amet leo eu gravida. Maecenas ac imperdiet magna. Nullam tincidunt ultricies dignissim. Sed placerat leo in libero dignissim, sit amet volutpat arcu posuere. Sed consectetur eu arcu eu pulvinar. Integer varius rutrum orci, ac maximus nibh laoreet in. Duis laoreet elit quis erat fermentum luctus. Aliquam sollicitudin id odio sit amet vehicula. Sed tempor id quam vel lobortis.
<br>
Duis accumsan, sem et suscipit dictum, enim magna ornare justo, condimentum vulputate eros felis at ex. Nulla facilisi. Nunc porttitor semper est, eget accumsan ex accumsan quis. Integer tincidunt dignissim nisl. Sed ultrices venenatis massa, sed maximus massa pharetra ac. Sed tempus tempus dolor id pulvinar. Donec rutrum, diam et condimentum sollicitudin, ex nulla faucibus quam, quis eleifend risus ante aliquam turpis.
</aside>
</main>
<footer>Footer</footer>
</body>
</html>
Is there a way to do this just with CSS?
You could use positioning.
HTML: Wrap the aside content in an additional container
<aside>
<div class="aside__inner">
...content...
</div>
</aside>
CSS:
aside {
position: relative;
}
.aside__inner {
position: absolute;
}
codepen
If you need the header and footer to expand so that the article is only as tall as its content, you can add grid-template-rows: auto min-content auto to body.
I'd also suggest using min-width instead width on aside
html,
body {
height: 100%;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "header" "main" "footer";
align-items: stretch;
/* added */
grid-template-rows: auto min-content auto;
}
header {
grid-area: header;
display: flex;
flex-direction: column;
background-color: lime;
}
header>h1 {
margin: 0;
background-color: brown;
}
nav {
display: flex;
flex-direction: row;
background-color: orange;
}
main {
grid-area: main;
display: flex;
flex-direction: row;
background-color: red;
}
article {
background-color: yellow;
}
aside {
width: 50%;
overflow: auto;
overflow-y: scroll;
background-color: grey;
position: relative;
}
.aside__inner {
position: absolute;
}
footer {
grid-area: footer;
background-color: pink;
}
<html lang="en">
<body>
<header>
<h1 id="title">Header Title</h1>
<nav>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 1</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 2</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 3</button>
</form>
</nav>
</header>
<main id="main">
<article id="info">
<h2>Article Title</h2>
"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
<a
id="link" href="" target="_blank">Link</a> 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."
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo urna, porta ac interdum placerat, rhoncus vel lectus. Aenean consectetur condimentum augue fringilla elementum. Mauris vel fermentum nisi. Donec nec condimentum sapien. Donec
feugiat consequat est ac hendrerit. Phasellus nec turpis ex. Vestibulum malesuada leo mauris. Proin posuere ultricies mauris, at varius lorem laoreet sed. Nam congue, arcu sed feugiat scelerisque, massa turpis convallis ante, eu lobortis orci
leo et ex. Vivamus ut aliquet massa.
<br> Curabitur placerat gravida est, eu rutrum metus suscipit sit amet. Mauris placerat nibh felis, sit amet semper dolor facilisis ornare. Proin ut ultrices nisl. Aliquam laoreet porttitor ex quis elementum. Nullam nibh metus, convallis nec lectus
vel, sollicitudin malesuada diam. Quisque nec semper turpis. Etiam vel eros porta, tincidunt nisl at, luctus elit. Fusce tristique nulla pharetra sagittis fermentum. Duis eget pharetra dolor, sagittis venenatis purus. Sed volutpat nisl et turpis
consectetur blandit. In nunc eros, vehicula eu augue non, vehicula varius arcu. Mauris ut est elementum, tempus tellus pharetra, pretium urna. Nunc hendrerit finibus enim at efficitur. Vestibulum sagittis dolor et vehicula feugiat.
</article>
<aside>
<div class="aside__inner">
<h3>Aside</h3>
Quisque volutpat turpis eu turpis elementum placerat. Integer auctor venenatis turpis, sit amet accumsan mi sagittis a. In scelerisque tempor dolor, sit amet mattis mi accumsan porta. Integer lacinia lobortis est sit amet bibendum. Vivamus faucibus aliquet
odio vel vestibulum. Proin sit amet accumsan eros, hendrerit posuere magna. Ut et odio ac velit congue tincidunt. Suspendisse quis ex egestas, facilisis turpis id, cursus neque. Donec vulputate urna vel nisl convallis, pellentesque egestas felis
placerat. Curabitur sit amet odio eget ante porttitor convallis et tempus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tellus sem, pharetra ut odio id, lobortis volutpat sem. In dictum
at eros at vulputate. Morbi vel dui non erat vehicula suscipit quis eu ante. Proin condimentum sem dui, at mollis justo sollicitudin quis. Duis hendrerit tempus felis.
<br> Morbi eget libero tristique eros porta tincidunt in et eros. Fusce tincidunt sit amet leo eu gravida. Maecenas ac imperdiet magna. Nullam tincidunt ultricies dignissim. Sed placerat leo in libero dignissim, sit amet volutpat arcu posuere.
Sed consectetur eu arcu eu pulvinar. Integer varius rutrum orci, ac maximus nibh laoreet in. Duis laoreet elit quis erat fermentum luctus. Aliquam sollicitudin id odio sit amet vehicula. Sed tempor id quam vel lobortis.
<br> Duis accumsan, sem et suscipit dictum, enim magna ornare justo, condimentum vulputate eros felis at ex. Nulla facilisi. Nunc porttitor semper est, eget accumsan ex accumsan quis. Integer tincidunt dignissim nisl. Sed ultrices venenatis massa,
sed maximus massa pharetra ac. Sed tempus tempus dolor id pulvinar. Donec rutrum, diam et condimentum sollicitudin, ex nulla faucibus quam, quis eleifend risus ante aliquam turpis.
</div>
</aside>
</main>
<footer>Footer</footer>
</body>
</html>
Would this do what you want? https://codepen.io/anon/pen/OEZMwV
I just added the following JS, added an ID to <aside>, and changed the display of the #info id.
$("#aside").css({
'height': ($("#info").height() + 'px')
});
Here's a pen where I have this working.
https://codepen.io/anon/pen/jKKvpb
Basically, what you're asking for is not possible given the HTML/CSS you provided. The grid rows will automatically size themselves according to the height of the tallest item in the column. There's no way to grab the natural height of the <article> element due to the the flex css on <main>.
The workaround is to add a wrapper <div> around the <article> element. I did this with jQuery because I'm lazy but you should probably add it to the HTML. I did add some css to make the colors of the divs match up.
Here's my code:
//wrap the article in a div
jQuery('#info').wrap('<div id="article-wrap"></div>');
//a function that gets the height of the article and sets the aside to the height of the article
function sizeMe() {
var height= jQuery('#info').height();
jQuery('#aside').css('height', height);
}
//run the function on page load
sizeMe();
//to make it responsive run the function if the page is resized.
jQuery(window).resize( function(){
sizeMe();
});
how can I create this css design?
trying to have no scroll page with white div on a picture to be scrollable
when I use height 100% then sidebar will be displayed OK, but scrollable area will go under the screen, so light gray area is some kind of wraper background and white area is content and I want to add margins with css on it as well
NOTE: would like to avoid media query for this
Here's a solution:
position: absolute can position everything, and then the scrollable area will change size depending on the window size.
* {
box-sizing: border-box;
}
.wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: #ddd;
}
.sidebar {
position: absolute;
top: 100px;
left: 0;
width: 200px;
bottom: 0;
background: #aaa;
}
.main {
position: absolute;
top: 100px;
left: 200px;
bottom: 0;
right: 0;
padding: 20px;
background: #f1f1f1;
}
.scrollable {
padding: 5px;
width: 100%;
height: 100%;
overflow: auto;
background: #fff;
}
.scrollable p {
margin: 0 0 1rem;
}
<div class="wrapper">
<div class="navbar">
Navbar
</div>
<div class="sidebar">
Sidebar
</div>
<div class="main">
<div class="scrollable">
<p>
Scrollable with lots of content inside...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</p>
<p>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</p>
<p>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>
</div>
You can do something like this, Flexbox example:
/* reset browser defaults */
* {margin:0;padding:0;box-sizing:border-box;overflow:auto}
html, body {width:100%;height:100%}
#container {
width: 100%;
height: 100%;
display: flex; /* displays children inline */
flex-wrap: wrap; /* enables wrapping */
}
#container > * {
border: 1px solid;
}
nav {
flex: 0 1 100%;
background: #777;
}
aside {
flex: 0 1 200px;
background: #777;
}
.scroll {
flex: 0 1 calc(100% - 250px); /* - 200px of the aside's width - 2 x 25px left & right margin */
margin: 25px;
overflow: auto; /* mandatory */
position: relative; /* mandatory */
}
.content {
width: 2000px;
height: 2000px;
background: #eee;
position: absolute; /* mandatory */
}
<div id="container">
<nav>NAVBAR</nav>
<aside>SIDEBAR</aside>
<div class="scroll">
SCROLLABLE AREA
<p class="content">some pretty big content for testing...</p>
</div>
</div>
The trick lies in the positioning of the content and it's parent, without the positioning, the overflow-y: scroll or overflow-y: auto on the parent doesn't apply.
I don't know if it's looking like what you want to achieve, but here is a quick snippet.
I've put your scrollable area within a container, and I put a max height to that container. Then you just have to add overflow-y: scroll to make it scroll
body {
max-height: 100vh;
display: flex;
flex-flow: row nowrap;
}
.sidebar {
width: 20%;
background-color: #333;
}
.container {
width: 80%;
max-height: 100%;
overflow-y: scroll;
background-color: #eee;
}
.area{
margin: 20px;
background:#fff;
overflow: hidden;
padding: 10px;
}
<body>
<div class="sidebar"></div>
<div class="container">
<div class="area">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sagittis lectus, sit amet placerat nisl. Pellentesque blandit porttitor massa vel dignissim. Fusce id velit id libero lacinia tristique. Morbi pretium tempor sapien, id blandit arcu
congue sed. Mauris ultrices tincidunt ipsum, non rhoncus eros consequat vel. Etiam consequat efficitur nibh sed semper. Donec sit amet lobortis diam, et malesuada ligula. Ut a pretium velit, vel porta metus. Proin placerat sollicitudin imperdiet.
Pellentesque dolor nisi, sagittis a diam ut, varius aliquet turpis. Vestibulum pharetra elementum velit, id accumsan felis dignissim sed. Integer tristique faucibus tempor. Aenean varius est eu nisi suscipit interdum. Nam blandit ut nunc ac venenatis.
Donec diam justo, rhoncus in libero ac, tincidunt auctor dolor.
</p>
<p>
Aliquam id orci pharetra, aliquam diam quis, mattis nisi. Maecenas hendrerit eget ex sed consectetur. Praesent at dolor sit amet nisl gravida aliquam. Phasellus maximus fermentum est. Integer sodales tincidunt volutpat. Mauris sit amet lectus non ipsum
tincidunt posuere ut at diam. Nunc in ipsum tincidunt, tempus eros in, viverra diam. Vestibulum convallis odio in arcu consequat congue. Duis egestas ante a orci volutpat, ac commodo est molestie. Aliquam nisl ex, tincidunt in posuere vitae, pretium
rhoncus ligula. Aliquam vehicula turpis sed auctor hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec metus tellus, faucibus et libero in, luctus cursus tortor. Fusce vel magna lorem.
Aenean sodales sollicitudin eros, quis aliquet mi finibus sit amet.
</p>
<p>
Maecenas ut convallis arcu. Morbi sed fringilla libero. Fusce id posuere tellus. Sed imperdiet, justo vel sollicitudin fermentum, mauris ante lacinia ex, vel mollis nisi metus rhoncus ex. Nam et mauris euismod, vehicula tellus vel, aliquet mauris. Aliquam
finibus enim at maximus imperdiet. Suspendisse porta ipsum ac urna fermentum, at pharetra nisl vestibulum. Praesent sollicitudin tristique nibh id eleifend. Proin ut orci sit amet sapien fringilla consectetur sed id sem. Vestibulum et sollicitudin
libero. Curabitur enim neque, euismod vitae felis nec, sagittis cursus sem. Mauris id ornare felis.
</p>
<p>
Aliquam at accumsan magna. Cras eleifend purus quis consectetur posuere. Aliquam nec nunc at tortor sollicitudin interdum. Donec metus tellus, pretium nec ipsum id, sollicitudin pulvinar nisi. Etiam finibus, velit id rhoncus posuere, risus ex auctor nulla,
et placerat orci tellus non dolor. Fusce id sodales est. Aliquam fringilla nibh ut mi auctor eleifend. Phasellus placerat rhoncus ligula ut mollis. Sed a elementum eros, sodales suscipit ante. Sed vitae neque turpis.
</p>
<p>
Etiam sed pulvinar magna, non laoreet magna. Fusce ullamcorper mauris sit amet ligula ullamcorper tempor. Etiam convallis ante sed odio ultrices, id sagittis lorem pretium. Sed ligula odio, volutpat nec vestibulum a, dignissim a leo. Ut ultrices ligula
erat, sit amet cursus odio ornare ac. Etiam molestie ex nisi, et luctus ligula mollis sed. Nullam ac tempus sapien. Aenean varius lacus ac lacinia imperdiet. Sed arcu lorem, facilisis ut ipsum vel, tempor fermentum ex. In scelerisque laoreet arcu,
nec vestibulum turpis. Praesent dolor massa, imperdiet vitae efficitur in, laoreet quis urna. Morbi malesuada orci id ipsum aliquet bibendum. Maecenas commodo ultricies arcu quis venenatis. Nunc tellus quam, feugiat non urna posuere, ornare sollicitudin
nunc. In condimentum, tortor eget ultricies faucibus, ligula urna molestie sem, et suscipit arcu augue vitae magna. Ut pulvinar ipsum eu porttitor elementum.
</p>
<p>
Vivamus laoreet eros sed mollis tempor. Cras rhoncus placerat erat. Morbi vel est sed erat hendrerit hendrerit et ac odio. Aliquam tincidunt lacinia dui sollicitudin gravida. Pellentesque eget consequat mauris. Maecenas at erat nec mauris mollis faucibus.
Sed eget semper eros, vitae iaculis elit. Fusce et interdum elit. Morbi tincidunt felis sed enim congue porta. Proin eget feugiat purus. Praesent placerat convallis nulla, eu convallis risus faucibus molestie. Maecenas non interdum erat. Interdum
et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
</div>
</body>
I'm working on a responsive webpage that has photos of people's faces as floated IMGs next to some descriptive text about each person.
This works very well at smaller page widths, but when the page gets wide, the text associated with the next person starts next to the previous person's image.
I need a way to force text appear no higher than the top of the particular image.
I've set up a JSFiddle here.
img {
float: left;
clear: both;
margin: 0 20px 20px 0;
}
<img src="https://placehold.it/300x300">
<h1>First person's name</h1>
<p>A few paras of text.</p>
<img src="https://placehold.it/300x300">
<h1>Second person's name</h1>
<p>A few paras of text.</p>
Note: the clear: both is there to make sure the second image doesn't float to the right of the first image.
EDIT: Ideally I would do this without using any special markup, such as DIVs and inline style. The reason for this is that this content is being entered into our CMS by non-technical staff using the TinyMCE editor. Ideally these people wouldn't need to know any HTML. So I would really prefer a CSS-only solution.
You can clear the float after the p element using:
<div style="clear:both"></div>
See demo below:
#container img {
float: left;
margin: 0 20px 20px 0;
}
<div id="container">
<img src="https://placehold.it/360x360">
<h1>
First person's name
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
</p>
<div style="clear:both"></div>
<img src="https://placehold.it/360x360">
<h1>
Second person's name
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
</p>
</div>
If markup can't be changed, you can use a pseudo element to p:
p:after {
display: block;
content: '';
clear: both;
}
See demo below:
#container img {
float: left;
margin: 0 20px 20px 0;
}
p:after {
display: block;
content: '';
clear: both;
}
<div id="container">
<img src="https://placehold.it/360x360">
<h1>
First person's name
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
</p>
<img src="https://placehold.it/360x360">
<h1>
Second person's name
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
</p>
</div>
Try using Bootstrap column structure
#container img {
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
<img src="https://placehold.it/360x360">
</div>
<div class="col-xs-6 col-sm-6">
<h1>First person's name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in. Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
</p>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6">
<img src="https://placehold.it/360x360">
</div>
<div class="col-xs-6 col-sm-6">
<h1>Second person's name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in. Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
</p>
</div>
</div>
Try using divs and clear elements pseudo selector before and after
Demo link
.top-content:after, .top-content:before {
display: block;
content: "";
clear: both;
margin-bottom: 30px;
}
For the site I'm currently making, on the right side is a sidebar with some content that extends to the bottom of the page. To the left is the main content of the site, separated into several bootstrap rows and columns, which also go to the bottom of the page.
However, these two sides of the page do not end at the same spot, making it look like this:
I scratched out the name in the picture.
I had a fix in mind, but I wanted to ask here before I can implement it tomorrow morning if it'd work. If I set a specific height for the sidebar on the right, and then set specific heights for the containers on the left that add up to that same height on for the content on the right, would that fix this issue in all browsers? I'm hiding the right side content on mobile and tablets, so it's not an issue there. Any help would be appreciated.
Relevant code below, this is for the sidebar on the right, on the left are several rows and columns using bootstrap.
I've tried several things to fix this, like playing with the spacing, but it's clear that will never work on every browser. Please let me know if you need any more information.
<div class="test-container testimonials hidden-sm hidden-xs">
<!--Testimonial Container -->
<h3>Testimonials & Reviews</h3>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
<p class="customer-name">-Name</p>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
<p class="customer-name">-Name</p>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
<p class="customer-name">-Name</p>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
<p class="customer-name">Name</p>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."
<p class="customer-name">Name</p>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
<p class="customer-name">-Name</p>
</div>
<!-- End Testimonial Container-->
Apply a display:flex to the .container
Remove the float property on .test-container
Remove the margin top on .test-container
Take out the red experimental border on .content-container
fiddle is here
Did you perhaps want to make something like this? (two div have same height, and will follow the height of the higher div, run the code snippet below)
then you can use flex. that if you don't need to support older IE version. if you want to support older IE, then you need to do it via javascript.
.wrapper {
display: flex;
width: 100vw;
font-size: 0;
}
.right-content {
width: 20%;
display: inline-block;
font-size: 16px;
background-color: green;
}
.left-content {
width: 80%;
display: inline-block;
font-size: 16px;
vertical-align: top;
background-color: red;
}
<div class="wrapper">
<div class="left-content">
<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 class="right-content">
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
</div>
</div>