I'm hoping someone can help me with collapsible div tags.
What I want to do is to create a list with multiple collapsible 2-column sections. The sections are designed with div tags and embedded into a list.
My code so far works in IE, but not in Firefox or Chrome. In the latter two, the list items move to the right when a 2-column sample is expanded.
The code below reproduces the problem. If you open it in Mozilla or Chrome and click on the [ ] in the first sample item, the bullet item for the sample below will move to the right.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="jquery-1.4.4.js"></script>
<style type="text/css">
div.sample {
position:relative;
left:0px;
}
div.item {
position:relative;
display:none;
width:600px;
left:10px;
text-align:justify;
}
div.ltcol{
float:left;
width:45%;
}
div.rtcol{
float:right;
width:45%;
}
</style>
</head>
<body>
<ul>
<li><div id="sample1" class="sample">Sample [ ]
<div id="verbiage1" class="item">
<div id="source" class="ltcol">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="target" class="rtcol">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div></div></li>
<li><div id="sample2" class="sample">Sample [ ]
<div id="verbiage2" class="item">
<div id="source" class="ltcol">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="target" class="rtcol">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div></div></li>
<script>
//Quick and dirty javascript to get it up and running.
alldivs=['verbiage1','verbiage2'];
function showone(name) {
divname="#".concat(name);
for (var i in alldivs){
if ("#".concat(alldivs[i])==divname){
$(("#".concat(alldivs[i]))).toggle(200);
}
else{
$(("#".concat(alldivs[i]))).hide(200);
}
}
return true;
};
</script>
</body>
</html>
Any help is appreciated.
If I'm understanding your problem correctly you need to clear your verbiage div's. See this fiddle for reference: http://jsfiddle.net/Ujw5b/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
overflow: visible;
}
Related
I'm trying to use the -webkit-line-clamp attribute (as seen https://css-tricks.com/almanac/properties/l/line-clamp/) but it doesn't seem to work with nested tags.
I'm trying to make this sample works :
<html>
<body>
<div style="width:200px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</body>
</html>
My content is generated by quill.js and it's wrapped by multiple p tags. I cannot change that. Do you have any idea of how I can make -webkit-line-clamp (or something similar) works?
If you wrap the two paragraphs in another div, your current code will truncate the displayed text.
Here is a working example:
.container {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
width:200px;
}
<html>
<body>
<div class="container">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</body>
</html>
Here is an example using span tags instead of paragraph tags. This approach allows "..." to become visible:
.container {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
width:200px;
}
<html>
<body>
<div class="container">
<div>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</span>
</div>
</div>
</body>
</html>
I'm struggling with styling a simple ordered list to look this:
The HTML must be standard html like:
<ol>
<li>asdf asdf</li>
<li>asdfasdfasdf</li>
<li>asdfasdf</li>
<li>asdf...</li>
</ol>
I've tried a bunch of different ways with list-style-position: inside, text-indent, etc... but I can't seem to make it perfect. I need to have the number inside the background color and the text lined up correctly when wrapping. And also would like some space between the number and the text. Is it even possible?
This should do it, the idea is displaying the counter as absolute positioned pseudo content.
JsFiddle Example
ol {
list-style: none;
padding: 0;
margin: 0;
}
ol li {
counter-increment: step-counter;
background: lightgreen;
padding: 20px 20px 20px 50px;
margin-bottom: 8px;
position: relative;
}
ol li:before {
content: counter(step-counter) ".";
position: absolute;
left: 20px;
}
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>
You have to style it like this:
Css:
ol{
list-style-position: inside;
padding:0;
margin:0;
}
li{
margin:0 0 5px;
border:2px solid white;
background:yellow;
padding:20px;
width:500px;
height:30px;
}
html:
<ol>
<li>asdf asdf</li>
<li>asdfasdfasdf</li>
<li>asdfasdf</li>
<li>asdf...</li>
</ol>
http://jsfiddle.net/u4rqyo4L/3/
Update: this problem has found a very satisfactory solution, but in production side effects popped up which I describe in this thread.
So, I'm using a custom counter in my OLs to get numbering like "1 - 1.1 - 1.1.1"
Works fine.
But when I do this, the indentation of the LI is wrong. The text aligns with the left edge of the number, not with the right edge (like standard OLs do).
Edit: To get the numbers layouted the way I want, I had to mess with the standard paddings/margins of the OL.
Now the text aligns with the left edge of the number, not with the right edge (like standard OLs do).
I've tried numerous things, but somehow I can't seem to control the left edge of the LI content.
Also, this feature apparently isn't used terribly often, so web searches didn't yield any hints :-(
Does anybody have an idea what I've been missing?
Below, you find both the CSS and the HTML, and I have put a test case into this cssdesk: http://cssdesk.com/EzPBG
CSS:
ol.wrong {
margin-left: 0;
padding-left: 20px;
counter-reset: counter_level1;
list-style: none outside none;
display: block;
line-height: 18px;
width: 500px;
}
ol.wrong li {
position: relative;
list-style: none;
margin-right:20px;
}
ol.wrong li:before {
display: inline-block;
position: relative;
content: counter(counter_level1) ". ";
counter-increment: counter_level1;
font-weight: bold;
width: 20px;
}
ol.wrong ol {
counter-reset: counter_level2;
}
ol.wrong ol li {
margin-right:0px;
}
ol.wrong ol li:before {
width: 40px;
margin-left: 20px;
content: counter(counter_level1, decimal) "." counter(counter_level2, decimal) ". ";
counter-increment: counter_level2;
}
HTML
<ol class="wrong">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>
Here is one approach:
ol.wrong {
margin-left: 0;
padding-left: 20px;
counter-reset: counter_level1;
list-style: none outside none;
display: block;
line-height: 18px;
width: 500px;
}
ol.wrong li {
position: relative;
list-style: none;
margin-right:20px;
padding-left: 20px; /* create some space for the counter label */
outline: 1px dotted blue;
}
ol.wrong li:before {
display: inline-block; /* block would also work */
position: absolute; /* move this out of the way of the text*/
left: 0; /* move the counter labe into the space from the padding */
content: counter(counter_level1) ". ";
counter-increment: counter_level1;
font-weight: bold;
width: 20px;
}
and you can check the code at: http://jsfiddle.net/audetwebdesign/wsmnJ/
The pseudo-element trick is quite useful, and a good choice in this application.
Start by adding some padding to the left for ol.wrong li, this will create some white space for placing your label.
In your pseudo-element styling, ol.wrong li:before, use position: absolute to remove the label out of the way of the text and position it left: 0. The display type can be either block or inline-block.
You then follow suit for the inner, nested ol.
Just created padding to the left equal in width to the width that you need for your counter/label element.
I agree with Marc Audet, interesting CSS, however by dispensing with HTML's natural way to deal with nested lists you've created your own little world to contend with. As far as I understand it there are three possible ways to deal with this:
Firstly, go back to the standard native way to deal with nested lists as you have with your "standard indentation" list.
Secondly, add something like this to the pseudo-element...
ol.wrong li:before {
float:left;
height:80px;
}
...The floating of the pseudo-element kicks the rest of the LI to the right, however setting the height to a fixed value isn't very flexible unless you can guarantee that all LIs will be the same height (alternatively you can set several heights and choose whichever suits each particular LI... again, though, rather clunky).
Finally, taking the above idea and adding some javascript to deal with changing the height of the pseudo-element on the fly... if this is even possible.
Daniela, I'd think the simple solution is to use positive and negative positioning. the LI is moved to the right (+20px) whereas the counter is moved to the left (-20px). I think it's easier to check this fiddle:
http://fiddle.jshell.net/Gbf6u/
So everything looks fine and works correctly except when you scroll down where the thumbnails are and the left bar is directly across from the thumbnail you can't select them... I know that the z-index div is covering it and thats the reason I can't select them but I need to figure out how to work around this but I can't seem to figure it out. Maybe a jquery solution?
http://originalpenguinaccessories.com/midwest/
Updated with a sample...
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#headerContainer {
width: 100%;
position:fixed;
z-index:9999;
display:inline;
}
#topbar {
width: 100%;
height: 20px;
background-color: #004570;
-webkit-box-shadow: 0px 5px 5px 0px rgba(100, 100, 100, .9);
box-shadow: 0px 5px 5px 0px rgba(100, 100, 100, .9);
}
#logo {
background-color: #004570;
height: 360px;
width: 250px;
margin-left: 50px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
display: inline-block;
-webkit-box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
}
#logo img {
margin-top: 30px;
margin-left: 15px;
}
#logo h2 {
margin-top: 100px;
color: white;
letter-spacing: 1px;
}
#link {
background-color: #004570;
float: right;
width: 135px;
height: 55px;
text-align: center;
margin-right: 40px;
color: white;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
-webkit-box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
}
#link p {
font-size: .8em;
}
#contentContainer {
width: 40%;
}
</style>
</head>
<body>
<div id="headerContainer">
<div id="topbar"></div>
<div id="logo">
<img src="" alt="">
<h2>Lorem ipsum dolor sit amet</h2>
</div>
<div id="link">
<p>Lorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
<h6>Lorem ipsum dolor sit amet</h6>
</div>
</div>
<div id="contentContainer">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="image-grid">
<div class="imageDiv"> Link
<h4>M442</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="imageDiv"> Link
<h4>M442</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="imageDiv"> Link
<h4>M442</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="imageDiv"> Link
<h4>M442</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Just apply position:absolute to your #logo and #link divs (and right:0 for the #link). This will take them out of the element flow and the parent div will collapse.
Try this one.
#logo {
position: relative;
z-index: 100;
}
.fs-pager-wrapper {
z-index: 50;
}
I know it's easy enough to wrap text around images by floating the image right or left & then putting your text after it, but what I am wanting to do is wrap other elements around it as well, such as div's.
I tried to set my div to inline & this worked fine, however once I added other divs inside that div it still looked fine, but when looking at it in Firebug the little blue line that shows the element you are hovering over in the code extended over the image as well & when I attempted to add padding to the container div it didn't work & you could see that was because the padding was added right at the end.
I ended up getting it to look ok but adding padding to the image, however it still doesn't seem the right way to go about it seeing as Firebug doesn't like it & I am worried about compatibility issues.
Here is an image of what I am trying to do.. the gray area is where I want the text/elements to wrap & the brown is the image.
Here is some example code: (This example is the not wrapping version)
<div class="main">
<img src="../images/work/example.png" width="275" height="233" class="screenshot" alt="Example" />
<div class="details">
<div class="about">
<div class="title">
About:
</div>
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<!-- Info Ends -->
</div>
<!-- About Ends -->
</div>
<!-- Details Ends -->
<div class="contentClear"></div>
</div>
<!-- Main Ends -->
Example CSS:
#content .wrapper .left .main {
padding-top: 20px;
width: 550px;
}
#content .wrapper .left .main .screenshot {
float: right;
border: 1px solid #c0c0c0;
width: 275px;
}
#content .wrapper .left .main .details {
width: 263px;
padding-right: 10px;
}
#content .wrapper .left .main .details .title {
color: #0F5688;
font-size: 1.8em;
font-family: arial;
font-weight: bold;
}
#content .wrapper .left .main .details .info {
margin-top: 6px;
font-size: 1.3em;
font-family: Arial;
color: #636363;
line-height: 1.6;
}
Here is an image showing the issue FireBug has with it (from the JSFiddle example), as I say it looks fine on the browser, but seeing as the firebug bar extends all the way over the image I was worried that may cause problems..
Yes, the correct way to move something to one side and have stuff wrap around it is to float the element.
In the example below (simplified from your code), adding padding to the floated image works just fine.
CSS:
.main .screenshot {
float: right;
border: 1px solid #c0c0c0;
padding: 5px;
}
.main .title{
font-size: 140%;
}
HTML:
<div class="main">
<img src="img/png" width="150" height="117" class="screenshot" alt="Example" />
<div class="details">
<div class="about">
<div class="title">About:</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
Demo jsFiddle