Simple CSS layout problem

I’m guessing this is simple, but not for me.

The red box needs to wrap around everything.

I need to do the image like this (if possible).

I can’t find anything on Google, or even know what I would search for.

This should work. :slight_smile:

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8" />
        <style type="text/css">
            .box {
                border: 1px solid #F00;
            .box a {
                width: 273px;
                height: 178px;
                background: url( no-repeat;
        <div class="box">
            <p>Line # 1</p>
            <p>Line # 2</p>
            <p>Line # 3</p>
            <a href="" target="_blank"><div class="google-image">Go to Google</div></a>

Actually, the problem is that anchor tags are INLINE ELEMENTS and as such CANNOT have height /width by default.
simply add display:block; to .google-image {} and you will be fine.

That did it.

Thanks both for the input.