I got a textarea and I want the text to break before it overlaps the emoji icon that is a button in my html file. I dont want it to overlap it. I would rather not give the emoji a z-index because it would mess other things up.
Here is code
HTML
<button class="emoji"></button>
<textarea rows="6" cols="60" class="divTxtArea" placeholder="Type a message.."></textarea>
CSS
.divTxtArea
{
resize: none;
font-family: "Open Sans";
font-size: 1em;
color:#8b959a;
border-radius: 5px;
border:1px solid #e1e4e6;
width:580px;
padding:15px 20px;
height:180px;
max-height:180px;
overflow-y:scroll;
outline: none;
resize:none!important;
}
div .emoji
{
position:absolute;
left:80%;
margin-top:10px;
display:inline-block;
}
And here is a picture for those who did not understand
Try this
.divTxtArea
{
resize: none;
font-family: "Open Sans";
font-size: 1em;
color:#8b959a;
border-radius: 5px;
border:1px solid #e1e4e6;
width:580px;
padding:15px 20px;
height:180px;
max-height:180px;
overflow-y:scroll;
outline: none;
resize:none!important;
}
.divTxtArea .emoji
{
float: right;
margin-top:10px;
display:inline-block;
}
.divTxtArea textarea {
border: none;
width : 95%;
height: 100%;
}
<div class="divTxtArea">
<button class="emoji"></button>
<textarea rows="6" cols="60" placeholder="Type a message.."></textarea>
</div>
What about this? The pseudo-element before should be your emoji icon.
#textarea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 100px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}
#textarea:before {
content:'';
height:40px;
width:40px;
float:right;
background-color:red;
}
<div id="textarea" contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt et sem eget imperdiet. Vivamus id sollicitudin urna. Proin nec libero ut justo egestas fringilla ut eu diam. Ut congue, felis in pulvinar lacinia, metus diam mollis dolor, et semper tortor purus vitae felis. Aenean lorem elit, ultricies dignissim dolor.</div>
Use
textarea {
resize: none;
}
in your CSS.
Related
I'm struggling to get my head around what is causing the "tabbed" div to be hidden from view. I can't work out whether it is the content or container div causing this issue.
If you change the ".tabs > div" position from absolute to relative then div class="tabbed" appears as I would like but it causes the content of the tabs stack on top of one another.
Is this a position/z-index or overflow issue?
Any help would be appreciated.
Here is the code:
* {
box-sizing: border-box;
}
body {
background: #fff;
color: #262626;
font: 1em 'PT Sans', sans-serif;
}
::selection {
background-color: #4EC6DE;
}
#content {
padding: 5px 0 5px 0;
position: relative;
overflow: hidden;
}
.container {
position: relative;
clear: both;
width: 100%;
min-height: 350px;
max-width: 1200px;
padding: 5px 0px 5px 0px;
overflow: hidden;
background-color: #ffffff;
}
.pCV {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
line-height: 1.6;
padding: 0;
}
.cvheader {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
font-weight: bold;
}
#textbox {
width: 100%;
border: 1px solid #ccc
}
/* Style buttons */
#downloadbtn {
background-color: #ffffff;
border: 2px solid #262626;
color: #262626;
padding: 12px 12px;
cursor: pointer;
font-size: 20px;
float: right;
margin-top: -50px;
}
/* Darker background on mouse-over */
#downloadbtn:hover {
background-color: #888888;
color: #ffffff;
border: 2px solid #888;
transition: all .8s ease-in-out;
}
.tabbed {
width: 1000px;
margin: 50px auto;
}
.tabbed>input {
display: none;
}
.tabbed>label {
display: block;
float: left;
padding: 12px 20px;
margin-right: 10px;
cursor: pointer;
transition: background-color .3s;
}
.tabbed>label:hover,
.tabbed>input:checked+label {
background: #4EC6DE;
}
.tabs {
clear: both;
perspective: 600px;
}
.tabs>div {
width: 1000px;
position: absolute;
border: 2px solid #4EC6DE;
padding: 10px 30px 40px;
line-height: 1.4em;
opacity: 0;
transform: rotateX(-20deg);
transform-origin: top center;
transition: opacity .3s, transform 1s;
z-index: 0;
}
#tab-nav-1:checked~.tabs>div:nth-of-type(1),
#tab-nav-2:checked~.tabs>div:nth-of-type(2) {
transform: rotateX(0);
opacity: 1;
z-index: 1;
}
#media screen and (max-width: 700px) {
.tabbed {
width: 400px
}
.tabbed>label {
display: none
}
.tabs>div {
width: 400px;
border: none;
padding: 0;
opacity: 1;
position: relative;
transform: none;
margin-bottom: 60px;
}
.tabs>div h2 {
border-bottom: 2px solid #4EC6DE;
padding-bottom: .5em;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
<div id="content">
<div class="container">
<div class="tabbed">
<input type="radio" name="tabs" id="tab-nav-1" checked>
<label for="tab-nav-1">CV 1</label>
<input type="radio" name="tabs" id="tab-nav-2">
<label for="tab-nav-2">CV 2</label>
<div class="tabs">
<div>
<div id="textbox">
<h2 class="cvheader">EDUCATION</h2>
<a href="ArtistCV.pdf" download>
<button id="downloadbtn"><i class="fa fa-download fa-fw"></i> Download</button></a>
<div style="clear: both;"></div>
</div>
<p class="pCV">Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. </p>
</div>
<div><h2>CSS</h2><p>Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. Curabitur posuere metus nec tellus venenatis placerat. Ut egestas neque in odio vulputate gravida. In at justo ac est laoreet eleifend vel quis arcu. Aliquam erat volutpat. Proin vitae vehicula neque. Nam tempus erat ac ante tincidunt tincidunt. Pellentesque eu nibh sapien. Nunc augue magna, lacinia eget congue eget, mattis id tortor. Fusce id vestibulum neque. Proin tincidunt tellus ut risus lobortis cursus. Duis sit amet urna vel sapien ullamcorper varius.</p></div>
</div>
</div>
</div>
</div>
I'm struggling to get my head around what is causing the "tabbed" div to be hidden from view.
You have mistake in your HTML markup. Change this:
Download</button</a>
To this:
Download</button></a>
And add this to your CSS:
.container {
min-height: 350px;
}
If you don't want to set min-height manually, then you'll need to use JS to calculate it dynamically. Hardly imagine doing this with pure CSS.
I have two divs inside a container: one of which has overflow:
https://codepen.io/anon/pen/LKxdyV
(I've simplified the website a bit, in reality it contains more content and has a js plugin, so that explains the extra -now seemingly unnecessary- divs)
However, when the text exceeds the initial container, the parent (the div with class 'right') doesn't grow with it. Ideally both .left and .right will still have a background color in the overflow text (so both the green and red will extend to the bottom of the page).
<div class="container">
<div class="bb-custom-wrapper">
<div class="bb-item">
<div class="content">
<div class="scroller">
<div class="left">
<h2>LEFT</h2>
</div>
<div class="right">
<h2>RIGHT</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus hendrerit sodales. Nullam sed lobortis sem. Curabitur ac orci lorem. Suspendisse potenti. Aenean ac commodo mauris. Fusce odio arcu, vestibulum faucibus dapibus laoreet, sollicitudin et mauris. Pellentesque at tellus id ex dictum pretium. Nullam lorem metus, ullamcorper sed molestie sed, maximus feugiat massa. Ut eleifend, neque eu euismod pulvinar, lacus mauris facilisis felis, rhoncus mattis odio odio in velit.
</p>
</div>
</div>
</div>
</div>
</div>
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
min-height: 100% !important;
height: 100%;
width:100%;
}
body {
font-family: 'Roboto', sans-serif;
background: #fff;
font-size: 100%;
color: #000000;
}
.container {
position: relative;
left: 0px;
}
.container, .bb-custom-wrapper {
width: 100%;
height: 100%;
}
.content {
position: absolute;
left: 0;
width: 100%;
height:100%;
}
.content h2 {
font-family: 'Playfair Display', serif;
font-weight:normal;
font-size: 4em;
padding: 0 6% 10px;
color: #333;
margin: 60px 1% 40px;
text-align: left;
box-shadow: 0 10px 0 rgba(223,137,167,0.02);
}
.scroller {
padding: 10px 5% 10px 5%;
height:100vh;
width:100%;
position:relative;
overflow:scroll;
}
.scroller .left, .scroller .right{
width:50%;
height:100% !important;
position:absolute;
top:0;
}
.left{
left:0;
float:left;
background-color:red;
}
.right{
float:right;
right:0;
background-color:green;
}
I've found this question and its answer but the solution doesn't seem to help. Probably has to do with that I have the overflow in height and the question is about width?
Edit: updated code snipped with image on left side.
https://codepen.io/gibbok/pen/YoNaJZ
Use overflow: auto; so it will follow its parent's height.
Result here:
https://codepen.io/gibbok/pen/YoNaJZ
.right{
float:right;
right:0;
background-color:green;
overflow: auto;
}
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
#import url('https://fonts.googleapis.com/css?family=Playfair+Display:900&display=swap');
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
min-height: 100% !important;
height: 100%;
width:100%;
}
body {
font-family: 'Roboto', sans-serif;
background: #fff;
font-size: 100%;
color: #000000;
}
.container {
position: relative;
left: 0px;
}
.container, .bb-custom-wrapper {
width: 100%;
height: 100%;
}
.content {
position: absolute;
left: 0;
width: 100%;
height:100%;
}
.content h2 {
font-family: 'Playfair Display', serif;
font-weight:normal;
font-size: 4em;
padding: 0 6% 10px;
color: #333;
margin: 60px 1% 40px;
text-align: left;
box-shadow: 0 10px 0 rgba(223,137,167,0.02);
}
.scroller {
padding: 10px 5% 10px 5%;
height:100vh;
width:100%;
position:relative;
overflow:scroll;
}
.scroller .left, .scroller .right{
width:50%;
height:100% !important;
position:absolute;
top:0;
}
.left{
left:0;
float:left;
background-color:red;
}
.right{
float:right;
right:0;
background-color:green;
overflow: auto;
}
<div class="container">
<div class="bb-custom-wrapper">
<div class="bb-item">
<div class="content">
<div class="scroller">
<div class="left">
<h2>LEFT</h2>
</div>
<div class="right">
<h2>RIGHT</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus hendrerit sodales. Nullam sed lobortis sem. Curabitur ac orci lorem. Suspendisse potenti. Aenean ac commodo mauris. Fusce odio arcu, vestibulum faucibus dapibus laoreet, sollicitudin et mauris. Pellentesque at tellus id ex dictum pretium. Nullam lorem metus, ullamcorper sed molestie sed, maximus feugiat massa. Ut eleifend, neque eu euismod pulvinar, lacus mauris facilisis felis, rhoncus mattis odio odio in velit.
</p>
</div>
</div>
</div>
</div>
</div>
I'm trying to replicate this mock up design.
Design:
Current:
Is there a way to make sure the "Shop All" ignores the overflow:hidden, but the before and after obey the overflow:hidden?
Or is there another method I can try to implement this?
Html
<div id="outer">
<div id="opaq">
<div id="inner">
<h1>Performance Parts</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur in arcu at placerat. Aenean sed lorem tincidunt, maximus purus eget, ornare metus. Nam interdum lobortis imperdiet. Nunc gravida urna urna. Vestibulum vitae lectus leo. Etiam fermentum nunc vel nulla tincidunt, sit amet molestie lectus pulvinar.</p>
<div id="shop">Shop all</div>
</div>
</div>
</div>
Css
#outer{
max-width:500px;
text-align:center;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNyPOuKMHtvXNa5dnlc8xGXvW-nVfguLdlj9sj4-K6cTA0Zbf7");
}
#opaq{
background-color: rgba(48, 44, 44, 0.7);
padding:5px;
}
#inner{
border:1px solid red;
margin:10px;
color:white;
border-bottom:none;
overflow:hidden;
}
#shop{
position:relative;
top:8px;
display: inline-block;
}
#shop:after{
content: "";
position: absolute;
border-bottom: 1px solid white;
top: 9px;
width: 600px;
left: 100%;
margin-left: 15px;
}
#shop:before{
content: "";
position: absolute;
border-bottom: 1px solid white;
top: 9px;
width: 600px;
right: 100%;
margin-right: 15px;
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.wrapper {
background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(http://beerhold.it/400/300);
background-repeat: no-repeat;
background-size: cover;
width: 400px;
height: 200px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
fieldset {
width: 90%;
height: 90%;
margin-top: .7em;
transform: rotate3d(0, 0, 1, 180deg);
border: 3px solid rgba(255, 255, 255, .4);
}
legend {
font-size: 1.4em;
font-weight: 700;
}
legend span,
fieldset .text {
display: block;
transform: rotate3d(0, 0, 1, 180deg);
color: white;
text-shadow: 0 0 4px black;
padding: 0 1em;
}
legend span {
color: yellow;
}
fieldset .text {
height: 100%;
}
fieldset .text h1 {
padding: .3em 0;
text-align: center;
}
fieldset .text p {
line-height: 1;
}
<div class="wrapper">
<fieldset>
<legend align="center"><span>SHOP ALL</span>
</legend>
<div class="text">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a justo nisl. Phasellus consequat tincidunt elit, sed interdum nibh blandit ut. Nunc augue erat, rutrum ac vehicula nec, pulvinar in eros.
</p>
</div>
</fieldset>
</div>
Use this css; notice i have added comments to the code i change or added
#outer{
max-width:500px;
text-align:center;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNyPOuKMHtvXNa5dnlc8xGXvW-nVfguLdlj9sj4-K6cTA0Zbf7");
}
#opaq{
background-color: rgba(48, 44, 44, 0.7);
padding:5px;
}
#inner{
border:1px solid red;
margin:10px;
color:white;
border-bottom:none;
}
#shop{
position:relative;
top:8px;
display: inline-block;
z-index:200; /*added*/
}
#shop:after{
content: "";
position: absolute;
border-bottom: 1px solid white;
top: 9px;
width: 364%; /* changed */
left: 100%;
margin-left: 15px;
}
#shop:before{
content: "";
position: absolute;
border-bottom: 1px solid white;
top: 9px;
width: 364%; /* changed */
right: 100%;
margin-right: 15px;
}
border split into table cells:
body
{
font-family:arial;
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNyPOuKMHtvXNa5dnlc8xGXvW-nVfguLdlj9sj4-K6cTA0Zbf7");
background-size:cover;
margin:0px;
}
.box div
{
border:0px solid RGBa(255,255,255,0.5);
}
.shade
{
background-color:RGBa(50,50,50,0.7);
padding:20px;
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
h1
{
text-align:center;
text-transform:uppercase;
}
.bottomborder
{
display:table;
table-layout:fixed;
}
.box .left
{
width:50%;
border-width:0px 0px 2px 2px;
}
.box .right
{
width:50%;
border-width:0px 2px 2px 0px;
}
.box .col
{
display:table-cell;
}
.shopall
{
padding: 0px 15px;
white-space: nowrap;
position: relative;
top: 10px;
color:RGB(200,150,0);
font-weight:bold;
font-size:20px;
text-transform:uppercase;
}
.box
{
margin-left:auto;
margin-right:auto;
width:1100px;
margin-top:15px;
max-width: 100%;
}
.box .content
{
padding:5px 55px 10px 55px;
border-width:2px 2px 0px 2px;
border-top-left-radius:0px;
border-top-right-radius:0px;
color:white;
}
<body>
<div class="shade">
<div class="box">
<div class="content">
<h1>Performance & Parts </h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur in arcu at placerat. Aenean sed lorem tincidunt, maximus purus eget, ornare metus. Nam interdum lobortis imperdiet.
</div>
<div class="bottomborder">
<div class="left col">
</div>
<div class="col">
<div class="shopall">
shop all
</div>
</div>
<div class="right col">
</div>
</div>
</div>
</div>
</body>
You may try a negative margin and some flex to draw side borders, and it will keep a coherent HTML with title coming first in the code :
div {
margin:2em;
display:flex;
flex-flow:column;
text-align:center;
border:solid;
border-bottom-color:transparent;
background:rgba(0,0,0,0.2);
box-shadow: 0 0 0 2em rgba(0,0,0,0.2);
}
div h2 {
order:1;
display:flex;
margin:0 0 -0.6em 0;
font-variant:small-caps;
}
h2:before,
h2:after {
content:'';
flex:1;
border-bottom:solid;
margin:auto 1em auto -3px ;
}
h2:after {
margin: auto -3px auto 1em;
}
p {padding:0.25em 0.5em;}
html {background:url(http://lorempixel.com/800/600/city/6);
background-size:cover;
color:white;
text-shadow:0 0 1px black;
}
<div>
<h1>HTML Ipsum Presents</h1>
<h2>shop all</h2>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
</div>
I'm trying to make a few rows like in a table, but with divs.
Each one has an image on the left, a block of text, and "read more"..
I've tried using display:table, but it doesn't seem to be working.. The text is and images are not aligned properly..
http://jsfiddle.net/76a4j/1/
.entry{
width=100%;
display:table;
}
entry-row {
border: 2px #000000 solid;
margin-top:5px;
margin-bottom:5px;
display: table-row;
}
.imgrL {
border: 1px solid #c7c5c8;
padding: 5px;
float:left;
clear:left;
}
Thanks for the answers everyone, I see what I did wrong and have fixed it now :)
You have two problems:
CSS does not use =. Change
width=100%;
to
width: 100%;
You need to use . on all class selectors. Change
entry-row {
to
.entry-row {
With these changes, it looks more like your image.
JSFiddle
Here is the solution you want:
HTML
<div class="entry">
<a href="#">
<img src="#" />
</a>
<div class="text">
<h3 class="title">Article 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur scelerisque arcu at accumsan feugiat. Fusce at interdum sapien.
Phasellus nec odio varius ante imperdiet facilisis. Etiam iaculis dui vitae nibh scelerisque fermentum.
Nam iaculis quis purus ac congue. Maecenas sed elit tortor.
Sed gravida velit nulla, sit amet dapibus elit mollis vitae.
In libero libero, mattis et ipsum eu, euismod aliquet diam.
Nulla eu neque interdum, suscipit libero nec, facilisis sapien. Donec consequat porttitor interdum.
Nullam non blandit massa.Read more
</p>
</div>
</div>
CSS
.entry > a {
float: left;
}
.entry img {
width: 130px;
height: 130px;
}
.entry .text {
float: right;
width: 700px;
}
.entry:after {
clear: both;
content: '';
display: block;
}
.entry .title {
color: #FF7A00;
font-family: arial;
font-size: 15px;
}
.entry .text {
margin: 0px 0px 0px 20px;
}
.entry .text * {
margin: 0px;
}
.entry .read-more {
float: right;
}
display: inline-block;
Could be done for you
add this css
div
{
display: inline-block;
}
Please change css code
entry-row {
border: 2px #000000 solid;
margin-top:5px;
margin-bottom:5px;
display: table-row;
}
To
.entry-row {
float:left;
border: 2px #000000 solid;
margin-top:5px;
margin-bottom:5px;
}
You have to add overflow:hidden property to each row.
.entry-row {
overflow:hidden;
margin:0 0 20px;
}
Hope it will help.
Problem:
I am trying to extend the border line of each div so it has full height, see the following picture:
HTML code:
<div class="wrapper">
<div class="box1row box1top">
<div class="arrow"><img src="./img/circle_arrow_right.png" class="arrowimage"></div>
<div class="numbers">1.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar.</div>
</div>
<div class="box1row box1bottom">
<div class="arrow"> </div>
<div class="numbers">2.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar. Mauris euismod sem ornare nisi consequat quis tincidunt turpis tempor. Vivamus mollis luctus nulla sit amet consequat.</div>
</div>
</div>
CSS code:
.wrapper {
margin-bottom: 1.5em;
}
.arrow {
display: block;
float: left;
border-right: 1px solid #ddd;
width:40px;
text-align:center;
padding-top:5px;
}
.arrowimage {
width: 16px;
height: 16px;
}
.text {
display: block;
float:left;
border-left: 1px solid #ddd;
width:585px;
padding-left:5px;
margin-left: -1px;
}
.numbers {
display: block;
float:left;
border-left: 1px solid #ddd;
width:30px;
text-align:center;
margin-left: -1px;
}
.box1row {
border: 1px solid #ddd;
margin-bottom: -1px;
}
.box1top {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.box1bottom {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
Question:
How do I extend the line vertically using CSS?
Note. I am using this together with mPDF which is a class to convert HTML/CSS to PDF. mPDF does not allow border-radius to be applied to the table element, and thus I am doing a div-solution.
Since it's tabular data use a <table> with border-collapse:collapse and turn off all outer borders:
HTML
<div class="wrapper">
<table>
<tr>
<td class="arrow"><img src="./img/circle_arrow_right.png" class="arrowimage"></td>
<td class="numbers">1.</td>
<td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar.</td>
</tr>
<! -- ...... -->
<tr>
<td class="arrow"> </td>
<td class="numbers">2.</td>
<td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar. Mauris euismod sem ornare nisi consequat quis tincidunt turpis tempor. Vivamus mollis luctus nulla sit amet consequat.</td>
</tr>
</table>
</div>
CSS
/* collapse all borders */
.wrapper table{
width:100%;
border-collapse:collapse;
}
/* activate all borders */
.wrapper table td {
border:1px solid #ddd;
}
/* turn off unnecessary borders: */
.wrapper table tr:first-child td{
border-top:none;
}
.wrapper table tr:last-child td{
border-bottom:none;
}
.wrapper table tr td:last-child{
border-right:none;
}
.wrapper table tr td:first-child{
border-left:none;
}
/* other elements */
.arrow {
width:40px;
text-align:center;
padding-top:5px;
}
.arrowimage {
width: 16px;
height: 16px;
}
.text {
width:585px;
padding-left:5px;
}
.numbers {
width:30px;
text-align:center;
}
Then you can achieve the rounded borders effect by using border-radius on your .wrapper:
.wrapper {
margin-bottom: 1.5em;
border: 1px solid #ddd;
border-radius: 4px;
}
JSFiddle Demo
While not being a pure CSS solution, the problem can be solved by applying a 1px background-image with repeat-y to .box1row. You already have a fixed width on .number so the background-image can be positioned correctly to replace the border.
Given that my first suggestion (in the comments) won't work because it doesn't play nice with mPDF, another possibility is to use display:table-cell instead of floating your elements:
.wrapper {
margin-bottom: 1.5em;
}
.arrow {
display: table-cell;
width:40px;
text-align:center;
padding-top:5px;
}
.arrowimage {
width: 16px;
height: 16px;
}
.text {
display: table-cell;
border-left: 1px solid #ddd;
width:585px;
padding-left:5px;
margin-left: -1px;
}
.numbers {
display: table-cell;
border-left: 1px solid #ddd;
width:30px;
text-align:center;
margin-left: -1px;
}
.box1row {
border: 1px solid #ddd;
margin-bottom: -1px;
display: table;
}
.box1top {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.box1bottom {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
Updated demo
I'm not sure how mPDF will like that, and bear in mind that it is not IE7 compatible.
Otherwise, if your data qualifies semantically as tabular then you could mark it up as a table, which I imagine won't give mPDF any grief.