Box around image and text

HTML & CSS
1

Hello

I have an image and a piece of text that I’d like to draw a box around.
All this already sits inside a box (bootstrap well class)
Problem is, if I wrap a div around the image and text then apply a border, it offsets against the well border.
How can I apply it to my image and text?

Thanks

2

Hello, Collierd. Welcome to the forums.

You will have to show us the code that you are working with so we can be of help.

A link to your site with and a description that leads us to the troublesome area would be good.

3

Instead of CSS border try outline which does not increase the div size.

1 Like
4

HI

Thanks for responding.
I’ve attached a stripped down version as this is in development

So, I’d like an header and a sub-header
Then, under that an image (linked) and a caption for the image surrounded by a box
I can then play around with the boxes attributes e.g. grey border, margin of 10px from the image/caption

Just can’t seem to get this to work

Ah, can’t attach
Code below:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>

        <!-- BOOTSTRAP Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        
    </head>
    <body>
        <!--Make the page dynamic-->
        <div class="container-fluid">
            <div class="well">
                <div class="row">
                    <div class="col-xs-12">
                        <h1 class="text-center">Header</h1>
                        <h2 class="text-center"><em>Subheader</em></h2>
			<!-- Part I am having an issue with -->                                             
                            <img class="img-responsive center-block" src="http://bh.buscms.com//brightonbuses/uploadedfiles/css/CSSWebsite.png" alt="Picture">
                            <div class="caption text-center">Damian Caption</div>                                               
                    </div>
                </div>    
            </div>       
            <footer class="text-center">
                <p>Written and coded by Damian</p>
            </footer>  
        </div>   
    </body>
</html>

Thanks

5

Collierd,

I’m not sure what you mean by “offsets against the well class”. I think you mean that the container is no longer centered and is resting against the left edge of it’s parent container. If that’s the case, try this:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
<!-- BOOTSTRAP Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <style>
.col-xs-12 {outline:1px dashed blue;}
.borderbox {
    display:table;
    border:5px solid magenta;
    margin:0 auto;
}
    </style>
</head>
<body>
    <!--Make the page dynamic-->
    <div class="container-fluid">
        <div class="well">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="text-center">Header</h1>
                    <h2 class="text-center"><em>Subheader</em></h2>
<!-- Part I am having an issue with -->
                    <div class="borderbox">
                        <img class="img-responsive center-block" src="http://bh.buscms.com//brightonbuses/uploadedfiles/css/CSSWebsite.png" alt="Picture">
                        <div class="caption text-center">Damian Caption</div>                                               
                    </div>
                </div>
            </div>    
        </div>       
        <footer class="text-center">
            <p>Written and coded by Damian</p>
        </footer>  
    </div>   
</body>
</html>

The pixel of off-white space along the right edge of the image is part of the image.

2 Likes
6

Perfect, thanks Ronpat

I just added padding:10px; to borderbox

Damian.

1 Like
7

You’re welcome, Damien. Glad to be of service :slight_smile:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.