CODEWITHSUNDEEP
htmlcsscss-float
makerofthings7
makerofthings7

Reputation: 61473

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

I'm trying to get a bunch of div's to wrap around an image, but am failing.

Since pasting HTML doesn't seem to work in StackOverFlow, here is my current attempt at emulating a Outlook 2010 contact entry.

Source from: http://www.perfmon.com/download/contactdivtest.htm (edit: or check out @Hristo's cool online editor )

<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
    width: 250px;
    height: 220px;
}
 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="ContactBigLeftBorder.png" alt="">
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>
</body>
</html>

Can anyone tell me what I need to do to make all the div's move up and wrap around the image? I really hope I'm not missing something simple...

Here is the target layout I'm attempting:

alt text http://perfmon.com/download/contactdivtest.bmp

Upvotes: 3

Views: 756

Answers (5)

tomvon
tomvon

Reputation: 5371

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>

Upvotes: 0

Danny Nimmo
Danny Nimmo

Reputation: 684

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.

Upvotes: 1

Swizec Teller
Swizec Teller

Reputation: 2322

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.

Upvotes: 1

Joeri Hendrickx
Joeri Hendrickx

Reputation: 17445

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.

Upvotes: 1

KoolKabin
KoolKabin

Reputation: 17683

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>

Upvotes: 1

Related Questions