ansaurus

Question

Answer 1

A:

Try making the image and the div float:left; You WILL need to provide a width for each to make this work.

#starOfMonth
{
background: #ffff99;
float: left;
width: 275px;
height: 300px;
text-align: center;
font-family:"sans-serif";
white-space: normal;
}

#starOfMonthImage {
height:275px; /*Optional, but it's a good idea to supply height for images so that the browser doesn't shift things around during the loading process*/
width:475px; /*OR SOMETHING!  Make it narrower if it isn't working, I haven't been super careful about reading your padding in depth so this may be wrong.*/
float:left;
}

Then you can write:

<div id="newsMainBody">
   <img src="img/farm.jpg" alt="Farm photo" id="starOfMonthImage" />
   <div id="starOfMonth">
      <br />
      <font style="font-weight:bold;font-size:medium; color:Purple;">DooLittle Farms Childcare</font><br />
      <font style="font-size:small;">"We're Growing Great Kids"</font><br />
      <img id="starImg" src="img/gold-star.jpg" alt="Star of the Week" width="200" height="200"/><br />
      Our Star Of The Week!
    </div>
 </div>

M2tM 2010-10-01 23:58:15

This was the first correct solution posted. :/

M2tM 2010-10-02 00:18:32

Answer 2

A:

On the assumption you're referring to the one with the alt-text of Farm photo:

div#newsMainBody > img {
/*        display: block; commented out as per @M2tM's comment, below */
    float: left;
    width: 200px;
}
#starOfMonth {
    margin-left: 200px; /* or 'width of floated image' + 'a margin of 10px' 
}                       /* or whatever, just so they're not physically touching */

Should achieve this, but I'm unsure why you've got a floating <br /> inside the #starOfMonth div. That might be a problem.

Live demo, over at jsbin (obviously the images don't load (given the src isn't pointing at anything, but it should give you a feel for what my approach does.)

David Thomas 2010-10-01 23:59:16

That is just to bring the text down one line for better formatting. I will give this a try

Matthew Cox 2010-10-02 00:03:40

First: you need to specify a width or it won't float properly. Second: The floating <br/> inside the div will not affect the way it lays out next to the image, it will add a break inside the div. Third: display:block; is unnecessary as float:left; will override this. In fact, IE6 sometimes requires display:inline; to be applied to floating elements with a margin in order to fix the IE float bug.

M2tM 2010-10-02 00:05:59

See my answer for a more correct solution.

M2tM 2010-10-02 00:06:28

@M2tM, okay. In order, then: 1. yes, I realised that. Hence the edits. 2. I never said it did, I just wondered why it was there. 3. fair enough, and thanks for taking the time to point that out.

David Thomas 2010-10-02 00:12:17

Good, I've removed my -1 vote, but again, I already had the correct solution posted before...

M2tM 2010-10-02 00:15:44

Answer 3

+1 A:

Add:


#newsMainBody img {
float: left;
}

#startOfMonth {
float: right;
}

and remove the first <br /> after <div id="starOfMonth">, it's useless (use padding-top in css instead if you need some space)

Gmoliv 2010-10-02 00:07:50

This did the trick with some minor ajustments such as additing some margin to the left and right to properly space the elements

Matthew Cox 2010-10-02 00:16:17

In addition, I didn't do it to the newMainBody elem because that would cause the entire body to float left whereas I wanted it centered. So I just wrapped the img in a new div tag and floated that instead. Thanks everyone for their input!

Matthew Cox 2010-10-02 00:17:16

ansaurus

tags:

views:

answers:

Remove a linebreak after IMG

related questions