Wrapping text around image

Julius · January 29, 2012

.wrapper article .wrap-image {
    float: left;
    padding-right: 20px;
    max-width: 450px;
    max-height: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
}

But it doesn't work like i want to. It works with this picture:

but does not work with this image

How can I fix this?

floridaflatlander · January 29, 2012

Get and use firefoxe's fire bug, it will help you analize your site and others peoples site with ease. It is a God send. I believe the problem must be with the div with the text that looks good to me (is there really a space between wrapper & article) the text should auto wrap.

Julius · January 29, 2012

I have opera with built in dragon fly, I think it does the same as fire bug. Text:

.wrapper article p {
    text-align: justify;
    font-size: 13px;
}

I think is because of max-width, dont you think?

floridaflatlander · January 29, 2012

I think is because of max-width, dont you think?

Yes

jason310771 · January 29, 2012

maybe not?

Can you post the full code of the page that show the guy standing on the car, it looks like you might have an outer div or img padding affecting the text wrapping.

floridaflatlander · January 29, 2012

Are these dynamic photos or hard coded

Julius · January 29, 2012

<div class="wrapper">
        <section>
                       
            <article>
                <header>
                    <h1><a href="#">Some random photo</a></h1>
                </header>
                
                    <div class="wrap-image">
                        <img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/267534_10150175822712255_172774152254_6000657_5021105_n.jpg" alt="*" />
                    </div>
                    
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    
                    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
                    takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
                    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
                    dolor sit amet.</p>

                    <a href="#" class="more">Read more »</a>

            </article>
</section>
</div>

img tag in .css

.wrapper article .wrap-image {
    float: left;
    padding-right: 20px;
    width: 450px;
    height: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.wrapper article .wrap-image img, .wrapper article .image img { 
    max-width:100%;
    max-height:100%;
    padding: 5px;
    background-color: #fff;
    border-radius: 3px;
}

jason310771 · January 29, 2012

Please post the full html of the page as it would be displayed in a browser including the header and html tags, and all the CSS that is part of the page or not, and not what you feel might be affecting it as we can not help with partial code. I suspect that there is another reason that the text is not wrapping.

jason310771 · January 29, 2012


.wrapper article .wrap-image {
    float: left;
    padding-right: 20px;
   /* width: 450px;*/
    height: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
}

Julius · January 29, 2012

Still no.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MyWebsite</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
    <div class="topbar">
        <div class="project_name">myWEBSite</div>
        <div class="nav">
            <ul>
                <li><a style="color: rgb(109, 109, 109);" href="#">HOME</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">FORUM</a></li>
                <li><a href="#">GALLERY</a></li>
                <li><a href="#">CONTACTS</a></li>
            </ul>
        </div>
        <form class="fields">
            <input type="text" name="username" placeholder="Username" />
            <input type="password" name="password" placeholder="Password" />
            <input type="submit" value="Login" />
            <div class="small_links">
                <a href="#">Forgot password?</a>
                <a href="#">Come on, sign up!</a>
            </div>
        </form>
        
    </div>
    <div class="wrapper">
        <section>
            <article>
                <header>
                    <h1><a href="#">Lorem ipsum</a></h1>
                </header>
                
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    
                    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
                    takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
                    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
                    dolor sit amet.</p>
                    
                    <a href="#" class="more">Read more »</a>

            </article>
            
            
            <article>
                <header>
                    <h1><a href="#">Some random picture</a></h1>
                </header>
                
                    <div class="wrap-image">
                        <img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/267534_10150175822712255_172774152254_6000657_5021105_n.jpg" alt="*" />
                    </div>
                    
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    
                    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
                    takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
                    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
                    dolor sit amet.</p>

                    <a href="#" class="more">Read more »</a>

            </article>
            
            <article>
                <header>
                    <h1><a href="#">Sexy Supra mk3</a></h1>
                </header>
                
                    <div class="image">
                        <img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/390407_10150570915041079_55370306078_10585510_1103718656_n.jpg" alt="*" />
                    </div>
                    
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
                    takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
                    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
                    dolor sit amet.</p>

                    <a href="#" class="more">Read more »</a>

            </article>
        </section>
        
        <aside>
            <div class="box">
                <div class="title">Box title</div>
                <div class="content">
                    Box content goes here
                </div>
            </div>
        </aside>
    </div>
</body>
</html>

CSS

body {
    margin: 0px;
    padding: 0px;
    background-color: rgb(29, 40, 55);
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    color: #ffffff;
}

.wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 20px;
}

.wrapper section {
    width: 700px;
    float: left;
}

.wrapper article {
    border-bottom: 1px solid #242424;
}

.wrapper article header, .wrapper article header h1 {
    margin: 0px;
    padding: 0px;
    text-align: left;
}


.wrapper article .wrap-image {
    float: left;
    padding-right: 20px;
    /*width: 450px;  697 */
    height: 300px; /* 465 */
    margin-top: 10px;
    margin-bottom: 10px;
}

