Simple CSS layout problem

**johnsmith153** · Sep 24, 2012 10:52

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

http://page-test.co.uk/img.html

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.

**ayonkhan** · Sep 24, 2012 11:41

This should work.

HTML Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        
        <title>Title</title>
        
        <style type="text/css">
            .box {
                border: 1px solid #F00;
            }
            
            .box a div.google-image {
                width: 273px;
                height: 178px;
                background: url(http://cdni.wired.co.uk/273x178/g_j/google_273x178.jpg) no-repeat;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <p>Line # 1</p>
            
            <p>Line # 2</p>
            
            <p>Line # 3</p>
            
            <a href="http://www.google.com/" target="_blank"><div class="google-image">Go to Google</div></a>
        </div>
    </body>
</html>

**dresden_phoenix** · Sep 24, 2012 11:57

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.

**johnsmith153** · Sep 24, 2012 12:20

Originally Posted by dresden_phoenix

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.

User Tag List

Thread: Simple CSS layout problem

Thread Tools

Display

Simple CSS layout problem

Bookmarks

Bookmarks

Posting Permissions