I have a video slider and I use bootstrap for this. Now I've inserted a table within the slider(carousel). It works perfectly but I'm changing the layout. The picture below is the layout I want. I've managed to put the background. The problem is I can't insert a space between the columns of the description. How can I insert space in each of the column?
.rowTwo{
background-color: #491f43;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
h1{
color: #ffffff;
padding: 0px;
}
.txt_txt{
color: #ffffff;
font-size: 10pt;
padding: 0px;
line-height: 0px;
}
body
<div class="item active">
<table class="table table-bordered">
<tr>
<td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
<td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
<td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
</tr>
<tr>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
</table>
</div>
preview site
Don't know if this will work. but you can have something like this
<div class="item active">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
<div class="col-lg-12 col-sm-12" style="padding:0px">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
</div>
<div class="col-lg-12 col-sm-12" >
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
<div class="col-lg-12 col-sm-12" style="padding:0px">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
</div>
<div class="col-lg-12 col-sm-12" >
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
<div class="col-lg-12 col-sm-12" style="padding:0px">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
</div>
<div class="col-lg-12 col-sm-12" >
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</div>
</div>
</div>
This puts space between each of the table data cells, coming close to what you are trying to achieve, without all the extra styling.
table {
background-color: transparent;
border-spacing: 30px !important;
border-collapse: separate;
}
td {
border: 2px solid black;
}
<div class="item active">
<table class="table table-bordered">
<tr>
<td align="center">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
</td>
<td align="center">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
</td>
<td align="center">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
</td>
</tr>
<tr>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
</table>
</div>
Related
I am attempting to vertically align my text in the center of its row regardless of how long the text is in my bootstrap table.
I am attempting to handle this with vertical-align: middle; line-height:90px; At the moment adjusting the line-height seems to work and allow me get text in the center but if the text is two-lines then the line-gap between the two is too large.
How can I vertically align my text in the right column to fit vertically be in the middle of the page?
Here is my code snippet :
.table-bordered th, tbody td:nth-child(2) {
vertical-align: middle;
line-height: 90px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead class="text-14 tx-light">
<tr class="d-flex">
<th class="col-6 blue-background" scope="col">LEFT</th>
<th class="col-6 red-background" scope="col">RIGHT</th>
</tr>
</thead>
<tbody class="text-18 tx-dark">
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-link">Link to the described article here </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-link">Link to longer url that takes up two lines here test test test test </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>ib
<td class="col-6"> <a class="text-underlined-18 ul-link"> Link to article here</a></td>
</tr>
</tbody>
</table>
I am expecting my text to sit in the center of the row similar to this photo without the huge line gap if the text is two-lines:
Change the desired table data element to display: flex;, make the flex-direction: column; and justify-content: center;.
.table-bordered th, tbody td:nth-child(2) {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 90px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead class="text-14 tx-light">
<tr class="d-flex">
<th class="col-6 blue-background" scope="col">LEFT</th>
<th class="col-6 red-background" scope="col">RIGHT</th>
</tr>
</thead>
<tbody class="text-18 tx-dark">
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-ibisworld">Link to the described article here </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-ibisworld">Link to longer url that takes up two lines here test test test test </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-ibisworld"> Link to article here</a></td>
</tr>
</tbody>
</table>
I'm trying to get tooltips working properly within a scrollable div container. To achieve this I've set the tooltips position to absolute and for its parent element (.panel-section) to relative. Problem is with the very first tooltip which should be visible on top of the .panel-header but now it's going "under" it and is not visible.
.panel {
margin: 50px;
width: 500px;
border: 1px solid black;
}
.panel-header {
height: 2rem;
background-color: silver;
border-bottom: 1px solid black;
}
.panel-content {
overflow-y: auto;
height: 500px;
}
.panel-section {
position: relative;
}
h1,
h2 {
margin: 0;
}
.tooltip {
width: 200px;
height: 50px;
border: 1px solid silver;
background-color: #333333ee;
color: silver;
position: absolute;
top: -50px;
display: none;
}
.panel-section:hover .tooltip {
display: block;
}
<html>
<body>
<div class="panel">
<div class="panel-header">
<h1>Header content</h1>
</div>
<div class="panel-content">
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
</div>
</div>
</body>
</html>
HTML code:
<div class="box-wrapper">
<div class="box odd">
<div class="box-title">TITLE 1</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 2</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 3</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 4</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 5</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 6</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 1</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 2</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 3</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 4</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 5</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 6</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus.</p>
</div>
</div>
</div>
CSS:
.box-wrapper {
padding: 0;
margin: 0;
margin-left: -10px;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: space-around;
}
.box {
margin-top: 10px;
padding-left: 10px;
}
.box.odd {max-width: 16.66%;}
.box.even {max-width: 25%;}
.box.side-block {margin: 10px 0; border: 1px solid #ccc;}
.box.side-block .box-title {background-color: #70E070;}
.box.side-block .box-content {padding: 0 8px 8px;}
.box.side-block .box-content p {margin-bottom: 0;}
.box .box-title {background-color: #FF4A4A; color: #fff; text-align: center; margin-bottom: 10px;
padding: 5px;}
.box.odd .box-title {background-color: #4F8DFF;}
.box.even .box-title {background-color: #FF4A4A;}
.box .box-content {text-align: left;}
Here is the code example in codepen: http://codepen.io/anon/pen/WxzmZr
Check in Chrome/Firefox then check in Safari. In Chrome/Firefox, I see all the 6 boxes aligned (like I want) but in Safari one box show per line.
How can I fix that?
Thanks in advance.
The problem was with .box max-width. I just changed it to width and all worked fine.
I am trying to get a paragraph to display to the right of another paragraph, however it is currently appearing below it. I am trying to use overflow auto but am unsure of where it is supposed to go.
<div style="padding-left: 5px; padding-right: 5px; float: left;">
<p style="width: 400px; border-right: 2px solid black;">
Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
</p>
<p style="padding-left: 5px;">
Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
</p>
</div>
An overflow: auto belongs on the parent div, and you need a width on both floated elements. Try this:
<div style="padding-left: 5px; padding-right: 5px; overflow: auto;">
<p style="float: left; width: 400px; border-right: 2px solid black;">
Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
</p>
<p style="float: left; width: 400px; padding-left: 5px;">
Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
</p>
</div>
Fiddle
demo : http://jsfiddle.net/rn8k3/
<div style="padding-left: 5px; padding-right: 5px; float: left;">
<p style="width: 48%; border-right: 2px solid black;float:left;">
Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
</p>
<p style="width:48%;padding-left: 5px;float:left;">
Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
</p>
</div>
You need a width on the second paragraph and I also think they also need to float.
You need to set both a width and float:left for both paragraphs. You do not need float:left on the wrapping DIV.
<p style="width: 400px; border-right: 2px solid black; float:left;">
Another option that does NOT need a width on the second p tag:
<div style="padding-left: 5px; padding-right: 5px;position:relative; ">
<p style="width: 400px; border-right: 2px solid black;display: inline-block;">
Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
</p>
<p style="padding-left: 5px;display: inline-block;position:absolute;top:0px;right:0px;margin-left:410px;">
Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
</p>
</div>
My image says it all.
At #1 screenshot is how it is right now
At #2 is how I want it to be
How can i do this?
Here's my current html:
<div>
<span style='float: left; margin: 10px; width: 60px; display: block;'>
<img style='border: 1px solid #FFF; width: 61px; height: 80px;' src='images/profilePhoto/thumbs/104.jpg'>
<br>Rafo O.
</span>
<h1>(inget ämne)</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla urna eget urna euismod aliquet. Duis porta volutpat blandit. Phasellus bibendum bibendum porta. Nunc molestie tristique leo, sed euismod orci ultricies vitae. Mauris non libero a leo ultricies laoreet. Suspendisse luctus urna vel sapien tristique vitae semper nulla eleifend. Integer congue aliquam pharetra. Phasellus diam neque, tincidunt vel elementum vel, ornare sit amet mi. Nulla tincidunt purus in odio vulputate mollis. Nunc urna odio, rutrum eu ultricies a, facilisis ullamcorper nunc. In purus velit, varius vel laoreet eu, tincidunt non purus. Nulla facilisi. Sed ac lectus nibh. Praesent non velit nibh.<br />
........
</div>
<p style='float: right; color: grey; font-weight: bold;'>1-11-2010 kl. 13:28</p></div>
<div class='clearfloat'></div>
Add a margin to the left of the text:
<div style="margin-left:100px;">
<h1>(inget ämne)</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]
</div>
</div>
You should consider unobstrusive CSS and move your styles out of your markup (use external files).