Witam mój problem polega na tym, że potrzebuję uzyskać taki efekt

kod css wygląda następująca

[XML] pobierz, plaintext 
#left{
float:left; width: 700px; background: #bbb; clear: both; position:static; 
}
#right{
float:right; width: 300px; background: #ddd;
}
#topka{
float:left;
}
[XML] pobierz, plaintext 

potrzebuję przyciąć te dwa czarne paski na górze i dole przy pomocy css "clip" kod wtedy wygląda następująco

[XML] pobierz, plaintext 
#left{
float:left; width: 700px; background: #bbb; clear: both;  
}
#right{
float:right; width: 300px; background: #ddd;
}
#topka{
position:absolute; 
clip:rect(46px,480px,314px,0px);
}
[XML] pobierz, plaintext 

i w tym momencie pojawia się mój problem obrazek ładnie się kadruje tylko znajduje sie poza divem

Jak rozwiązać ten problem? Jeśli nie wiesz o co mi chodzi to pisz opiszę sytuację bardziej szczegółowo. Z góry dzięki za pomoc!

nie mogę usunąć position:absolute; bo wtedy nie bedzie kadrować mi obrazka

Zamiast korzystać z clip, ustaw odpowiednią wysokość i szerokość diva i dodaj overflow:hidden

zrobiłem tak jak mówiłeś działa tylko jak zrobić, aby np: od góry przycinało 40px bo chcę się pozbyć tego czarnego paska na górze

margines ujemny