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>
Related
I have included a snippet of my example attempt below.
It almost works apart from the fact that the 3rd paragraph does not follow on after the 2nd paragraph.
Update: I've found a solution. #Paul's last comment inspired me. :) I've posted my solution in the answers
#full-width {
position: absolute;
left: 0;
width: 100vw;
border: 3px solid #73AD21;
}
<div style="max-width:300px; border: 3px solid #73AD21; margin:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
I think you won't be able to get that working that way. Due to your absolute positioning the full width div doesn't occupy any space anymore and that's why the following paragraph and the absolute positioned paragraph are overlapping.
It does work, if you create three divs (the first and the last one with max-width and the middle one with full width.
#full-width {
width: 100%;
border: 3px solid #73AD21;
}
.max-width {
max-width: 300px;
margin: auto;
border: 3px solid #73AD21;
}
<div class="max-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<div class="max-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
If you cannot do this, you need to add a fixed margin-top to the last div, which has the same number of pixels as the height of the second paragraph. Nevertheless that's a not a nice solution.
you can try this .if you give position absolute than for the third paragraph need to give margin-top to resolve overflow.
#full-width p{
position:relative;
width:100vw;
max-width:100%;
border: 3px solid #73AD21;
margin-left:0;
}
p{
max-width:300px;
border: 3px solid #73AD21;
margin:auto;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<p>Lsdxsorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
I think the answers provided will be useful to others.
However I do have the restriction that the nested element must inherit the max-width from the outer div otherwise it will add big complications to my code.
However, #Paul's last comment did inspire me to create this answer, which has solved my problem. :)
jQuery(document).ready(function($) {
var fill_size_required = $('#full-width').height()
$('#filler').css('height',fill_size_required);
});
#full-width {
position: absolute;
left: 0;
width: 100vw;
border: 3px solid #73AD21;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="max-width:300px; border: 3px solid #73AD21; margin:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<div id="filler"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
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>
Hi i want to distribute a text column that i retrieve from an SQL Server(no problem retrieving) into two columns.
This jsfiddle
<div class="container-fluid" style="margin-top:170px;">
<div class="row">
<div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div>
<div class="col-lg-6">
<h1>John Doe</h1>
<h2><b>Director</b></h2>
<h5>
Education, title,
</h5>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-lg-6">
<h3 style="margin-top:50px">
About
</h3>
<p class="pp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis purus. Nulla tristique iaculis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p>
</div>
<div class="col-sm-5 col-lg-6" style="margin-top:90px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula non, posuere nunc. Morbi vehicula ac sapien nec vehicula. Donec commodo, elit consequat consectetur suscipit, turpis urna aliquam odio, eget pulvinar ligula.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis volutpat dui, a mollis lorem. Quisque rutrum in ante id pretium. Curabitur nec turpis lobortis, facilisis..<p>
shows the desired layout. As you can see there is paragraph spaces and it looks good. I am only able to get this far using the column. I can't get it to format like above. Can someone help me get the desired formatting.
First take the h3 header out of the .newspaper element, place it above that one so the text starts on the same level in both columns. Then add corresponding bootstrap classes to both the h3 and the .newspaper DIV to avoid the negative margin and limit the width on smaller screens like in the example you quoted: class="col-sm-10 col-lg-12"
Here's the result: https://jsfiddle.net/sozeojgx/1/
change the class of div to col-xs-6 col-sm-6 col-md-6 col-lg-6
I made changes to HTML only and it works fine.
<div class="container-fluid" style="margin-top:170px;">
<div class="row">
<div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h1>John Doe</h1>
<h2><b>Director</b></h2>
<h5>
Education, title,
</h5>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h3 style="margin-top:50px">
About
</h3>
<p class="pp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis purus. Nulla tristique iaculis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p>
</div>
<div class="col-sm-5 col-lg-6" style="margin-top:90px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula non, posuere nunc. Morbi vehicula ac sapien nec vehicula. Donec commodo, elit consequat consectetur suscipit, turpis urna aliquam odio, eget pulvinar ligula.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis volutpat dui, a mollis lorem. Quisque rutrum in ante id pretium. Curabitur nec turpis lobortis, facilisis..<p>
</div>
</div>
</div>
You can achieve it by just 2 media queries:
#media only screen and (max-width: 768px) {
.margin{
margin-top: 0px;
}
}
#media only screen and (min-width: 769px) {
.margin{
margin-top: 85px;
}
}
Just added a class margin and added media query.
Check this CODEPEN
#media only screen and (max-width: 768px) {
.margin {
margin-top: 0px;
}
}
#media only screen and (min-width: 769px) {
.margin {
margin-top: 85px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="margin-top:170px;">
<div class="row">
<div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div>
<div class="col-lg-6">
<h1>John Doe</h1>
<h2><b>Director</b></h2>
<h5>
Education, title,
</h5>
</div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-sm-5 col-lg-6">
<h3 style="margin-top:50px">
About
</h3>
<p class="pp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis
purus. Nulla tristique iaculis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis.
Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p>
</div>
<div class="col-sm-6 col-lg-6 margin">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis
fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.
<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula n</p>
</div>
</div>
</div>
http://pinterest.com/ have a intresting structures of blocks. How I can make the same?
Now I have this code:
li {
float:left;
margin-right:10px;
}
And I get this result:
http://imageshack.us/photo/my-images/339/49022374.png
But, I need this:
http://imageshack.us/photo/my-images/197/86816998.png
Why involving JS?
All you need is a number of floated column divs with inner divs
here is a simple fiddle
HTML
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velitmentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagitti
</div>
</div>
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagittis nibh nulla eget purus. Nunc nec tellus massa. Cras sit amet tortor nec libero condimentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagittis nibh nulla eget purus. Nunc nec tellus massa. Cras sit amet tortor nec libero condimentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
</div>
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis l
</div>
</div>
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ant
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis li
</div>
</div>
CSS
.col {
width:20%;
float:left;
}
.col div {
margin:10px;
padding:5px;
border:1px solid black;
}
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).