[the_mole001]

hey guys,

I am working on a site for a club im currently with and i want to build a news section with all the news articles and a search box next to it for easy searching ability. The code i have produced works fine in internet explorer, that is that the news article and search box both sit at the top of the page and sit next to one another, but when i view the page in mozilla firefox the searchbox pushes the news article under it and i loose the effect i am after. I was wondering if anyone knew what i had to change so that the page looked the same in both ie and firefox? Any help you could provide would be very much appreciated. Peter

Code:

<style type='text/css'>
.mnews { width: 600px; }
.news { float: left; }
.snews { float: right; width: 154px; padding: 0px; border: 2px solid #000000; }
.stitle { background-color: #339933; text-align: center; color: #ffffff; font-weight: bold; }
.sbody { padding: 2px; }
.content { padding: 5px, 0px, 8px, 10px; }
.narticle { border: 2px solid #ff3300; font-family: verdana; }
.ntitle { background-color: #ffcc00; padding: 3px; font-weight: bold; }
.nposted { padding: 2px; font-size: 12px; background-color: #ffcc00; }
.nattatch { padding: 2px; font-size: 12px;  background-color: #ffffaa; }
.nbody { padding: 4px; }
</style>
<div class='mnews'>
	<div class='snews'>
		<div class='stitle'>Search News</div>
		<div class='sbody'>Enter Keyword:<br><input type='text'><br><input type='submit' value='Search'></div>
	</div>
	<div class='news'>
		<div class='narticle'>
			<div class='ntitle'>The title of the news</div>
			<div class='nposted'>Posted by the poster on the ddth of mm yyyy at hh:mm A</div>
			<div class='nattatch'>Attatchments: None</div>
			<div class='nbody'>The message body for which i can put in any types of news</div>
		</div>
	</div>
</div>

[karlcore]

How about an URL?
Looking at the code you supplied is not enough.

[the_mole001]

http://belmonts.u32.mcpx.biz/newsmain.html

[Richard]

I think the padding of the div's is forcing the .news down a row. I would suggest setting the width of .news to something like 500, and then adding 154 (the width of .snews), and then to fit with the padding, add another 10. Something like...

Code:

.mnews { width: 664px; }
.news { float: left; width: 500px; }

Should work ok

[the_mole001]

thanks richard! your idea worked a treat. i was just trying to see if i could get it to do it automatically as i dont know what all users screen resolutions will be so i wanted them to get a fullpage effect no matter what the res, but it till looks good if i condence it a little. thanks for the help.

[Richard]

Originally Posted by the_mole001

thanks richard! your idea worked a treat. i was just trying to see if i could get it to do it automatically as i dont know what all users screen resolutions will be so i wanted them to get a fullpage effect no matter what the res, but it till looks good if i condence it a little. thanks for the help.

Nps. If you want it to fit no matter what the width of the screen/resolution is, you could always try percentages

Code:

.mnews { width: 100%; }
.news { width: 60%; float: left; }
.snews { float: right; width: 40%; padding: 0px; border: 2px solid #000000; }