div{
width: calc(5vw + 2.8868vh);
height: 100vh;
background: rgba(255, 255, 255, 0.8);
transform-origin: left;
transform: skewX(30deg) translateX(-28vh) scaleX(10);
float: left;
shape-outside: polygon(0vh 0vh, calc(50vw - 38vh) 0vh, calc(50vw + 20vh) 100vh, 0vh 100vh);
}
p{
word-spacing: 0.9em;
line-height: 1.5;
font-size: 150%;
margin: 0;
padding: 0;
font-weight: 400;
float: right;
width: 70vw;
}
<div></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis iaculis dui, quis dignissim nisi. Pellentesque ac leo neque. Nunc sit amet sollicitudin ligula, in viverra mauris. Nunc viverra mollis erat luctus blandit. Nam pharetra libero et molestie dignissim. Aliquam non mollis mauris. Donec id risus odio. Sed tempus, leo a iaculis iaculis, orci ipsum porttitor ex, in mattis odio massa at ante. Maecenas sit amet finibus lectus. Mauris convallis ullamcorper facilisis. Integer elit augue, finibus sed maximus vel, feugiat vitae tellus. Integer lobortis ultricies massa sit amet porta. Etiam erat ante, pulvinar id nulla in, ultricies consequat urna.
</p>
I did all the research I can, I tried to delete, add or replace any of the properties above, but it isn't working. Transform isn't the reason, the shape-outside shape according to Devtools is the right shape, positions don't matter, the width or height of the text doesn't do nothing, so I need your help now. What's the problem?
The angle you're talking about is shown by the transform property also you don't need to float the p to the right otherwise the text will go to the right and no text will rub against the div,also your polygon syntax is wrong.
I commented out the unnecessary lines of code
div {
width: calc(5vw + 2.8868vh);
height: 100vh;
/* background: rgba(255, 255, 255, 0.8); */
/* transform-origin: left; */
/* transform: skewX(30deg) translateX(-28vh) scaleX(10); */
float: left;
shape-outside: polygon(0 0, 10% 0, 100% 100%, 0% 100%);
}
p {
word-spacing: 0.9em;
line-height: 1.5;
font-size: 150%;
margin: 0;
padding: 0;
font-weight: 400;
/* float: right; */
width: 70vw;
}
<div></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis iaculis dui, quis dignissim nisi. Pellentesque ac leo neque. Nunc sit amet sollicitudin ligula, in viverra mauris. Nunc viverra mollis erat luctus blandit. Nam pharetra libero et molestie
dignissim. Aliquam non mollis mauris. Donec id risus odio. Sed tempus, leo a iaculis iaculis, orci ipsum porttitor ex, in mattis odio massa at ante. Maecenas sit amet finibus lectus. Mauris convallis ullamcorper facilisis. Integer elit augue, finibus
sed maximus vel, feugiat vitae tellus. Integer lobortis ultricies massa sit amet porta. Etiam erat ante, pulvinar id nulla in, ultricies consequat urna. 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>
I'll leave re shaping the polygon to you might wanna consider using this Tool
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.
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>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
I am trying to create a page on where i try to let the footer stick at the bottom of the page. It will stick but the problem is that if the browser will be minimized that the footer will go through the content of the page, but actually i want that it stays at the bottom of the page and when the browser is minimized that there will be a scroll bar.
A picture what happens when browser is minimized:
If the browser is big enough then it is ok:
This also happens with the menu:
Can anyone hint me which settings are wrong?
I use this setup:
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
This is the code:
https://jsfiddle.net/k6ocuw69/1/
Thanks for help
Remove bottom padding from wrapper
Fix those <h2>...</h4>
footerFirstColumn div is taller that your footer, increase footer
height
That's the result https://jsfiddle.net/8odoros/k6ocuw69/5/
you need to use position:fixed
check the fiddle here
EDIT: ok, maybe i understood wrong when you said "fixed". try this and see if this is what you were looking for. you can add text to content and it should still not be overlapped by your footer.
You can accomplish this with the following code:
HTML
<div class="wrapper">
<header class="header">
<h1>Page header</h1>
</header>
<section class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
</section>
<footer class="footer">
Page Footer
</footer>
</div>
CSS
* {
padding: 0;
margin: 0;
}
.wrapper {
background-color: red;
height: 100vh;
}
.header {
background-color: blue;
height: 10vh;
}
.content {
background-color: yellow;
height: 80vh;
overflow-y: scroll;
}
p {
font-size: 200%;
}
.footer {
background-color: green;
height: 10vh;
}
Codepen link
Was this what you were trying to achieve?
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 5rem;
min-height: 100%;
background-color: #f2f2f2;
}
.header {
width: 100%;
padding: 10px 0;
margin-bottom: 20px;
background-color: grey;
text-align: center;
}
.header h3 {
margin: 0;
color: white;
}
.content {
background-color: #ffffff;
margin: 0 auto;
padding: 20px 15px;
max-width: 640px;
width: 94%;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: grey;
text-align: center;
}
<div class="header">
<h3>This is the header</h3>
</div>
<div class="content">
<h1>Footer example</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. 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 class="footer">This footer will always be positioned at the bottom of the page, but <strong> is not fixed</strong>.</div>
Your demo had so much stuff that it was easier for me to do a totally new example from the scratch but this should be easily implemented to any stucture.
Note: You need to set the padding-bottom: 5rem; to body according to your footer height.
Fiddle to play with: https://jsfiddle.net/thepio/rfy0a4Lt/
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
I want to make the image move to the right side and text to the left side. I am doing it with float but I am confused, so I have deleted the code. I only have the HTML code. You can check a screenshot that shows the result I expect: http://i.imgur.com/R9aSnmw.jpg
HTML:
<div class="column2">
<p class="aboutdes">A quem consectetur, ut dolore non varias, nostrud noster qui expetendis eruditionem, culpa mandaremus non senserit. A magna fugiat dolore pariatur, ab quid consectetur et qui dolore litteris an malis commodo id nostrud</p>.
</div>
HTML: (I used a sample image)
<div class="column2">
<img src="http://cdn7.facegfx.com/psd/wp-content/uploads/2013/5/6/hd-magical-picture-book-psd.jpg" />
<p class="aboutdes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius in ligula eget bibendum. Nam faucibus lorem quis mattis rhoncus. Phasellus iaculis felis quis massa molestie rutrum. Praesent elit nisi, facilisis vitae sem eget, faucibus imperdiet elit. Mauris mauris arcu, consectetur in consectetur ac, scelerisque sit amet ante. Nulla ac consequat nibh. Nullam congue massa ipsum, nec venenatis augue semper non. Morbi hendrerit turpis est, eget luctus nulla facilisis sed! Praesent non rhoncus ipsum. Pellentesque lacinia scelerisque rutrum? Donec posuere imperdiet ligula, eget tincidunt metus!
</p>.</div>
CSS:
.column2 > img {
float: right;
width:100px; // or 30% or depends upon your requirement!
border-radius: 50%; // for the rounded image as shown in your example
margin: 0 0 15px 15px; // spacing from text
}
jsfiddle demo
Just place the <img /> element inside the <p> tag, and then set the following CSS:
p > img {
float: right;
margin: 0 0 10px 10px;
}
jsFiddle Demo
Put the <img class="right"> inside the <p>. The use
img.right { float: right; }
p { text-align: left; }