.wrapper article .image {
    width: 690px; /* 450 */
    height: 460px; /* 300 */
    margin-top: 10px;
    margin-bottom: -20px;
}

.wrapper article .wrap-image img, .wrapper article .image img { 
    max-width:100%;
    max-height:100%;
    padding: 5px;
    background-color: #fff;
    border-radius: 3px;
}

.wrapper article header a {
    margin: 0px;
    color: rgb(109, 109, 109);
}

.wrapper article a.more {
    display: block;
    width: 104px;
    margin-bottom: 10px;
    font-size: 12px;
    background-color: black;
    color: white;
    text-decoration: none;
}

.wrapper article a.more:hover {
    background-color: #CC2121;
}

.wrapper article p {
    text-align: left;
    font-size: 13px;
}

aside {
    width: 260px;
    float: right;
    font-size: 15px;
}

aside .box {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}
aside .box .title {
    padding: 5px;
    background-color: rgb(109, 109, 109);
    border: 1px solid rgb(109, 109, 109);
    border-radius: 5px 5px 0px 0px;
}

aside .box .content {
    border-left: 1px solid rgb(109, 109, 109);
    border-right: 1px solid rgb(109, 109, 109);
    border-bottom: 1px solid rgb(109, 109, 109);
    border-radius: 0px 0px 5px 5px;
}

.topbar {
    width: 100%;
    height: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #263347;
    border-bottom: 1px solid #242424;
}

.topbar .nav {
    float: left;
    margin-left: 200px;
}

.topbar .nav ul {
    display: block;
    margin-top: 3px;
}

.topbar .nav ul li {
    list-style-type: none;
    display: inline;
    padding: 5px;
}

.topbar .nav ul li .marked a {
    color: rgb(109, 109, 109);
}

.topbar .nav ul li a {
    text-decoration: none;
    color: #CC2121;
    font-weight: bold;
}

.topbar .project_name {
    position: absolute;
    background-color: #1D2837;
    padding: 3px;    
    color: #CC2121;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    margin-left: 20px;
    border: 1px solid black;
    -o-transform: rotate(-3deg);
    border-radius: 3px;
}

.topbar .fields {
    float: right;
    margin-top: 3px;
    margin-right: 20px;
}

.topbar .fields .small_links {
    font-size: 10px;
    margin-left: 120px;
}

.topbar .fields .small_links a {
    text-decoration: none;
    color: #6D6D6D;
}

.topbar .fields input {
    background-color: #371F1D;
    border: 1px solid black;
    color: rgb(109, 109, 109);
}

AyKay47 · January 29, 2012

you are setting pre-defined widths for your images, so of course the text will wrap around the given width.

Julius · January 29, 2012

So how can I fix this? I'm pretty new to all this stuff, a few weeks only. I want images to be resized, and their maximum size would be 450x300 px. How can i do that?

AyKay47 · January 29, 2012

the simplest solution that I can think of would be to constrain only the height of the image, leaving the width alone. the width might not be the exact max-width that you want, but if these images are hard coded, it will be close.

Julius · January 29, 2012

So, if I understood you correctly, I did this:

.wrapper article .wrap-image {
    float: left;
    padding-right: 20px;
    /*max-width: 450px; */
    max-height: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
}

I left everything else like it was. Now the image is not being resized: it's printed in 100% of it's size

AyKay47 · January 29, 2012

link me to your site and i'll fix this in seconds.

Julius · January 29, 2012

Link: http://pussymagnet.eu/magnet/ http://pussymagnet.eu/magnet/style.css

AyKay47 · January 29, 2012

.wrapper article .wrap-image img, .wrapper article .image img {
max-height: 300px;
padding: 5px;
background-color: white;
border-radius: 3px;
}

P.S. good website name.

Julius · January 29, 2012

It works okay now with both pictures (shown in first post). But because of float: left; I have to use <div style="clear: both; overflow: hidden;"></div>, otherwise link "Read more" gets attached to resized photo bottom. Is there some way to avoid that div and write it in css in some element? Otherwise I will have to check for an image in the article and add the div.

Don't get the website name wrong

Pussy Magnet is British slang for something which attracts women. Often used in context of a car.

AyKay47 · January 29, 2012

<div style="clear: both; overflow: hidden;"></div>

this is one of the ways to handle float:s

Don't get the website name wrong

Pussy Magnet is British slang for something which attracts women. Often used in context of a car.

i think its hilarious.

Julius · January 29, 2012

So you wanna say I will have to add that div each time i'll add picture to blog post and theres no easier way to make this more automatic? I mean, I will display posts from database, so I'll have to use some sort of filtering in php, that looks for image?

BTW: thank you for your help

AyKay47 · January 29, 2012

to answer this question i would need to see the code that handles the insertion of this data into the webpage. So if you want this answered as well, you should create another thread.

Julius · January 29, 2012

Ok, then other question: that div gives me some more blank space then elsewhere, is it okay if I'll remove it with margin-top: -20px; ? I somehow think, that negative margin in most cases is bad practice

Sign In

Wrapping text around image

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information