Image inline with CSS

Hi Guys,

can someone help me out with this, basically i am trying to display an image inline with some text but it seems to take on the padding on the div :nono: so it overlaps the div,

here is what it is looking like right now

here is my css


#latestnews {
	clear: both;
	float:left;
	width: 300px;
	height:15px;
	border: 1px #fff solid;
	padding: 7px;
	margin-top: 5px;
}



#latestnews h1 {
	font-size: 16px;
	display: inline;
	margin-right: 5px;
}

#latestnews img {
	float: right;
}

here is my html

<div id="latestnews"><img src="images/news.jpg" border="0" /><h1>Latest News</h1> Supplied by: </div>

I might do this,

#latestnews {
clear: both;
float:left;
width: 300px;
height:15px;
border: 1px #fff solid;
padding: 7px; <!-- Remove padding here –>
margin-top: 5px;
}

#latestnews h1 {
font-size: 16px;
display: inline;
margin-right: 5px;
padding: 7px; <!-- Add a padding here –>
}

Could you put it back the way it is? Or at least create a dummy page? It’s probably something relatively simple (and you shouldn’t have to add markup to fix it probably ;))

blah i just ended up putting the image in a seperate div in the end…too much of a headache :stuck_out_tongue:

Well, the overlapping will still be the issues as the height is mentioned 15px. Have a check on mozilla also.

Addition you can have the h1 to floated to the left which will resolve the issue.

#latestnews h1 {
font-size: 16px;
display: inline;
margin-right: 5px;
float:left;
}

However, it would be great to mention the browser name/version to make it bit easier.

ah, now I got your point. However your image is inline with the text.

Overlaps with div as the div height is mentioned 15px and might be the image height is more than 15px.

Try with this,

#latestnews {
clear: both;
float:left;
width: 300px;
height: auto; <– height is set to auto –>
border: 1px #fff solid;
padding: 7px;
margin-top: 5px;
}

that just gets rid of the padding around the text too

do i just have to use a seperate div for the img? :nono:

hi, this makes it not overlap the div but what i want to do is make the text and the image centered vertically in the grey box, but the image takes on the padding of the text so it is not allowing me to center the image vertically?

You could have the padding on the h1 instead. However you are mixing an h1 with loose text with a float.

<div>
<h1>Latest news <span>supplied by: </span></h1><img src=“foo” height=“” width=“” alt=“the company”></div>

#latestnews {
clear: both;
float:left;
width: 314px; /when you had 7px padding on the sides, it made the total outer width 314px;/
margin-top: 5px;
border: 1px solid #fff;
}

#latestnews h1 {
float: left;
margin: 7px 5px 7px 7px;
font-size: 1em;
}
h1 span {
font-size: .7em;
font-weight: normal;
}

#latestnews img {
float: right;
set width;
margin: 7px 7px 7px 0;
}

since margin’s not supposed to collapse on floats, it should look the same… IE has other ideas but if it does then for the h1 you could use padding instead since it’s invisible here.

Another possibility, semantically, is
<div>
<h1>Latest news <span>supplied by: </span><img src=“foo” height=“” width=“” alt=“the company”></h1>
</div>
depending on what that’s saying.