Hey guys, so I've started designing my first home page, it's nothing special but I really just want to get to grips with all the slicing and coding using divs stuff.

 

I have come across one problem:

 

http://dtym.co.uk/

 

Basically, I want the rectangle which is all the way down the bottom on the right, next to the skinnier one above.

 

I have tried using float: left, but it doesn't seem to be working.

 

Weird thing is, my navigation is also made up of 3 parts, and the float:left worked fine with them, and they're all on the same level.

 

Any help guys ?

Hi,

always specify a width on a floated element otherwise it can fill the width of its container.

Give #newsbar1 a width to match it's background image and you should be ok.

Hi,

always specify a width on a floated element otherwise it can fill the width of its container.

Give #newsbar1 a width to match it's background image and you should be ok.

 

It still doesn't work

It still doesn't work

 

Hi

 

In your css remove float:left; and add margin-left:24px; in your #newsbar2

 

Then in your html replace this

<div id="newsbar1">
</div>

<div id="newsbar2">
</div>

 

with this

 

<div id="newsbar1">


<div id="newsbar2">
</div></div>

 

That should sort it in firefox I havent checked in ie though

 

Pat

Thanks Pat, it works perfect in FF