※ 그누 외 css 관련 질문이라, 이곳에 올립니다.

div 2개를 나란히 정렬시키려고 합니다.

div 1번은 이미지가 들어가고,
div 2번은 이미지나 플래시가 들어갑니다.

문제는,
div 1번이나 2번의 이미지나 플래시 모두 사용자 선택에 따라 들어가는 것이라서,
width 값이 가변적이어야 합니다.

그리고 width 값이 가변적이라 하더라도,
div 1번과 2번을 정렬시켰을 때, 기준 레이아웃에 꽉 차게 출력하려고 합니다.

<--------------- 기준 레이아웃 ----------------->
<--div 1번--><-------------- div 2번------------>

또는
<--------------- 기준 레이아웃 ----------------->
<------div 1번------><--------- div 2번--------->

와 같이 width가 가변적이어도, 기준 레이아웃에 맞추려고합니다.


현재
div 1번 css : { float:left; }
div 2번 css : { float:left: }

div 1번, div 2번 모두 float:left 시켜서 나란히 정렬을 시켰습니다.

익스에서는 저렇게 설정을 해도 제가 원하는 모양으로 출력이 되는데,

다른 브라우저에서는 일그러집니다.

(웹표준을 따르지 않았으니 당연하게도) 기준 레이아웃 넓이보다 벗어나거나 작게 나옵니다.
width 값이 가변적이기 때문이겠지요.


<익스가 아닌 불여우나 오페라 등에서의 현상>
<--------------- 기준 레이아웃 ----------------->

<------div 1번------>

<-------------------- div 2번------------------->

또는
<--------------- 기준 레이아웃 ----------------->
<------div 1번------><--- div 2번--->


위와 같은 경우, css 설정을 어떻게 해 주어야 할까요?
이틀 전부터 고민하는 문제가 아직까지 해결되지 않네요.

고수님들은 어떻게 해결하시는지 궁금합니다.

※ 텍스트만 들어가는 경우는, 아래와 같이 설정해도 가능한 것 같습니다.

    그러나, 문제는 이미지나 플래시 등을 쓸 때에는 적용되지 않는군요.

<div style="width:레이아웃의 기준폭">
<div style="float:left; background:red"> 1번 내용 </div> 
<div style="width:100%; background:blue"> 2번 내용 </div> 

</div>

---> "멀미안녕"님이 주신 답변