Jump to content

Wrapping text around image


Julius
 Share

Recommended Posts

.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:

wrapworks.png

but does not work with this image

wrapbroken.png

How can I fix this?

Link to comment
Share on other sites

<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;
}

Link to comment
Share on other sites

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);
}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.
:)
Link to comment
Share on other sites

<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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.