Question

I’m wanting to get an image overflowing a div, whilst not distrupting flow of text.

You can see it live at http://songbundle.org*

Example image above. Currently the text and form move right and lose their centering due to the image.

My current code below:

HTML:

<div class="box">
    <div id="boxarrow"></div>
    <p>text goes here</p>
</div>

CSS:

.box {
    margin:60px auto 0 auto; 
    width:240px; 
    border:solid 1px #7889BC; 
    background-color: #AEB8D7; 
    text-align:center;
}
#boxarrow {
    background:url(image/arrow.png); 
    width:77px; 
    height:81px; 
    display:block; 
    margin-left:-60px; 
    float:left;
}

Your help is appreciated!

Answer 1

Hey there,

One solution you could try would be to apply position: relative; to your .box element and position: absolute; to your #boxarrow element. This will take the #boxarrow element out of the normal flow of the document, leaving other elements unaffected by its positioning.

Then, you can adjust it’s position (relative to the .box element, since we gave it position: relative;) with top, right, left, and bottom. So, your #boxarrow element might end up looking something like this:

#boxarrow {
  position: absolute;
  top: 30px;
  left: 20px;
}

Again, this is just one possible solution, but it seems as though it would work best considering your situation.

Hope this helps!