OK so here is my code
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
I want my website to look like this: first square is red, next to is green, and below red is yellow square. I thought that float left on first element should make next one jump right next to him. Why doesn't it work?
Add float: left; to .div2 and clear:left to .div3
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
float: left;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
clear: left;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
You need to add float:left to the green box in order to make the element stand next to red. If you added the float:left to the yellow square, it would stand next to green. We added clear: left to "clear" the left floats.
Read more about floats.
The problem is that floating elements are out-of-flow:
An element is called out of flow if it is floated, absolutely
positioned, or is the root element.
Therefore, they don't impact surrounding elements as an in-flow element would.
This is explained in 9.5 Floats:
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling:after {
content: 'Block sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
<div class="float"></div>
<div class="block-sibling">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>
There is an exception to that problematic behavior: if a block element establishes a Block Formatting Context (is a BFC root), then it won't overlap the float:
The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context […] must not overlap the margin box of any floats in the same
block formatting context as the element itself.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling.bfc-root:after {
content: 'BFC sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="float"></div>
<div class="block-sibling bfc-root">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>
For example, you can establish a BFC with overflow different than visible, e.g. hidden
.div2 {
overflow: hidden;
}
.div1 {
height: 40px;
width: 40px;
background-color: red;
display: block;
float: left;
}
.div2 {
height: 40px;
width: 40px;
background-color: green;
display: block;
overflow: hidden;
}
.div3 {
height: 40px;
width: 40px;
background-color: yellow;
display: block;
}
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
float:left;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
float:left;
clear: both;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
This will do what you want, but, there is much to improve in that code to make it more simple and more DRY, this will be a short answer, if you want to see a better and smaller style to do the same just ask, and gladly will help.
Related
In mobile view, the footer is not remaining at at the bottom of the page. It stays somewhere above the bottom. I want the footer to stay at the bottom always in mobile view and desktop view. But the footer should not be visible always, if the site has much contents, user will have to scroll down to see the footer. What changes do I need to make in the css file to make the footer stay at the bottom of the page always?
html { height: 100%; }
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:1100px;
overflow:auto;
height:100%;
}
#mainPart{
margin:0 auto;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
}
footer {
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
}
.footrow{
overflow:hidden;
background-color: #111;
display:block;
}
.footrow2{
overflow:hidden;
background-color: #002c42;
display:block;
padding:15px;
}
.foot{
max-width:1080px;
margin:0 auto;
font-size:11px;
line-height:18px;
}
.foot-p{
font-weight: 600;
padding:2px;
color:#66e355 !important;
}
.half-width {
width: 50%;
float:left;
}
.quarter-width {
width: calc(25% - 30px);
float:left;
padding:15px;
}
#social2 {
display: block;
background-color: transparent;
float: left;
margin: 0 auto;
}
.sc-icn2 {
width: 50px;
height: 50px;
display: block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
}
<html>
<head>
</head>
<body>
<div id="mainPart">
</div>
<div class="container">
</div>
<footer>
<div class="footrow" >
<div class="foot">
<div class="quarter-width">
<div>
</div>
</div>
<div class="quarter-width">
</div>
<div class="quarter-width">
<div id="social2">
</div>
</div>
<div class="quarter-width">
</div>
</div>
</div>
<div class="footrow2" >
<div class="foot">
<div class="half-width">
</div>
<div class="half-width">
</div>
</div>
</div>
</footer>
</body>
</html>
To achieve that result define the footer position to bottom. position: absolute; bottom: 0;
The position property specifies the type of positioning method used for an element. The absolute element is positioned relative to its first positioned ancestor element which is the body As you can see in body css rule the element is positioned relative to its normal position.
More about position property can be found here.
html {
position: relative;
min-height: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
overflow-x: hidden;
margin: 0px;
position: relative;
min-height: 100%;
height: auto;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #34495e;
color:#fff;
text-align: center;
}
<div class="demo">
<h1>Footer Stays Bottom</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
To make the footer stay at bottom of the page, you simply have to add position: absolute; and bottom: 0; in the block of CSS that applies to footer. So it will become:
footer{
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
position: absolute;
bottom: 0;
}
You can do this by many ways:
There is negative bottom margins on wrappers
There was a wrapping element that held everything except the footer. It had a negative margin equal to the height of the footer.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
<div class="content">
<h1>Sticky Footer with Negative Margin 1</h1>
</div>
<footer class="footer">
Footer
</footer>
Negative top margins on footers
This technique did not require a push element, but instead, required an extra wrapping element around the content in which to apply matching bottom padding to. Again to prevent negative margin from lifting the footer above any content.
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
background: red;
}
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
There is calc() reduced height wrappers
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.content {
min-height: calc(100vh - 70px);
padding: 40px 40px 0 40px;
}
.footer {
height: 50px;
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
<div class="content">
<h1>Sticky Footer with calc()</h1>
</div>
<footer class="footer">
Footer
</footer>
And also you can use flexbox
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1 0 auto;
padding: 20px;
}
.footer {
flex-shrink: 0;
padding: 20px;
background: #42A5F5;
color: white;
}
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
</div>
<footer class="footer">
Footer
</footer>
This works for you. Try it.
For that add enough content in side the .container div.
And add min-height value to .container as below.
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:100%;
overflow:auto;
height:100%;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
/*new style*/
min-height:768px;
}
#media only screen and (max-width: 768px) {
.container{
max-width: 80%;
margin:20px auto 40px auto;
min-height:480px;
}
}
html { height: 100%; }
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:100%;
overflow:auto;
height:100%;
}
#mainPart{
margin:0 auto;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
min-height:768px;
}
footer {
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
}
.footrow{
overflow:hidden;
background-color: #111;
display:block;
}
.footrow2{
overflow:hidden;
background-color: #002c42;
display:block;
padding:15px;
}
.foot{
max-width:1080px;
margin:0 auto;
font-size:11px;
line-height:18px;
}
.foot-p{
font-weight: 600;
padding:2px;
color:#66e355 !important;
}
.half-width {
width: 50%;
float:left;
}
.quarter-width {
width: calc(25% - 30px);
float:left;
padding:15px;
}
#social2 {
display: block;
background-color: transparent;
float: left;
margin: 0 auto;
}
.sc-icn2 {
width: 50px;
height: 50px;
display: block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
}
#media only screen and (max-width: 768px) {
.container{
max-width: 80%;
margin:20px auto 40px auto;
min-height:480px;
}
}
<html>
<head>
</head>
<body>
<div id="mainPart"></div>
<div class="container">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<footer>
<div class="footrow" >
<div class="foot">
<div class="quarter-width">
<div>
</div>
</div>
<div class="quarter-width">
</div>
<div class="quarter-width">
<div id="social2">
</div>
</div>
<div class="quarter-width">
</div>
</div>
</div>
<div class="footrow2">
<div class="foot">
<div class="half-width">
</div>
<div class="half-width">
</div>
</div>
</div>
</footer>
</body>
</html>
I am making a simple messaging app UI. I am trying to make the messages anchor to the bottom of the screen like most modern messaging applications. So far, here is the bare bones of my messaging UI:
HTML
<div class="main-wrapper">
<div class="contact-list">
contacts here
</div>
<div class="conversation-area">
<div class="msg msg-them">this is Alison</div>
<div class="msg msg-me">this is me!</div>
<div class="msg msg-them">you are so cool! :)</div>
<div class="msg msg-them">seriously.</div>
</div>
</div>
SASS
body, html {
height: 100%;
}
.main-wrapper {
height: 100%;
margin: 0px auto;
overflow: hidden;
.contact-list{
float: left;
width: 200px;
height: 100%;
background-color: #aaa;
border-right: 2px solid #777;
}
.conversation-area{
overflow: hidden;
height: 100%;
background-color: #ccc;
.msg{
vertical-align: bottom;
border: 1px solid black;
&-them{
background-color: blue;
float: left;
max-width: 250px;
display: inline;
clear: both;
}
&-me{
background-color: red;
float: right;
max-width: 250px;
display: inline;
clear: both;
}
}
}
}
Whenever a new message comes in, I'll insert it as the last child of the .conversation-area div. I have the messages stacking just like I want them. I just need to make them stick to the bottom of the .conversation-area div.
I've tried messing with position attributes of both the parent and child divs, as well as tried to get vertical-align to work, but so far I haven't gotten it functioning.
How can I make my messaging app look exactly the same EXCEPT the messages stick to the bottom rather than the top?
Here's the jsFiddle: https://jsfiddle.net/63vufn7u/1/
You can achieve this with display:table-cell; and vertical-align:bottom;
I have made some changes to your code but im sure you can adapt now its working:
.main-wrapper {
width: 100%;
height: 200px;
font-family:sans-serif;
}
.contact-list {
width:25%;
display: table-cell;
height: 200px;
background: #555;
color: #fff;
text-align: center;
float: left;
}
#conversation-area {
height: 200px;
width: 300px;
background: steelblue;
display: table-cell;
vertical-align: bottom;
}
.msg {
display: block;
margin: 15px 10px;
}
.msg p {
border-radius:5px 5px 5px 5px;
background: #fff;
display: inline;
padding: 5px 10px;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
.msg-me {
text-align: left;
}
.msg-me p {
border-radius:15px 15px 15px 0px;
}
.msg-them {
text-align: right;
}
.msg-them p {
border-radius:15px 15px 0px 15px;
}
<div class="main-wrapper">
<div class="contact-list">
Contacts
</div>
<div id="conversation-area">
<div class="msg msg-them"><p>this is Alison</p></div>
<div class="msg msg-me"><p>this is me!</p></div>
<div class="msg msg-them"><p>you are so cool! :)</p></div>
<div class="msg msg-them"><p>seriously.</p></div>
</div>
</div>
Your friendly neighborhood Flexbox solution:
On the container, you could also use the justify-content property to align it's contents to the bottom:
.conversation-area {
display:flex;
flex-direction:column;
justify-content:flex-end;
}
Learn more about flexbox here: http://www.flexboxin5.com
The easiest way I've found is to use flex-direction: column-reverse;.
The drawback to flex-direction: column; is that it starts you at the top and you have to scroll down for older texts. And that's not how chat app interfaces tend to work.
column-reverse makes the texts stick to the bottom. The tradeoff is you have to insert your messages in ascending time stamp order instead of reversed like you normally would, because flex-box does the reversing in css. Same with any animations. So new text bubble animation would be applied to the :first child rather than the :last child.
Here's an example without animations: https://jsfiddle.net/ut1Lybsj/1/
<style>
.container {
height: 200px;
width: 200px;
overflow-y: scroll;
display: flex;
flex-direction: column-reverse;
border: 1px solid black;
}
.container div {
margin-top: 20px;
}
</style>
<div class="container">
<div style="background:red;">First Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>
<div style="background: skyblue;">Second Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>
<div style="background: green;">Third Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>
</div>
I want to center a DIV which width is unknown. It should be as width as the actual content. I tried:
<div style="background-color: red; width: 300px; text-align: center; margin: 0 auto;">dsffsffsfsddf</div>
it only works when "width" is set. Auto wont help.
display: table; margin: 0 auto;
http://jsfiddle.net/vabxz/
div{
display:table
margin:0 auto;
}
Take a look at this previous answer: centering variable width divs
But one answer is to basically use css-floats
<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>
<div id="hideoverflow">
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo libero, commodo ut iaculis in, placerat vel purus.
</div>
</div>
</div>
It's quite simple (http://jsfiddle.net/bukfixart/tYyJN/):
<div style="border:1px solid #000;text-align:center;">
<div style="border: 1px solid #f00; display:inline-block;">some content</div>
</div>
The key points are text-align:center for the outer box and display:inline-block for the inner box
Check out my fiddle: http://jsfiddle.net/PRUBd/
CSS
body {
text-align: center;
}
#container {
text-align: left;
border: 1px solid black;
padding: 10px;
display: inline-block;
}
HTML
<div id="container">
This div is as wide as its content and centered!
</div>
I was wondering why my Right-nav div isn't responding to anything in the CSS.
HTML:
<body>
<div id="header">Header</div>
<div id="main-wrap">
<div id="sidebarwrap">
<div id="nav">Left Nav</div>
advertisment pictures
</div>
<div id="content-wrap">
<div id="picture-wrap">
<div class="info">Picture</div>
</div>
<div id = "Content"><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>
<div class ="Right-nav"><p>right-nav</p></div>
</div>
</div>
<div id="footer">Footer</div>
</body>
CSS:
/**
* custom layout
*/
#header,
#footer {
background-color: #f1f1f1;
width: 60%;
margin: 0 auto;
}
#main-wrap {
background-color: #D9D9D9;
width: 60%;
margin: 0 auto;
}
#sidebar {
background-color: #d2d2d2;
}
#content-wrap {
background-color: #c5c5c5;
}
.info {
background-color: #DDD;
}
.info + .info {
background-color: #e6e6e6
}
/* sizes */
#main-wrap > div {
min-height: 450px;
}
#header,
#footer {
min-height: 40px;
}
.info {
min-height: 80px;
}
/* layout */
#main-wrap {
/* overflow to handle inner floating block */
overflow: hidden;
}
#sidebarwrap {
float: left;
width: 30%;
overflow:hidden;
background-color:blue;
}
#nav{
min-height: 80px;
background-color: red;
}
#content-wrap {
float: right;
width: 70%;
overflow:hidden;
background-color:blue;
}
#Content{
float:left;
width:40%;
min-height:370px;
background-color:red;
}
#Right-nav{
background-color:red;
}
#picture-wrap {
/* overflow to handle inner floating block */
overflow: hidden;
}
.info {
width:100%;
float: left;
}
It's because you've given the right div a class in the HTML but an id in the CSS, change both to one or the other and the problem should be resolved.
Change <div class="Right-nav"> to <div id="Right-nav">
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.