I am looking to have a header image on the left side of my header and a search box on the right. I have reduced the header image to 650px, which gives me space on the right. However, when I try and position the search box (a google custom search box) it goes to the right of the screen, rather than sitting contained within the page (that is centred on the screen). I am sure this is a simple peice of code but grateful for any help.
Andrew,
Placing the code just beneath the "width_container" in your Layout.html file (located under Websites > Theme) would probably work best. It would look something like this:
<div class="width_container">
<div class="topright">
<gcse:search></gcse:search>
</div>
To edit the alignment, you can make the following edits to the CSS you've added on the layout.html page:
Change this:
<style type="text/css">
/*this is what we want the div to look like*/
div.topright{
display:block;
/*set the div in the top right corner*/
position:relative;
top:50;
right:-100px;
width:300px;
/*give it some background and border*/
background:#eee;
}
</style>
To this:
<style type="text/css">
/*this is what we want the div to look like*/
div.topright{
display:block;
/*set the div in the top right corner*/
position:relative;
width:300px;
float: right;
/*give it some background and border*/
background:#eee;
}
</style>
Showing 1 reaction
Sign in with