CODEWITHSUNDEEP
csshtml
Adiost
Adiost

Reputation: 187

Image inside DIV goes beyond its borders

enter image description here

I have no idea why does this happen. The only way I could fix this is to put a load of breaks after the text, but obviously this is not an acceptable solution.

Isolated CSS:

.center_column {
    max-width: 892px;
    float: left;
}

.content {
    width: 892px;
    background-color: #FFF;
    background-image: url("style/contentpost.png");
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 2px;
    border-color: #7699bb;
    border-radius: 10px;
}

.content_wrap {
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.text {
    width: 100%;
    margin-top: 20px;
    text-align: justify;
    text-justify: distribute;
    font-weight: normal;
    font-size: 16px;
}

Isolated HTML:

<div class="center_column">
    <div class="content">
        <div class="content_wrap">
            <div class="text">
                <img src="image">Text
            </div>
        </div>
    </div>
</div>

Why does this happen? Could anybody tell me how to fix that? Thank you in advance :)

Upvotes: 2

Views: 344

Answers (6)

Max Truxa
Max Truxa

Reputation: 3478

Add a <div> that clears the floating:

<div class="center_column">
    <div class="content">
        <div class="content_wrap">
            <div class="text">
                <img src="image">Text
                <div style="clear: both;"></div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

rOcKiNg RhO
rOcKiNg RhO

Reputation: 631

You can use a fixed image width and height in CSS, or use background position and size property in CSS.

Upvotes: 1

Matvey Andreyev
Matvey Andreyev

Reputation: 1061

This will force the browser to calculate the height of a div containing float:

.text{
     overflow: hidden;
}

Also, google for clearfix, if you don't want overflow:hidden for some reason.

Upvotes: 7

Asdine
Asdine

Reputation: 3046

It's because of your

float : left;

You need to add this

<div class="clear"></div>

below your image.

And add this to your css file 

.clear { clear : both; }

Upvotes: 1

Urg Mu
Urg Mu

Reputation: 46

See you are not done with your entire layout yet. Try this layout and style..

<div class="center_column">
    <div class="content">
        <div class="content_wrap">
            <img class="pic" />
            <div class="text">TEXT</div>
        </div >
    </div>
    <div class="footer" >FOOTER</div>
</div>

Add this to your existing styles

.pic {
    float:left;
}

.footer {
    clear: both;
}

FLOAT will actually float everything after it, adding CLEAR both, left or right, will clean floating problems. In other words, ends the floating effect.

Upvotes: 1

Joan Caron
Joan Caron

Reputation: 1970

float: left; is your problem ,

add :

<div class="clear"></div>

css:

.clear {
  clear: both;
}

Upvotes: 1

Related Questions