Dynamic Div width?

How to have a div inline with a select box?

[NooK]

I am trying to have a select (dropdown) box and a div box right next to each other (The idea is that when the user changes the selection on the dropdown menu the content on the div changes).

My problem is that the dropdown box can be different widths due to contect but I cant get the div to change it's size so that it still stays next to the dropdown box.

Here is the css for the div

.hardInfoBox
{
FLOAT: right;
CLEAR: left;
OVERFLOW: auto;
HEIGHT: 110px;
POSITION:relative;
border: medium rgb(0,0,0) dotted
}
.hardInfoBox .hardInfoBoxHeader 
{
 MARGIN-TOP: 10px;
 font-size: 13;
 font-weight: bold;
 text-align: center;
 HEIGHT: 20px
}
.hardInfoBox .hardInfoBoxContent
{
 MARGIN-TOP: 8px;
 MARGIN-LEFT: 4px;
}
.blocker
{
 PADDING-TOP: 4px;
 PADDING-BOTTOM: 4px;
 DISPLAY: block
}
.formBlock
{
 PADDING-TOP: 10px;
 PADDING-LEFT: 6px;
 PADDING-BOTTOM: 10px;
 WIDTH: 100%;/*600px;*/
 BACKGROUND: #eae0cd
}

Here is the html code

<DIV class=formBlock>
<LABEL for="labeldrop" class=blocker>LabelforDropDown</LABEL>
<DIV class=hardInfoBox>
<DIV class=hardInfoBoxHeader></DIV>
<DIV class=hardInfoBoxContent></DIV>
</DIV>
<SELECT name="menu" id=dropMenu>
<OPTION value=default selected>Choose an option</OPTION>
<OPTION value=subcateg>An option</OPTION>
</SELECT>
</DIV>

**Notice the div has 2 divs inside (One for header and another for data info)

Now my problem is that I use the css template for different pages thus the dropdown menu can be different sizes and I'd like that the notebox (the div) changed it's size so that it stays inline with the menu, right next to it but if I dont have a width property on the inside div it always fills up 100% of the width of the block and the dropdown menu appears above it. If I do set a width (Like 60% or so) the box stays at a fixed size defeating the whole point (Although they stay inline to each other as intended).

Is there a way to do this with css and html or do I really have to use javascript or some other language to calculate and resize the div (Which wouldnt be so hard but I'd prefer that css took care of it by itslef)?

I have tried setting the div to inline but that didnt do the job.

Best Regards

NooK

[edited by: NooK at 1:26 pm (utc) on Aug. 8, 2007]

[Fotiman]

Instead of floating the div, what if you float the select element to the left (without specifying a width)?

[NooK]

Thanks. That did the job indeed. Which brings me to another point:

Is there any way to fix the size f the select field but when you click (So that the menu opens) the selection box with all the data is big enough to show all text?

Best Regards

NooK

[Fotiman]

Not with CSS alone. You'd need to use JavaScript for that. Something along the lines of when the page loads:
1. Get the width of the select and store it
2. Shrink the width
3. Attach an onfocus(?) event handler that changes the size to the original size
4. Attach an onblur event handler that changes the size back to the shrunken size?

Just a guess.