Please Help CSS question gone crazy !

[gokeeffe]

Hi

I would really like to know the answer to the folowing question.

I have a 3 column layout as follows


#rightside{
position:absolute;
width:130px;
top:104px;
right:0px;
background-color:#FFF;
display:block;
border: 1px solid black;
}


#leftside {
position:absolute;
top:104;
left:0;
width: 9.5em;
border-right: 1px solid #000066;
border-top: 1px solid #000066;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #000033;
color: #000066;
}


#middle{
margin-top:15px;
margin-bottom:3em;
margin-left:170px;
margin-right:150px;
padding-left:2px;
padding-right:2px;
color:#333333;
}


In the middle div i have the following div which hold the main text of my homepage
this is fine I am using the margin_left, right commands for positioning

#indexboxTitle{
margin-top:17px;
margin-left:0px;
margin-right:280px;
display:block;
border:1px solid #000033;
background-color:#FFFFFF;
}


Here is the problem I have another div besides this one still within the content div
but the only way I can get the correct position for this is by using absolute positioning
as follows

#indexboxSearch{
position:absolute;
top:104px;
left:585px;
width:265px;
margin:0 auto;
background-color:#FFF;
border:1px solid #000033;
}

This is fine when the screen is maximised but on larger screens and when the browser window is
reduced the layout breaks down, due to this absolute position.


The question i have is this how can I code the indexboxsearch so that I can position it
where I want to.

To give you a better idea go to

http://www.findagrind.ie

the box with the title Search Now is the
indexboxsearch div.

I really have no idea how to do this so any response would be most welcome as I am clueless
to the resolution of this problem

thanks in advance

Graham

 

[Vragabond]

Give your #middle position: relative; (nothing will change) and then your #indexboxSearch will be positioned absolutely within the #middle container (0 values for top, bottom, left and right will be boundaries of the #middle container).

 

[gokeeffe]

Vragabond

I have tried what you said but still the indexboxsearch div is not rendereing correctly, if I view my site with a screen of 19inches then there is overlap between the divs.

Basically could you show me some sample code for aligning div's next to each other so it's a fluid layout

 

[Vragabond]

I added position: relative; to the #content element and everything fell into place. Of course, I had to reposition elements according to their new container.

 

[gokeeffe]

Ok, did you repostion with absolute or relative positioning.

Could you show me if that is possible I have been trying to find the resolution to this problem for ages

 

[Vragabond]

Why don't you do what I suggested on the page (just change the values not the positioning itself) and then let us know if you still have problems.