ansaurus

Question

Wrapping one-line div's around an img (not text)

Answer 1

+1 A:

foor your specific solution span can work better for you:

check the version with span:

<html> 
<head> 
<title> 
</title> 
<style type="text/css"> 
.contactLarge{
    width: 250px;
    height: 220px;
}
.contactLarge span{
    font-weight: bold;
}
 img.picture {
    margin-left: 0px;
    margin-bottom: 0px;
    float: left;
}
.contactLarge item{
}
</style> 
</head> 
<body> 
<div class="contactLarge"> 
<div style="background-color:#C5CED8;clear:both">title </div> 
<img class="picture" width="100" height="200" src="http://www.perfmon.com/download/ContactBigLeftBorder.png" alt=""> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
<span>LastName, Firstname</span> <br /> 
<span>CompanyName</span> <br /> 
<span >Title</span> <br> 
<span >Work#</span> <br> 
<span >Mobile#</span> <br> 
<span >Home</span> <br> 
<span >email1</span> <br> 
<span >email2</span> <br> 
<span >email3</span> <br> 
<span >Street</span> <br> 
<span style="background-color:#F1F5F9;  float:left;"  >City,</span> <br> 
<span style="background-color:#F1F5F9; float:left;"  >State</span> <br> 
<span style="background-color:#F1F5F9;"  >Zip</span> <br> 
<span style="background-color:#F1F5F9;"  >httppage</span> <br> 
<span style="background-color:#F1F5F9; ">im</span> <br> 
</div> 
</body> 
</html>

KoolKabin 2010-08-05 12:19:28

Thanks for going through the trouble of fixing my spans. Lesson learned :)

MakerOfThings7 2010-08-05 13:57:39

Answer 2

+1 A:

A <div> is a block level element - this means that it automatically clears to a new line and has 100% width. Without seeing your html or css it's hard to see where you're going wrong but try using float:

div {
    float: right;
    width: 50%;
}

Edit:
Now that you've posted a picture of what you want I can say that you'll probably want something like this:
HTML:

<div id="container">
    <img src="foo.jpg" />
    <div id="content">
        <p>Blah blah</p>
        <p>More blah blah</p>
    </div>
</div>

CSS:

#content {
    width: 60%;
    float: right;
}

Just make sure that the width of the img + width of the inner div is less than the width of the containing div.

dannybolabo 2010-08-05 12:19:28

Thanks for explaining this to a css n00b!

MakerOfThings7 2010-08-05 13:47:51

Regarding the edit: Is a P better than a Span?

MakerOfThings7 2010-08-05 14:05:48

Semantically a p is a paragraph of text, whereas span means nothing semantically. It's entirely up to you on what you chose to go for, keeping in mind that p is a block element and span is inline.

dannybolabo 2010-08-05 14:08:44

Answer 3

+1 A:

Div is a block-level element. It will take up full width and generate a break before and after.

Img is, by default, an inline element. You want to wrap it in another one (not float). Either use span's instead (span is div's inline brother) or set the css display property to inline on the div.

Joeri Hendrickx 2010-08-05 12:40:06

Thanks, how can I tell if a given tag is inline or block?

MakerOfThings7 2010-08-05 13:43:58

http://htmlhelp.com/reference/html40/block.html is a list of block level elements. The remaining tags are inline.

dannybolabo 2010-08-05 13:55:50

Answer 4

+1 A:

A very useful trick for these sorts of things is the "display: inline-block".

It displays things inline (so the wrapping will work), but leaves you with almost the full configurability of a block-level element.

Swizec Teller 2010-08-05 12:42:42

I'm seeing that div vs span may be a religious debate... so I'm taking no sites and +1'ing each side. Thanks for the tip. I like options when designing :)

MakerOfThings7 2010-08-05 14:02:09

Eh, it's not so much about religion, just what you find logical. For me spans never quite made sense, there are usually semantically better options for inline text (label, em, strong etc.)

Swizec Teller 2010-08-05 15:18:33

Good to know. And yea, I can only see myself using spans in situations where I'm binding to data... but that makes me think... perhaps I should open a new question for that.

MakerOfThings7 2010-08-05 21:49:39

Answer 5

A:

If you create a "textbox" div around your text and float it left you should be good to go. See:

<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
    width: 250px;
    height: 220px;
}
 img.picture {
    margin-left: 0px;
    margin-bottom: 0px;
    float: left;
}
.textbox {
    float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">

<div class="textbox">
First, Last <br>
First, Last <br>
First, Last <br>

First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;"  >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>

<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9;  float:left;"  >City,</div>
<div style="background-color:#F1F5F9; float:left;"  >State</div>
<div style="background-color:#F1F5F9;"  >Zip</div>
<div style="background-color:#F1F5F9; clear:left;  float:left;"  >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>

</div>
</body>
</html>

tomvon 2010-08-05 16:23:32

ansaurus

tags:

views:

answers:

Wrapping one-line div's around an img (not text)

related questions