Problems mixing auto and fixed widths

Hi Guys,

I am currently having an issue where I am trying to make a column 'auto' width.

What I am trying to acheive is this (without the red borders, example only);



With the CSS code below;

.searchImage	{width:182px;
		height:auto;
		float:left;}

.searchDesc	{width:350px;
		height:auto;
		float:left;}

.searchExtra	{width:182px;
		height:auto;
		float:right;}

Code (markup):

If I leave the code as width:350px everything looks ok until the browser window is resized (smaller) and then .searchExtra jumps to the next space below (as expected).

So, I want the text to gracefully resize and keep everything more or less as displayed above.

If I set the .searchDesc width to auto, then .searchExtra gets pushed below automatically and the text takes up the whole right side of the frame.

Any Ideas how I can modify my code to display items as the pic above and have the text area resize only?

Thanks in advance

 

Is this too hard?

 

You have two choices. Make a large container div for all elements and set constraints on the elements, or use position: and right: to anchor the right most element where it is.

 

Hi ntomsheck,

I tried postition:absolute and right:0px , which gives a slightly closer result to what I want. But, the text in the center block still wont resize. Now the right side block will move over the top of the text.

Any ideas would be awesome.