CODEWITHSUNDEEP
htmlcss
Lucky500
Lucky500

Reputation: 507

Having trouble positioning text inside a box

I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.

This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/

I created a div .bottom_box and added:

   .bottom_box {
      position: relative;
      bottom: -50px;
      left: 50px;
    }

Is there an easier or more correct way to do this?

Upvotes: 2

Views: 91

Answers (5)

Marc Audet
Marc Audet

Reputation: 46785

You can achieve your layout as follows:

For this HTML:

<div class="outer_box">
    <img src="http://placehold.it/100x50">
    <div class="bottom_box">
            <h1>$25 OFF</h1>
        <p>$25 off your first cleaning!</p>
    </div>
</div>

Try the following CSS:

.outer_box {
    border: solid #6ac5ac 3px;
    display: inline-block;
    width: 250px;
    height: 200px;
    margin: 0.5em;
}
.bottom_box {
    clear: both;
    border: 1px dotted gray; /* for demo only, optional */
}
img {
    float: right;
    padding: 3px;
    margin: 0 0 1em 1em;
}
p {
    color: blue;
    margin-left: 50px;
}
h1 {
    color: red;
    margin-left: 50px;
}

Since your image is floated, simply clear the .bottom-box.

Use margin-left on the child elements to get any white space.

See sample: http://jsfiddle.net/audetwebdesign/3SjRG/

You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;

Upvotes: 2

Moritz D&#252;sseldorf
Moritz D&#252;sseldorf

Reputation: 29

There are some solutions.

An other way is to make the box relative and positioning the text and image inside absolute.

Upvotes: 1

Mr. Mayers
Mr. Mayers

Reputation: 356

Alright -

  1. Added text-align:center to your

    and elements.

  2. Set your outer_box position to relative.
  3. Set the img value to absolute and positioned with 0.25 em top and right instead of margin.

http://jsfiddle.net/mr_mayers/Nq769/2/

.outer_box {
    border: solid #6ac5ac 3px;
    display: inline-block;
    width: 250px;
    height: 200px;
    margin: .5em;
    Position: relative;
}

.bottom_box {
    position: relative;
    bottom: -50px;
}

p {
    color: blue;
    text-align: center;
}

img {
    position: absolute;
    padding: 3px;
    top: 0.25em;
    right: 0.25em;
}


h1 {
    text-align: center;
    color: red;
}

Upvotes: 2

campatsky
campatsky

Reputation: 324

I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.

This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.

Upvotes: 0

Kevin Jantzer
Kevin Jantzer

Reputation: 9451

You'd be better off using text-align:center and position: absolute

See example

Upvotes: 1

Related Questions