Related
I have a grid layout with text and images which I want to print and I want only the page to break in the text row, and not break in images, my grid code has two rows, one for text and one for images, and the images inside the grid is another grid for the images, the code looks like this:
.grid{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"text"
"sub-grid";
.sub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: "picture-one picture-two";
}
}
I've done a lot of tests with the page break inside:
#media print {
.sub-grid {
page-break-inside: avoid;
}
}
but never seems to work, it's always breaking the page on images when printing.
Here's a fiddle to reproduce:
https://jsfiddle.net/kwp59x3g/15/
Any help is welcome, thank you guys.
I think the problem is in .grid class. Remove .grid class and add these lines:
.text {
page-break-before: avoid;
page-break-after: auto;
}
.sub-grid {
page-break-inside: avoid;
}
.sub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: 'picture-one picture-two';
}
.picture-one {
grid-area: picture-one;
}
.picture-two {
grid-area: picture-two;
}
#media print {
* {
overflow: visible !important;
color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.text {
page-break-before: avoid;
page-break-after: auto;
}
.sub-grid {
page-break-inside: avoid;
}
}
<button onclick="window.print()">
Print
</button>
<div class="grid">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu tortor luctus, condimentum ex id, interdum lectus. Nullam nec lectus odio. Mauris quis pharetra libero. Morbi eget elementum mi, ac auctor ex. Vivamus faucibus nec justo vel dapibus. Nulla
vitae porta orci. Fusce in ex vestibulum, dapibus lorem at, scelerisque nunc. Integer auctor gravida faucibus. Integer non magna enim. Nam nec pharetra risus. Donec sagittis consectetur urna ac dictum. Nam in tortor vel nisi porta posuere. Maecenas
fermentum ipsum in dui feugiat, vel placerat velit consectetur. In nec rutrum metus. Donec rutrum risus eget orci bibendum, vel euismod erat lacinia. Duis eleifend sollicitudin sem, mattis auctor dui porta vitae. Suspendisse vel gravida tellus, non
ultricies nunc. Suspendisse ac elit blandit, lacinia tortor sed, eleifend tellus. Duis auctor dolor dolor, id vehicula turpis commodo a. Vestibulum quis tortor volutpat, imperdiet libero non, facilisis tellus. Donec eleifend, nisl eget pulvinar congue,
ipsum mi tincidunt nisi, congue laoreet ante magna at augue. Proin eleifend mattis neque, vel maximus ex facilisis eget. Sed euismod massa orci. Suspendisse at semper sapien. Sed lobortis porttitor nisl. Ut suscipit mollis risus sit amet pharetra.
Pellentesque tempor libero ut quam faucibus egestas. Mauris mattis lectus vel augue sollicitudin, varius sollicitudin ligula tristique. Maecenas non iaculis neque. Etiam commodo purus eget tortor pharetra aliquam nec ut augue. Vivamus non risus blandit,
faucibus nunc eget, lobortis nisl. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis
commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor
id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus,
quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue
ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem
quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a
congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel
lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis
urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor
rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar,
ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum
a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl
nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim
elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam
consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi.
Curabitur fermentum odio sit amet luctus sollicitudin.
</div>
<div class="sub-grid">
<img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
<img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
</div>
</div>
You can break a page break (using a page break inside) with:
tables
floating elements
block elements with borders
display: grid and display: flex don't correctly work it look like some old bug. link
This question already has answers here:
sticky position on css grid items
(3 answers)
Closed 2 years ago.
I have a layout with 3 columns when large then for mobile i resize it to each row the full width of the grid on mobile. When large I need column 1 and 3 to be sticky to the top when column 2 is scrolling. I made an example here on codesandbox.
Here is also the css from the sandbox:
.App {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-template-areas: "col1 col2 col3";
}
.column1 {
background-color: aquamarine;
grid-area: col1;
}
.column2 {
background-color: rebeccapurple;
grid-area: col2;
}
.column3 {
background-color: orange;
grid-area: col3;
}
#media only screen and (max-width: 800px) {
.App {
color: red;
grid-template-areas:
"col1 col1 col1"
"col3 col3 col3"
"col2 col2 col2";
}
}
I've tried making position sticky on .column1 but it still didnt stick to the top. Think of .column1 and .column3 as a sidebar filter. Also when on mobile dont make the columns sticky to the top
You need to set an height on the grid itself and overflow on the column supposed to scroll ( if i understood your trouble)
body {
margin: 0;
}
.App {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-template-areas: "col1 col2 col3";
height: 100vh;
}
.column1 {
background-color: aquamarine;
grid-area: col1;
}
.column2 {
background-color: rebeccapurple;
grid-area: col2;
overflow: auto;
}
.column3 {
background-color: orange;
grid-area: col3;
}
#media only screen and (max-width: 800px) {
.App {
height:auto;
color: red;
grid-template-areas:
"col1 col1 col1"
"col3 col3 col3"
"col2 col2 col2";
}
}
<div class="App">
<div class="column1">Column 1</div>
<div class="column2">
<h1>Column 2</h1>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Ut ex purus, lobortis eget dapibus sed, elementum nec tortor.
Fusce vehicula lobortis maximus. Phasellus eu ante ut massa molestie
laoreet non eget ante. Duis diam nisi, porttitor eu libero eget, commodo
tincidunt velit. Quisque a urna a quam eleifend faucibus. Integer id est
et sem placerat scelerisque. Ut tempor condimentum euismod. Phasellus a
faucibus sem. Vestibulum id interdum ligula. Proin vel tellus eget
libero convallis finibus sit amet vel tellus. Suspendisse potenti.
Mauris at eros nec nulla luctus interdum. Sed non cursus diam, vitae
commodo quam. Nam viverra quam non imperdiet sagittis. Vestibulum quis
justo ut risus varius hendrerit ac et ex. Vestibulum volutpat a felis ac
porta. Sed faucibus vitae sapien a tincidunt. Quisque ut magna in ligula
scelerisque tincidunt et ac est. Proin vitae interdum felis. Ut sem
enim, dapibus cursus vulputate commodo, venenatis ut turpis. In
dignissim sapien sit amet lorem aliquam posuere. Suspendisse vel enim
commodo, posuere orci quis, eleifend mi. Quisque in massa vitae metus
rhoncus sollicitudin. Vestibulum auctor pharetra orci non eleifend.
Donec ornare mauris mi, non sagittis odio posuere ut. Nunc quis ultrices
ex. Vestibulum massa dui, congue eu vestibulum id, cursus sit amet
turpis. Donec posuere, mauris id finibus cursus, lacus tortor fermentum
odio, vel tempor leo velit ut velit. Mauris rhoncus tempor nunc, a
aliquam purus tempus in. Cras imperdiet laoreet nunc, et efficitur odio
bibendum sit amet. Cras mattis sem non ex gravida, id suscipit nisl
lobortis. Nunc efficitur vehicula nisi ac gravida. Ut auctor dignissim
quam, at pulvinar velit vestibulum ut. Fusce nisi augue, porttitor at
commodo sit amet, porttitor a quam. Vestibulum sit amet lobortis ipsum,
a sodales tellus. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec efficitur consequat risus, vel
dignissim orci vehicula auctor. Mauris congue justo non augue
scelerisque, et imperdiet elit faucibus. Nam velit sem, luctus sit amet
nunc vel, feugiat eleifend justo. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque sodales est eget dui accumsan
laoreet. Aenean tincidunt tempor volutpat. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Aenean
nec viverra leo. Cras ut sapien scelerisque, fermentum ex nec, dapibus
velit. Vestibulum rhoncus et est nec accumsan. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Curabitur a eros justo. Vivamus efficitur eros vel sollicitudin blandit.
Vivamus non elementum purus, vitae eleifend eros. Ut sed sodales leo, ac
pharetra quam. Nunc non libero orci. Duis dapibus lacus eu tortor
feugiat finibus. Nulla laoreet aliquet commodo. Nam mauris nunc, varius
sit amet faucibus vitae, facilisis porta nulla. Donec id eleifend metus,
a laoreet ex. Praesent ac nisi pulvinar, ullamcorper ligula ac,
imperdiet ligula. Nullam diam justo, vulputate vitae ligula et, placerat
condimentum lorem. Cras bibendum lectus a eleifend feugiat. Proin
bibendum eget massa at pulvinar. Ut vel aliquam urna. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Ut ex purus, lobortis eget
dapibus sed, elementum nec tortor. Fusce vehicula lobortis maximus.
Phasellus eu ante ut massa molestie laoreet non eget ante. Duis diam
nisi, porttitor eu libero eget, commodo tincidunt velit. Quisque a urna
a quam eleifend faucibus. Integer id est et sem placerat scelerisque. Ut
tempor condimentum euismod. Phasellus a faucibus sem. Vestibulum id
interdum ligula. Proin vel tellus eget libero convallis finibus sit amet
vel tellus. Suspendisse potenti. Mauris at eros nec nulla luctus
interdum. Sed non cursus diam, vitae commodo quam. Nam viverra quam non
imperdiet sagittis. Vestibulum quis justo ut risus varius hendrerit ac
et ex. Vestibulum volutpat a felis ac porta. Sed faucibus vitae sapien a
tincidunt. Quisque ut magna in ligula scelerisque tincidunt et ac est.
Proin vitae interdum felis. Ut sem enim, dapibus cursus vulputate
commodo, venenatis ut turpis. In dignissim sapien sit amet lorem aliquam
posuere. Suspendisse vel enim commodo, posuere orci quis, eleifend mi.
Quisque in massa vitae metus rhoncus sollicitudin. Vestibulum auctor
pharetra orci non eleifend. Donec ornare mauris mi, non sagittis odio
posuere ut. Nunc quis ultrices ex. Vestibulum massa dui, congue eu
vestibulum id, cursus sit amet turpis. Donec posuere, mauris id finibus
cursus, lacus tortor fermentum odio, vel tempor leo velit ut velit.
Mauris rhoncus tempor nunc, a aliquam purus tempus in. Cras imperdiet
laoreet nunc, et efficitur odio bibendum sit amet. Cras mattis sem non
ex gravida, id suscipit nisl lobortis. Nunc efficitur vehicula nisi ac
gravida. Ut auctor dignissim quam, at pulvinar velit vestibulum ut.
Fusce nisi augue, porttitor at commodo sit amet, porttitor a quam.
Vestibulum sit amet lobortis ipsum, a sodales tellus. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Donec efficitur consequat risus, vel dignissim orci vehicula
auctor. Mauris congue justo non augue scelerisque, et imperdiet elit
faucibus. Nam velit sem, luctus sit amet nunc vel, feugiat eleifend
justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque sodales est eget dui accumsan laoreet. Aenean tincidunt
tempor volutpat. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Aenean nec viverra leo. Cras ut
sapien scelerisque, fermentum ex nec, dapibus velit. Vestibulum rhoncus
et est nec accumsan. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Curabitur a eros justo.
Vivamus efficitur eros vel sollicitudin blandit. Vivamus non elementum
purus, vitae eleifend eros. Ut sed sodales leo, ac pharetra quam. Nunc
non libero orci. Duis dapibus lacus eu tortor feugiat finibus. Nulla
laoreet aliquet commodo. Nam mauris nunc, varius sit amet faucibus
vitae, facilisis porta nulla. Donec id eleifend metus, a laoreet ex.
Praesent ac nisi pulvinar, ullamcorper ligula ac, imperdiet ligula.
Nullam diam justo, vulputate vitae ligula et, placerat condimentum
lorem. Cras bibendum lectus a eleifend feugiat. Proin bibendum eget
massa at pulvinar. Ut vel aliquam urna.
</div>
<div class="column3">Column 3</div>
</div>
For a sticky layout and the scroll on the right see https://codesandbox.io/s/sleepy-brook-3ut30 sticky column's background is drawn from the parent container , since sticky will unstick once reaching the end of the parent and scrolling along with it.
I have a flexbox A with 100vh height.
This flexbox contains a child flexbox B.
Flexbox B has one child with very long content. I want this very long to overflow inside it's div. Instead, flexbox A expands outside viewport.
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
max-height: 100vh;
display: block;
}
.parent {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.child1 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child21 {
background: green;
height: 50px;
flex-shrink: 0;
}
.child22 {
overflow: auto;
}
<html>
<body>
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra
viverra, orci dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus.
Nunc facilisis orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum,
non luctus sapien vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed
lobortis arcu sit amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est.
Nulla in nulla sagittis, ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat
risus volutpat eu. Nulla pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
</body>
</html>
My real code is more complex (vuejs components). Is there a way to fix this code ?
Update your code like below:
body {
margin: 0;
}
.parent {
height: 100vh;
display: flex;
flex-direction: column;
}
.child1,
.child21 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child2 {
min-height: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.child21 {
background: green;
}
.child22 {
overflow: auto;
}
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra viverra, orci
dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus. Nunc facilisis
orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum, non luctus sapien
vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed lobortis arcu sit
amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est. Nulla in nulla sagittis,
ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat risus volutpat eu. Nulla
pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
just add a height to your div with .child22 class as followed:
Learn more about overflow
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
max-height: 100vh;
display: block;
}
.parent {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.child1 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child21 {
background: green;
height: 50px;
flex-shrink: 0;
}
.child22 {
height:50px;
overflow: auto;
}
<html>
<body>
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra
viverra, orci dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus.
Nunc facilisis orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum,
non luctus sapien vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed
lobortis arcu sit amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est.
Nulla in nulla sagittis, ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat
risus volutpat eu. Nulla pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
</body>
</html>
I'm learning CSS and HTML as I go along, so excuse my ignorance.
I've been trying to create an about me page for the past few hours trying various combinations of CSS and HTML to get this to work but I'm having some trouble. Essentially, I'm trying to have a body of text next to a vertical image. Im trying to get the image on the right to scale so that it is the same height as the body of text and so that the image is slightly seperated from the div.I'd also like it to fill up the division; the images show what I'm trying to achieve.
This is what I've accomplished:
Progress:
What I'm trying to achieve:
Here's the relevant code:
.Row {
display: table;
table-layout: fixed;
/*this was fixed*/
margin-bottom: 5px;
}
.Column {
display: table-cell;
}
.Column #aboutMe {
background-color: rgba(50, 74, 17, 1.00);
margin-right: 20%;
float: left;
}
.Column #aboutMe h1 {
color: white;
padding-left: 10px;
}
.Column #aboutMe p {
color: white;
padding-left: 10px;
padding-right: 10px;
}
.Column #test {
max-height: 100%;
max-width: 100%;
}
<!--About me start-->
<div class="Row">
<div class="Column">
<div id="aboutMe">
<h1 id="blogTitle">What it's all about</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor eros justo, ut facilisis nisi faucibus id. Sed venenatis aliquam rutrum. Maecenas id elementum quam, eget molestie sapien. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Suspendisse eu tristique ligula. Mauris a mollis felis. Vivamus finibus mi quam, ac varius quam pretium in. Etiam fermentum dolor commodo massa fermentum, egestas porta ex bibendum. Vestibulum ac erat sem. Nam
interdum risus et tortor efficitur pretium. Curabitur lobortis massa lectus, non efficitur nisi ornare vel. Proin porttitor commodo libero, quis accumsan dui hendrerit at. Aliquam eget dui placerat, luctus nisi et, auctor mi. Aliquam a convallis
enim. Donec at nisl nec massa mollis convallis.
</p>
<p>
Curabitur tristique lacus non leo dapibus, at mattis est rutrum. Duis vel porttitor neque, nec aliquam nulla. Donec pulvinar, dui sed blandit ultrices, justo leo cursus turpis, vitae vehicula massa nisl nec erat. Vestibulum tincidunt urna non lorem consequat
pulvinar. Curabitur dignissim varius odio, eget dignissim lectus feugiat et. Praesent sit amet euismod purus. Sed lobortis bibendum risus, quis iaculis justo fermentum quis. Integer consectetur pellentesque nibh, eu dignissim odio facilisis sodales.
</p>
<p>
Nullam a felis euismod, sollicitudin enim eget, laoreet sapien. Nullam non nulla aliquet, gravida arcu sed, laoreet libero. Quisque hendrerit lobortis hendrerit. Etiam condimentum urna elit, ac tincidunt erat facilisis ut. Nullam semper leo felis, vitae
dictum dui placerat a. Maecenas ornare, lacus id vestibulum euismod, libero turpis efficitur lectus, ac vehicula odio magna sit amet lacus. Quisque id scelerisque erat. Cras placerat pulvinar libero quis lobortis. Morbi nec sem id risus scelerisque
molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum ex ac lectus porttitor, a varius elit semper. Curabitur laoreet sit amet nisl in varius. Duis eu ipsum ac risus consectetur
porta vitae eget dolor. Sed blandit, leo vitae efficitur auctor, est mi dapibus dui, et iaculis dui odio et neque.
</p>
<p>
Cras libero nibh, ullamcorper sed aliquet euismod, posuere ac erat. Nam eget tincidunt odio. Nam sed justo iaculis, blandit ui non, luctus quam. Fusce nibh ligula, laoreet laoreet eleifend a, convallis ac ex. Aenean interdum elit at erat cursus tincidunt.
Ut a placerat enim. Sed gravida fermentum varius
</p>
<p>
Curabitur vestibulum feugiat gravida. Phasellus aliquet auctor dictum. Sed sed tristique justo, id facilisis quam. Suspendisse mattis erat dolor, ac convallis sem dapibus eget. Aenean tempus posuere nibh, at molestie ante gravida vel. Praesent at accumsan
augue. Fusce volutpat et sem nec ullamcorper. Nam massa urna, sodales ac quam vitae, feugiat vulputate metus. Praesent commodo sit amet nibh in rutrum. Aliquam augue nunc, molestie eget consequat et, pretium nec risus. Sed aliquam massa sapien,
eu suscipit tortor vehicula suscipit. Maecenas et ligula vel metus dignissim vestibulum ac in nulla. Cras id ornare ligula.
</p>
</div>
</div>
<div class="Column">
<img id="test" src="images/about.jpg">
</div>
</div>
<!--About me end-->
I'd really appreciate help on getting this fixed.
Given the problem you describe, I think I would try to go with the grid approach. Making use of this rather recent CSS feature would make it easier for you to have a responsive page while having rather small boilerplate CSS to start with.
You can read more there https://www.w3schools.com/css/css_grid.asp or probably easily find tutorials about the CSS grid.
For your specific problem, here is a small snippet I came up with:
.Row {
display: grid;
grid-template-columns: 8fr 2fr;
grid-template-areas: "content picture";
grid-column-gap: 10px;
}
.Column {
grid-area: content;
}
.Column #aboutMe {
background-color: rgba(50, 74, 17, 1.00);
float: left;
}
.Column #aboutMe h1 {
color: white;
padding-left: 10px;
}
.Column #aboutMe p {
color: white;
padding-left: 10px;
padding-right: 10px;
}
.Picture-Container {
grid-area: picture;
}
.Picture {
width: 100%;
height: 100%;
}
<div class="Row">
<div class="Column">
<div id="aboutMe">
<h1 id="blogTitle">What it's all about</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor eros justo, ut facilisis nisi faucibus id. Sed venenatis aliquam rutrum. Maecenas id elementum quam, eget molestie sapien. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Suspendisse eu tristique ligula. Mauris a mollis felis. Vivamus finibus mi quam, ac varius quam pretium in. Etiam fermentum dolor commodo massa fermentum, egestas porta ex bibendum. Vestibulum ac erat sem. Nam
interdum risus et tortor efficitur pretium. Curabitur lobortis massa lectus, non efficitur nisi ornare vel. Proin porttitor commodo libero, quis accumsan dui hendrerit at. Aliquam eget dui placerat, luctus nisi et, auctor mi. Aliquam a convallis
enim. Donec at nisl nec massa mollis convallis.
</p>
<p>
Curabitur tristique lacus non leo dapibus, at mattis est rutrum. Duis vel porttitor neque, nec aliquam nulla. Donec pulvinar, dui sed blandit ultrices, justo leo cursus turpis, vitae vehicula massa nisl nec erat. Vestibulum tincidunt urna non lorem consequat
pulvinar. Curabitur dignissim varius odio, eget dignissim lectus feugiat et. Praesent sit amet euismod purus. Sed lobortis bibendum risus, quis iaculis justo fermentum quis. Integer consectetur pellentesque nibh, eu dignissim odio facilisis sodales.
</p>
<p>
Nullam a felis euismod, sollicitudin enim eget, laoreet sapien. Nullam non nulla aliquet, gravida arcu sed, laoreet libero. Quisque hendrerit lobortis hendrerit. Etiam condimentum urna elit, ac tincidunt erat facilisis ut. Nullam semper leo felis, vitae
dictum dui placerat a. Maecenas ornare, lacus id vestibulum euismod, libero turpis efficitur lectus, ac vehicula odio magna sit amet lacus. Quisque id scelerisque erat. Cras placerat pulvinar libero quis lobortis. Morbi nec sem id risus scelerisque
molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum ex ac lectus porttitor, a varius elit semper. Curabitur laoreet sit amet nisl in varius. Duis eu ipsum ac risus consectetur
porta vitae eget dolor. Sed blandit, leo vitae efficitur auctor, est mi dapibus dui, et iaculis dui odio et neque.
</p>
<p>
Cras libero nibh, ullamcorper sed aliquet euismod, posuere ac erat. Nam eget tincidunt odio. Nam sed justo iaculis, blandit ui non, luctus quam. Fusce nibh ligula, laoreet laoreet eleifend a, convallis ac ex. Aenean interdum elit at erat cursus tincidunt.
Ut a placerat enim. Sed gravida fermentum varius
</p>
<p>
Curabitur vestibulum feugiat gravida. Phasellus aliquet auctor dictum. Sed sed tristique justo, id facilisis quam. Suspendisse mattis erat dolor, ac convallis sem dapibus eget. Aenean tempus posuere nibh, at molestie ante gravida vel. Praesent at accumsan
augue. Fusce volutpat et sem nec ullamcorper. Nam massa urna, sodales ac quam vitae, feugiat vulputate metus. Praesent commodo sit amet nibh in rutrum. Aliquam augue nunc, molestie eget consequat et, pretium nec risus. Sed aliquam massa sapien,
eu suscipit tortor vehicula suscipit. Maecenas et ligula vel metus dignissim vestibulum ac in nulla. Cras id ornare ligula.
</p>
</div>
</div>
<div class="Picture-Container">
<img class="Picture" src="images/about.jpg">
</div>
</div>
One potential issue though with this approach overall (yours or mine) is that it seems unlikely your picture will look nice given the width or height of it will depend on the screen where the page is displayed.
Hey i have wrapper and container which i divide on 2 sides, left and right. I can't add any colors, backgrounds, fonts or anything to right side. Is this good way to solve this problem or should i be doing something else? And if you know how to fix let me know, i tried using !important but it's not working. Adding jsfiddle and code:
home {} #wrapper {
background-color: #FFFFFF;
padding: 15px;
overflow: auto;
}
#wrapper .leftbox {
float: left;
width: 63%;
padding: 12px;
}
#wrapper .rightbox {
float: right;
padding: 12px;
padding-right: 120px;
}
.rightbox.color-box {
height: 200px;
background-color: #2C2C2C;
font-size: 30px!important;
}
<home>
<div class="container">
<!-- wrapper-->
<div id="wrapper">
<div class="leftbox">
<h3>Welcome page</h3>
<p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus.
Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat
nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit
amet sem. Maecenas sodales vehicula egestas.</p>
<p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus
ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p>
<p>
Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae
felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum
dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo.
</p>
<p>
Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque.
Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor
metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p>
<p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum
dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus
ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p>
<p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel
tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p>
<p>
Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat
nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p>
</div>
<div class="rightbox">
<div class="color-box">
lol
</div>
</div>
</div>
</div>
</home>
Change your selector from .rightbox.color-box to .rightbox .color-box
CSS Selectors
You need to follow css standards. If you write .rightbox.color-box this means both the classes are there in same div but here you are trying to target .color-box which is children of .rightbox so you need to give space between both classes
home {} #wrapper {
background-color: #FFFFFF;
padding: 15px;
overflow: auto;
}
#wrapper .leftbox {
float: left;
width: 63%;
padding: 12px;
}
#wrapper .rightbox {
float: right;
padding: 12px;
padding-right: 120px;
background: #ccc;
color: red;
}
.rightbox .color-box {
height: 200px;
background-color: #2C2C2C;
font-size: 30px!important;
}
<home>
<div class="container">
<!-- wrapper-->
<div id="wrapper">
<div class="leftbox">
<h3>Welcome page</h3>
<p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus.
Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat
nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit
amet sem. Maecenas sodales vehicula egestas.</p>
<p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus
ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p>
<p>
Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae
felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum
dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo.
</p>
<p>
Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque.
Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor
metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p>
<p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum
dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus
ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p>
<p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel
tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p>
<p>
Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat
nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p>
</div>
<div class="rightbox">
<div class="color-box">
lol
</div>
</div>
</div>
</div>
</home>
Read brief about css selectors here
Please add this code
#wrapper .leftbox {
float: left;
width: 50%;
padding: 0;
}
#wrapper .rightbox {
float: left;
padding: 0;
padding-right: 0;
background: #000;
width: 50%;
}