Per the following screenshot, I have two <div> elements, each containing tables, with those <div> placed adjacent to one another. Additionally, the <body> content is placed below those <div>.
How can I wrap the left table under the right one, if the there is unused space under the right table?
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adjacent table wrapping</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 0.0rem 0.25rem 0.0rem 0.5rem;
}
table tr:nth-child(odd) { background-color: #edf0f0; }
#left_div {
float: left;
wrap:inline;
width: 60%;
}
#left_div table td:first-child {
}
#right_div {
float: right;
clear: right;
width: 39%;
}
/* Without the following, "clear: left;", if there was space between the
* "left_div" and the "right_div", then the body text was wrapping between
* those adjacent (float {left | right}) <div>. The solution, per
* https://stackoverflow.com/questions/3258944/how-can-stop-text-wrapping-around-some-floated-divs
* was to add
* <div id="clear_left"></div>
* which enables text to both flow below the "left_div", and also to the left
* of the "right_div".
*/
#clear_left {
clear: left;
}
</style>
</head>
<body>
<!-- LEFT DIV -->
<div id="left_div">
<table>
<tr>
<td>URL</td>
<td>example.com</td>
</tr>
<tr>
<td>Source</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<tr>
<td>Year</td>
<td>2021</td>
</tr>
<tr>
<td>Modified</td>
<td>July 01, 2021</td>
</tr>
<tr>
<td>Comment</td>
<td> Suspendisse efficitur pulvinar elementum.</td>
</tr>
<tr>
<td>Key points</td>
<td>
<ul>
<li class="body">Vestibulum a est eu erat rutrum scelerisque non et diam.</li>
<li class="body">Nam ut fringilla enim.</li>
</ul>
</td>
</tr>
<tr>
<td>Notes</td>
<td>Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque.</td>
</tr>
<tr>
<td>More notes</td>
<td>Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharetra varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</td>
</tr>
<tr>
<meta name="summary" content="" />
<td>Summary</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam. Nam ut fringilla enim. Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque. Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharetra varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</td>
</tr>
</table>
</div>
<!-- RIGHT DIV -->
<div id="right_div">
<table>
<tr>
<td colspan="2">
<b><center>Flag of Canada</center></b>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Flag_of_Canada_%28Pantone%29.svg/1280px-Flag_of_Canada_%28Pantone%29.svg.png" alt="Flag of Canada" width="400"/>
</td>
</tr>
</table>
</div>
<!-- Prevent <body> content between "left_div" and "right_div": -->
<div id="clear_left"></div>
<!-- ---------------------------------------------------------------------- -->
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam. Nam ut fringilla enim. Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque. Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharetra varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</p>
</body>
Truly dynamically sized L-shaped tables are (at this time) impossible to achieve.
Grid might support it in the future.
Until then, you have to compromise on some level.
If you can reasonably estimate the size of the image and the size of first couple or rows then rowspan might be a good solution, having the image span the length of the first couple of rows.
Or if your content allows for it, you could mimic a table like behavior in css, and have the image float:right alongside it.
.table {
border-bottom: 1px solid black;
}
.table div.row {
padding: 0.0rem 0.25rem 0.0rem 0.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
display: flex;
}
.table div.row span {}
.table div.row span:first-child {
border-right: 1px solid black;
display: inline-block;
min-height: 100%;
min-width: 70px;
display: flex;
justify-content: center;
align-items: center;
padding-right: 0.5rem;
}
.table div.row span:last-child {
padding-left: 0.5rem;
}
.table div.row:nth-child(odd) {
background-color: #edf0f0;
}
.right_div {
float: right;
clear: right;
padding: 10px;
padding-top: 0;
background-color: white;
}
.flag {
padding: 10px;
background-color: #edf0f0;
border: 1px solid black;
}
<!-- LEFT DIV -->
<div id="left_div">
<div class="table">
<div class="right_div">
<div class="flag">
<b><center>Flag of Canada</center></b>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Flag_of_Canada_%28Pantone%29.svg/1280px-Flag_of_Canada_%28Pantone%29.svg.png" alt="Flag of Canada" width="340" />
</div>
</div>
<div class="row">
<span>URL</span>
<span>example.com</span>
</div>
<div class="row">
<span>Source</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row">
<span>Year</span>
<span>2021</span>
</div>
<div class="row">
<span>Modified</span>
<span>July 01, 2021</span>
</div>
<div class="row">
<span>Comment</span>
<span> Suspendisse efficitur pulvinar elementum.</span>
</div>
<div class="row">
<span>Key points</span>
<span>
<ul>
<li class="body">Vestibulum a est eu erat rudivum scelerisque non et diam.</li>
<li class="body">Nam ut fringilla enim.</li>
</ul>
</span>
</div>
<div class="row">
<span>Notes</span>
<span>Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque.</span>
</div>
<div class="row">
<span>More notes</span>
<span>Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharediva varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</span>
</div>
<div class="row">
<span>Summary</span>
<meta name="summary" content="" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rudivum scelerisque non et diam. Nam ut fringilla enim. Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque. Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharediva varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</span>
</div>
</div>
</div>
Related
I'm having trouble understanding the relationship between the display: flex; and the <div> inside the <section>.
Initially, I was having trouble inserting a color into the <section>. Inside it were <div> modified to be equal-sized colored squares. However, as the <section> didn't recognize the <div> as content, it didn't expand, consequently preventing me from setting a background-color for it.
<!doctype html>
<html>
<body style="background-color: #E8E8F2;">
<section style="background-color: blueviolet; border: pink solid 1px;">
<div style="background-color: red; margin: auto; width: 800px;">
<div style="background: green; float: left; height: 400px; width: 400px;"></div>
<div style="background: brown; float: left; height: 400px; width: 400px;"></div>
<div style="background: black; float: left; height: 400px; width: 400px;"></div>
</div>
</section>
</body>
</html>
Here on the site I found that this was completely workable by setting a height for the <section>, but soon after doing that, I realized that another <section> I created had no height, but recognized other <div> as content.
.feed {
background-color: #F1F8F5;
float: left;
height: 875px;
justify-content: space-around;
margin-top: 20px;
width: 875px;
}
.news {
background-color: #F3ECF9;
float: left;
height: 400px;
margin: 25px 0px 0px 25px;
text-align: justify;
width: 400px;
}
.section-position {
background-color: red;
border: pink solid 2px;
display: flex;
justify-content: center;
}
* {
font-family: Sans-serif;
margin: 0;
padding: 0;
}
body {
background-color: black;
}
div h1 {
padding: 15px;
}
p {
margin: 0px;
padding: 15px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="config.css">
<meta charset="utf-8">
<title>Dungeon</title>
</head>
<body>
<section class="section-position">
<div class="feed">
<div class="news">
<h1> Example Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis tincidunt erat sit amet consequat. Fusce maximus nunc rutrum nisl faucibus fringilla. Pellentesque id turpis in nibh tincidunt placerat ut non dolor. Vestibulum auctor sem
vestibulum justo blandit, at scelerisque ligula iaculis. Nam sed luctus purus. Sed ut ligula rutrum, vehicula enim et, ultrices purus. Suspendisse massa diam, lobortis scelerisque leo non, rutrum tincidunt metus. Nam id vestibulum augue. Sed
bibendum, magna vel vestibulum tincidunt, ipsum nulla auctor nulla, eget eleifend ligula mauris vitae ligula. Phasellus quis ante eu libero convallis faucibus. Nunc convallis neque orci, quis tristique nisi hendrerit eu. Maecenas bibendum et
est a fermentum. Nunc rutrum libero nec arcu bibendum faucibus.</p>
</div>
<div class="news">
<h1> Example Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis tincidunt erat sit amet consequat. Fusce maximus nunc rutrum nisl faucibus fringilla. Pellentesque id turpis in nibh tincidunt placerat ut non dolor. Vestibulum auctor sem
vestibulum justo blandit, at scelerisque ligula iaculis. Nam sed luctus purus. Sed ut ligula rutrum, vehicula enim et, ultrices purus. Suspendisse massa diam, lobortis scelerisque leo non, rutrum tincidunt metus. Nam id vestibulum augue. Sed
bibendum, magna vel vestibulum tincidunt, ipsum nulla auctor nulla, eget eleifend ligula mauris vitae ligula. Phasellus quis ante eu libero convallis faucibus. Nunc convallis neque orci, quis tristique nisi hendrerit eu. Maecenas bibendum et
est a fermentum. Nunc rutrum libero nec arcu bibendum faucibus.</p>
</div>
<div class="news">
<h1> Example Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis tincidunt erat sit amet consequat. Fusce maximus nunc rutrum nisl faucibus fringilla. Pellentesque id turpis in nibh tincidunt placerat ut non dolor. Vestibulum auctor sem
vestibulum justo blandit, at scelerisque ligula iaculis. Nam sed luctus purus. Sed ut ligula rutrum, vehicula enim et, ultrices purus. Suspendisse massa diam, lobortis scelerisque leo non, rutrum tincidunt metus. Nam id vestibulum augue. Sed
bibendum, magna vel vestibulum tincidunt, ipsum nulla auctor nulla, eget eleifend ligula mauris vitae ligula. Phasellus quis ante eu libero convallis faucibus. Nunc convallis neque orci, quis tristique nisi hendrerit eu. Maecenas bibendum et
est a fermentum. Nunc rutrum libero nec arcu bibendum faucibus.</p>
</div>
</div>
</section>
</body>
</html>
The only difference between the <section> is that one has display: flex; and another not, hence my doubt. Why the fact that the <section> has the property display: flex; does it recognize <div> as content?
Obs: Notice how the presence of display: flex; in the first code makes the <section> recognize the <div>. I assume it was display: flex; that did it, feel free to point out any flaws in my line of reasoning.
<!doctype html>
<html>
<body style="background-color: #E8E8F2;">
<section style="background-color: blueviolet; border: pink solid 1px; display: flex;">
<div style="background-color: red; margin: auto; width: 800px;">
<div style="background: green; float: left; height: 400px; width: 400px;"></div>
<div style="background: brown; float: left; height: 400px; width: 400px;"></div>
<div style="background: black; float: left; height: 400px; width: 400px;"></div>
</div>
</section>
</body>
</html>
Thanks in advance to anyone who can answer my question.
All flex items (such as your red div) establish an independent formatting context, which in this case is a block formatting context.
Block formatting contexts contain their floated item descendants.
Without making the section display:flex, the red div is not a flex item, doesn't establish a block formatting context, and therefore doesn't contain the floats.
I'm coding some HTML and CSS that needs to organize a number of blocks of nested DIVs into a responsive grid which keeps each block of nested DIVs' width the same. I've tried just about everything but nothing has worked so far. As it is now, each block of nested DIVs stacks on top of the next one vertically. I'd like the blocks of nested DIVs to be responsive, in that they wrap if the browser window is resized. Also, I need each DIV to be the same width. My code may be ugly and lacking in style but it's what I had to write to get the current layout working.
I've tried using the flex and flex-wrap properties to create a grid, but it has not worked and it only horribly screws up the display of the nested DIV blocks.
<!DOCTYPE html>
<html>
<head>
<style>
.border_box_main {
width: 100%;
height: auto;
border: 15px solid Green;
box-sizing: border-box;
background-color: Aquamarine;
margin: auto;
text-align: center;
}
.list_1 {
width: 30%;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
background-color: Grey;
display: inline-block;
}
.list_subtext {
text-align: left;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
font-size: 10px;
}
hr {
color: solid black;
width: 75%;
text-align: center;
}
.list_2 {
width: 85%;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
background-color: White;
display: inline-block;
}
.div_list_1 {
display: list-item;
list-style-type: disc;
list-style-position: outside;
text-align: left;
}
</style>
<title>Test</title>
</head>
<body>
<div class="border_box_main">
<hr><br>
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">
Test 1 2 3 4.
<div class="list_subtext">(Test2)</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">
Test 1 2 3 4.
<div class="list_subtext">(Test2)</div>
</div>
</div>
</div>
</div>
</div>
<hr><br>
</div>
</body>
</html>
I get a vertical list of nested DIV blocks, with the same width. The problem is that I want the list of nested DIV blocks to flow horizontally, with each one having the same width and its position on the screen being centered. The list should also be responsive to changes in the browser window size.
EDIT : The JSFiddle link is here https://jsfiddle.net/g42nxk0p/ . AS you might have noticed, when the output window is small, my HTML doesn't render correctly. Specifically, the borders do not shrink in response to the window width. I'd also like to fix this.
Do you try to use Grid layout? I use often grid layout for the main layout and flexbox for items that are in the grid. (CSS Grid Layout Module
- A Complete Guide to Grid)
Well, I finally got it working, at least on Desktop devices :) Thanks to Khoi Le for the suggestions for the grid layout code. I had to tweak his and my code, but I finally got it working. I still have to add the mobile-friendly code, and hopefully that won't break the layout. The only problem, and what seems to be necessary, although it's a kludge, was that I had to add a static pixel width to the DIVs. Here is an example of the working code :
<!DOCTYPE html>
<html>
<head>
<style>
.border_box_main {
width: 100%;
height: auto;
border: 15px solid Green;
box-sizing: border-box;
background-color: Aquamarine;
margin: auto;
text-align: center;
overflow: hidden;
word-wrap: break-word;
}
.list_1 {
width: 320px;
padding: 15px;
display: inline-block;
overflow: hidden;
word-wrap: break-word;
}
.list_subtext {
text-align: left;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
font-size: 10px;
overflow: hidden;
word-wrap: break-word;
}
hr {
color: solid black;
width: 75%;
text-align: center;
}
.list_2 {
margin: 5px;
padding: 15px;
background-color: White;
display: inline-block;
border: 20px solid grey;
width: 200px;
overflow: hidden;
word-wrap: break-word;
}
.div_list_1 {
display: list-item;
list-style-type: disc;
list-style-position: outside;
text-align: left;
overflow: hidden;
word-wrap: break-word;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: center;
overflow: hidden;
word-wrap: break-word;
}
.item {
width: 350px;
margin: 20px;
padding: 5px;
min-height: 100px;
text-align: center;
overflow: auto;
word-wrap: normal;
}
</style>
<title>Test...</title>
</head>
<body>
<div class="border_box_main">
<br><br>
<hr>
<br>
<div class="container">
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra iaculis pretium. Nullam risus dui, placerat et fermentum sed, efficitur non massa. Nulla congue facilisis ipsum at tincidunt. Aenean ut orci efficitur, consequat enim vitae, facilisis ex. Pellentesque imperdiet, arcu eget feugiat ultricies, neque magna hendrerit tortor, ut feugiat risus velit non eros. Aenean scelerisque pulvinar ante, vel porttitor ipsum blandit et. Aliquam eu metus eu felis blandit porta. Quisque ac neque sapien. Duis blandit nisl vitae dui bibendum congue sed sed dolor. Suspendisse vitae arcu placerat, placerat justo non, ornare ex. Phasellus suscipit ultrices ex, sed mollis eros viverra nec. Integer non aliquet augue, vitae condimentum diam. Phasellus ultrices, arcu id malesuada tincidunt, ligula elit tempus felis, quis tincidunt leo nisl sit amet velit. Sed sit amet efficitur turpis, id scelerisque nulla.
<div class="list_subtext">Test1</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">In sit amet odio velit. Cras fermentum est id dapibus accumsan. Pellentesque metus lacus, gravida id justo sit amet, sodales hendrerit neque. Nulla ac orci ac neque placerat commodo. Quisque tortor risus, sagittis vitae risus a, lobortis lobortis eros. Nulla facilisi. Suspendisse luctus leo vel felis cursus, quis aliquet diam aliquet. Maecenas vitae augue placerat, posuere ex ac, venenatis nisi. Nunc mi diam, gravida eu erat nec, porta scelerisque nulla. Proin hendrerit nulla massa, non elementum lectus rhoncus quis. In dapibus vel nunc vel porta. Sed maximus purus vel enim egestas accumsan. Sed sollicitudin libero ac quam iaculis tempus. <div class="list_subtext">Test2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Morbi at gravida urna. Morbi imperdiet nisl vel felis interdum, a volutpat turpis eleifend. Sed ultrices sollicitudin elit, sit amet tincidunt velit pharetra ut. Integer tincidunt metus at purus vestibulum, ut viverra orci volutpat. Donec hendrerit quam eu mauris molestie, sed congue orci vehicula. In ac justo tincidunt, suscipit ipsum in, mattis mauris. Duis lobortis lectus at nunc faucibus consectetur. <div class="list_subtext">Test3</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Cras sit amet sapien mi. Fusce at convallis metus. Quisque ac imperdiet ex. Morbi dictum, felis sit amet placerat malesuada, lectus arcu interdum ipsum, ac egestas nisi leo eget dui. Maecenas id ex rutrum, condimentum quam et, suscipit justo. Nam et pellentesque arcu, vel porttitor sapien. Integer egestas enim quam, vehicula tristique tellus sodales ut.
<div class="list_subtext">Test4</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Proin sapien urna, cursus eu eros ac, iaculis sollicitudin massa. Vestibulum et sodales felis. Nulla vel cursus lorem. Sed dui libero, cursus sed est in, venenatis volutpat ex. Pellentesque tincidunt risus ut lorem euismod, sit amet facilisis lectus fermentum. Nunc tellus sapien, interdum eu urna id, viverra ultricies massa. Pellentesque elementum nisl leo, ullamcorper elementum metus mattis vel. Cras sodales facilisis eros, a tincidunt nisl vulputate in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut justo euismod, dictum libero in, finibus arcu. <div class="list_subtext">Test5</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1"> Proin et leo ultricies, elementum odio a, iaculis sem. Nam nec lacus facilisis metus elementum sodales. Aenean convallis luctus nibh, a luctus tortor. Sed dictum lorem et nulla fermentum, ac consequat justo sagittis. Nullam rhoncus ornare massa eget auctor. Praesent at convallis diam. Aliquam viverra mollis neque, ac porta ligula fringilla ac. Praesent neque nisl, cursus vitae sagittis ut, tristique eget justo. In semper urna nec justo egestas vestibulum.
<div class="list_subtext">Test6</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Donec et cursus nisl, sed dictum justo. Cras pretium lorem in dui sollicitudin ullamcorper. Nullam et dolor id velit imperdiet consequat. Aenean turpis ex, convallis bibendum elit vitae, fermentum molestie erat. Donec fringilla pulvinar metus, eu varius metus condimentum vel. Suspendisse potenti. Aliquam rutrum euismod dolor, quis eleifend dui faucibus id. Ut vitae leo vel quam tempor dapibus sit amet at ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer quis pharetra leo, vel rutrum diam. Aliquam dapibus tellus sit amet tellus imperdiet, et tincidunt metus ornare. Sed sit amet urna ex. Praesent accumsan ut odio sit amet aliquet. Nunc non varius diam, sed faucibus dolor. Cras ut nunc et purus iaculis luctus nec et quam.
<div class="list_subtext">Test7</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Maecenas eget tellus mollis, efficitur est a, scelerisque sem. Sed efficitur leo lectus, et fringilla ipsum pellentesque eget. Phasellus vitae egestas magna, sed lobortis erat. Aliquam eget imperdiet ligula, ac dapibus mauris. Sed lobortis bibendum felis, quis varius purus varius sagittis. Vestibulum suscipit dapibus leo non consequat. Phasellus tempor, eros vitae tempor hendrerit, dolor nibh semper metus, a hendrerit turpis leo in est. Donec faucibus iaculis mollis. Suspendisse laoreet a risus a maximus. Ut massa lacus, hendrerit eget eros et, ultrices porttitor libero. Nunc ac laoreet odio. Proin viverra molestie ipsum et faucibus.
<div class="list_subtext">Test8</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Praesent vitae dolor lacus. Aenean gravida, erat sed ornare laoreet, leo dolor viverra tellus, venenatis mollis nibh dolor id nisi. Morbi ac tempus elit. Maecenas maximus felis ac felis laoreet, id congue urna sollicitudin. Nulla rhoncus feugiat magna, a auctor sapien pharetra nec. Nunc egestas ipsum mi, non volutpat mi dictum non. Ut molestie augue a ex malesuada pretium. In vestibulum efficitur mi. Integer aliquet placerat tempor. Nunc ultricies ipsum vel dictum eleifend. Integer ut dapibus enim, nec porttitor magna. Nulla quis sodales lacus.
<div class="list_subtext">Test9</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr><br>
</div>
</body>
</html>
The JSFiddle is here : https://jsfiddle.net/jdbtwo/ch3tfu2q/
Notice how the tops of the DIVs are all aligned. Also, the grid is repsonsive and responds to browser window size changes properly.
jdb2
EDIT : To get my code working on mobile devices, I had to pair every "width: x;" with a "min-width: x;" . Still, in the browsers on my iPhone, the listing is shifted to the left. I don't know what's causing this.
We've been looking all over the web, but can't find a solution to a seemingly unsolvable problem basically we've got two divs who need to be equal in height. In them we've got multiple other divs who need to scale in height with them.
We tried 100% height, flexbox, inherit, overflow hidden and other things we could think of. To no avail.
This is a simplistic view of what we've got:
.col-sm-12 {
width: 100%;
display: flex
}
.col-sm-6 {
width: 50%;
float: left;
flex: 1;
}
.c1 {
}
.c2 {
padding: 20px;
}
.c3 {
border: 1px solid grey;
padding: 20px;
}
.image {
width: 100%;
height: 300px;
background-color: grey;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="col-sm-12">
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur dui quis arcu varius, sit amet consectetur risus auctor. Nulla id mattis ligula. Aliquam euismod dui et viverra ultrices. Praesent eget quam quam. Aenean sit amet lectus et leo ultrices sodales id sed nulla. Proin fringilla, dui vitae tincidunt tincidunt, nisi tellus efficitur lacus, ac facilisis libero elit ut tellus. In finibus tortor leo, hendrerit sagittis libero maximus sed. Sed rhoncus maximus odio, nec vestibulum enim fringilla ac. Nulla faucibus, justo nec fermentum blandit, est nisl eleifend purus, non pretium orci sapien at eros. Fusce non laoreet augue. Aenean ac eros augue. Sed sit amet enim sit amet lorem finibus volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat, diam sed vulputate aliquet, augue erat luctus massa, molestie egestas diam metus at dolor. Vivamus a metus vitae magna dignissim pulvinar.
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Etiam id ullamcorper augue, a pharetra nisi. Sed justo enim, malesuada elementum erat non, vehicula varius turpis. Sed quis scelerisque eros, in vestibulum mi. Maecenas et consectetur risus, sed sagittis ex. Aliquam vestibulum fermentum hendrerit. Nulla eget hendrerit purus. Suspendisse commodo vel tortor ut sollicitudin.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How can we get the two boxes below the image to equal height?
Any help is appreciated!
There is no CSS method of equalising heights of elements that do not share a parent. If the top image is always the same height between columns you can use flexbox to expand the smaller/shorter column though.
.col-sm-12 {
display: flex;
}
.col-sm-6 {
width: 50%;
flex: 1;
display: flex;
flex-direction: column;
}
.c1 {
flex: 1;
display: flex;
flex-direction: column;
}
.c2 {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.c3 {
border: 1px solid grey;
padding: 20px;
flex: 1;
}
.image {
width: 100%;
height: 300px;
background-color: grey;
}
<div class="col-sm-12">
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur dui quis arcu varius, sit amet consectetur risus auctor. Nulla id mattis ligula. Aliquam euismod dui et viverra ultrices. Praesent eget quam quam. Aenean sit amet lectus et leo
ultrices sodales id sed nulla. Proin fringilla, dui vitae tincidunt tincidunt, nisi tellus efficitur lacus, ac facilisis libero elit ut tellus. In finibus tortor leo, hendrerit sagittis libero maximus sed. Sed rhoncus maximus odio, nec vestibulum
enim fringilla ac. Nulla faucibus, justo nec fermentum blandit, est nisl eleifend purus, non pretium orci sapien at eros. Fusce non laoreet augue. Aenean ac eros augue. Sed sit amet enim sit amet lorem finibus volutpat. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Mauris placerat, diam sed vulputate aliquet, augue erat luctus massa, molestie egestas diam metus at dolor. Vivamus a metus vitae magna dignissim pulvinar.
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Etiam id ullamcorper augue, a pharetra nisi. Sed justo enim, malesuada elementum erat non, vehicula varius turpis. Sed quis scelerisque eros, in vestibulum mi. Maecenas et consectetur risus, sed sagittis ex. Aliquam vestibulum fermentum hendrerit. Nulla
eget hendrerit purus. Suspendisse commodo vel tortor ut sollicitudin.
</p>
</div>
</div>
</div>
</div>
</div>
Just use inline-style on the text div tags:
style="height:30em;overflow:scroll"
lol. There might be a lot of new, flashy and sexy frameworks & technologies out there (which I really like), but sometimes going back to the old school methods is a lot simpler and more efficient.
JSfiddle
I have a situation where I would like to float a small image to the left of text within a div. I don't want the text to wrap under the image, and some research led me to add the overflow:hidden; property on <p>. While this makes the paragraph next to the image behave as I want, the following paragraphs are then not aligned with the first. Is there a nice way to get all paragraphs aligned? I tried display: table-row;, but this affects other elements on the page (and I have read up on why this is the case).
I need to work within the constraints present in the JSFiddle (i.e., can't really modify html), and cross-browser support is a priority.
.header {
color: white;
background-color: red;
padding: 15px;
}
.header p {
overflow: hidden;
}
.img {
background-color: green;
width: 45px;
height: 45px;
float: left;
}
<div class="header">
<div class="img">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut
pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>
Use a margin-left on the paragraphs that is the width of the image + the margin/space you want between the image and paragraph. Then you have no need for the overflow.
.header {
color: white;
background-color: red;
padding: 15px;
}
.header p {
margin: 0 0 1em 55px;
}
.img {
background-color: green;
width: 45px;
height: 45px;
float: left;
}
<div class="header">
<div class="img">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut
pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>
So, you should set a div for the whole thing, one for the image and one for the text.
I don't know if that's what you're looking for, but here you go.
.container {
width: 400px;
height: auto;
}
.imageDiv {
max-width: 200px;
height: auto;
float: left;
}
.image {
max-width: 100%;
}
.text {
max-width: 200px;
min-width: 200px;
text-align: center;
float: left;
}
<div class="container">
<div class="text">
<p>
Some text.
</p>
</div>
<div class="imageDiv">
<img class="image" src="http://nexceris.com/wp-content/uploads/2014/04/bokeh-cover-bg.jpg">
</div>
</div>
Code the one div for other content and manage that two inside div like you want.
<div class="header">
<div class="img">
</div>
<div class="other">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>
</div>
I've stacked my divs to look like unfolded paper. I want to put text on each div, to split them into sections.
But the way I made my divs, the only visible parts are the borders. When I add text to the divs, the text appears above or below where it should show (because they're on the invisible divs).
Basically, my divs are invisible. My borders are visible. I need the text to appear on the borders. But to do that, I have to change the padding for each block of text. Is there a way to put text just on the borders? Or is there an easier way of getting the tilted divs?
I've tried rotateY but It only makes them shrink.
The catch -- I can only use HTML and CSS.
Here is a screenshot of how it currently appears:
CSS:
#slant1 {
width: 700px;
height: 225px;
background-color: white;
font-family: thorndale for vst;
font-size: 16px;
}
#slant2 {
border-top: 260px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 2600px;
width: 600px;
position: absolute;
z-index: -1;
}
#slant3 {
border-bottom: 225px solid #E6E6E6;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
font-family: thorndale for vst;
font-size: 16px;
}
#slant4 {
border-top: 225px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
}
<!DOCTYPE html>
<html lang="en" id="Origami">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Origami</title>
<link href="discover.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Origami" />
<meta name="keywords" content="Origami">
<meta name="author" content="JojoRae" />
</head>
<body>
<div id="columnwrapper2">
<div id="slant1">
<div class="adamas1"></div> <div class="adamas"></div>
<p class="p">
</p>
</div>
<div id="slant2">
<ul class="slides">
<input type="radio" name="group3" id="img-11" checked />
<li class="slide-container">
<div class="slide">
<img src="../ei/treasure.gif" />
</div>
<div class="nav">
<label for="img-15" class="prev">‹</label>
<label for="img-12" class="next">›</label>
</div>
</li>
</ul>
</div>
<div id="slant3">
<div class="adamas3"></div>
<p class="p2"></p>
</div>
<div id="slant4">
</div>
</div> <!--closes columnwrapper-->
</body>
</html>
I would personally leave out the border option (it's a bit hacky) and go with something different (and probably easier). Here are a couple of options:
1) Using CSS3 3D Transforms
You tried this one but it didn't work. From what you say in the question, the issue that you found when using rotateY (it only shrank) seems to be because you didn't combine it with perspective. Once you do so (and play a little bit with the values so they adjust to what you are looking for), not only the div will skew but also its content making it look like it's in the same angle as the paper effect.
Here is an example (also available on this JSFiddle):
html, body {
background:#444;
}
#columnwrapper2 {
min-width:700px;
}
.slant {
margin:auto auto;
}
#slant1 {
width: 700px;
height: 225px;
background-color: white;
font-family: thorndale for vst;
font-size: 16px;
}
#slant2 {
width:655px;
height:225px;
background:#eee;
transform: perspective(600px) rotateX(-20deg);
}
#slant3 {
width:668px;
height:225px;
background:#ddd;
transform: perspective(600px) rotateX(20deg) translateY(-33px);
}
#slant4 {
width:642px;
height:225px;
background:#eee;
transform: perspective(600px) rotateX(-20deg) translateY(-33px);
}
<div id="columnwrapper2">
<div id="slant1" class="slant">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit.
</div>
</div>
<div id="slant2" class="slant">
<div>
<img src="http://lorempixel.com/500/200/people" alt="Random Picture" />
</div>
</div>
<div id="slant3" class="slant">
<div>
Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet.
</div>
</div>
<div id="slant4" class="slant">
<div>
Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien.
</div>
</div>
</div> <!--closes columnwrapper-->
2) Using SVG
Another option would be using SVG. This maybe an easier alternative if you don't want the text to skew with the paper folding effect (or one that doesn't require playing with the numbers). It will require you to know the exact height of each section though.
You could create an image in SVG (directly as image or as the code below), and place it in the background of #columnwrapper2, the rest of the content would go on top of the image.
See this demo (also available on this JSFiddle):
html, body {
background:#444;
}
#columnwrapper2 {
width:700px;
position:relative;
}
.slant {
margin:auto auto;
height:250px;
width:600px;
padding:50px auto;
z-index:2;
position:relative;
}
<div id="columnwrapper2">
<svg width="700px" height="1000px" style="position:absolute;top:0;left:0;z-index:1;">
<path fill="#ffffff" d="M0,0 700,0 700,250 0,250Z" />
<path fill="#eeeeee" d="M0,250 700,250 650,500 50,500Z" />
<path fill="#dddddd" d="M50,500 650,500 700,750 0,750Z" />
<path fill="#eeeeee" d="M0,750 700,750 650,1000 50,1000Z" />
</svg>
<div id="slant1" class="slant">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit.
</div>
</div>
<div id="slant2" class="slant">
<div>
<img src="http://lorempixel.com/500/200/people" alt="Random Picture" />
</div>
</div>
<div id="slant3" class="slant">
<div>
Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet.
</div>
</div>
<div id="slant4" class="slant">
<div>
Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien.
</div>
</div>
</div> <!--closes columnwrapper-->
One advantage of SVG is that it is supported by most browsers (with the previous transform solution, you may find some issues with IE that will need tweaking).