Noob needs some CSS help

WebDivvy

New Member
I am new to this web design stuff so take it easy on me. :)
I have 2 problems. (well 1 query + 1 problem)
I have a web page with a container div of a fixed width.
In this I have another container div and in this I have some elements that make up the top part of the page.

No1.
Firstly I want the logo to overlap by a certain amount from its container div on to the page background, so I have absolutely positioned and given a negative value on the Y axis that pushes it out of the boundary of it's parent div

This seems to work but I am not sure if this is good practice to do it this way?

No2.
I have a div named searchbox element inside the second 'top' container div, and I have positioned this using margins to get it to sit where I want it to, but for some reason both in IE7 and FireFox the margin-right seems to get ignored as the box extends out beyond its containing div element.

Any help, tips would be appreciated as I have wasted hours trying to figure out what appears to be a very simple problem.

Thanks

#container
{
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;
margin-top:50px;
}

#topcontainer
{
width:100%;
height:800px;
position:relative;
background-image:url('TopContainerBckGrdnt.png');
background-repeat:repeat-x;
}


#logo
{
width:430px;
height:154px;
position:absolute;
left:20px;
top:-25px;
background-image:url('LearnVyooLogo.png');
background-repeat:no-repeat;
z-index:1000;

}

#searchbox
{
width:100%;
height:200px;
margin-top:135px;
margin-right:20px;
margin-left:20px;
float:left;
background-image:url(SearchBoxGradient.png);
background-repeat:repeat-x;
}
 

RAJO

New Member
No1.
Firstly I want the logo to overlap by a certain amount from its container div on to the page background, so I have absolutely positioned and given a negative value on the Y axis that pushes it out of the boundary of it's parent div

This seems to work but I am not sure if this is good practice to do it this way?


it's okay to do so as long it fit into your design

No2.
I have a div named searchbox element inside the second 'top' container div, and I have positioned this using margins to get it to sit where I want it to, but for some reason both in IE7 and FireFox the margin-right seems to get ignored as the box extends out beyond its containing div element.

Any help, tips would be appreciated as I have wasted hours trying to figure out what appears to be a very simple problem.

i have to see the site to say what is wrong
 
Top