side-by-side divs with form that should not break
I want to have several divs with content side-by-side like
D1 D2 D3 D4 D5
D2 contains a form. Without the form it's working (using display:inline and such). There should be no line breaks in the resulting HTML as this is a page header.
How can I accomplish that?
UPDATE here's the actual code
<div id="sep">
<img alt="separator" src="underline.jpg">
<div id="block-search-0" class="block block-search">
<div class="content" style="font-size: 11.52px;">
<form id="search-block-form" method="post" accept-charset="UTF-8" action="/cms/admin/build/block">
<div>
<div class="container-inline">aaa</div>
</div>
</form>
</div>
</div>
<div id="lang">
<ul>
<li class="fr first active"><a class="language-link active" href="/cms/admin/build/block">Français</a></li>
<li class="en last active"><a class="language-link active" href="/cms/en/admin/build/block">English</a></li>
</ul>
</div>
<div id="block-text_resize">
<a id="text_resize_decrease" class="changer" href="javascript:;"><img alt="-" src="aSmall.gif"></a>
<a id="text_resize_in开发者_开发问答crease" class="changer" href="javascript:;"><img alt="+" src="aBig.gif"></a>
</div>
<div class="block-region">bla</div>
</div>
Note that line breaks as shown here may not be the same as in the actual code. Some of the breaks here were added for clarity.
I´m not sure what happens when you put a block element (form) inside an inline element (display:inline).
You could leave the div's as block elements and float them like for example:
#sep > div {
float: left;
}
Officially you would have to give the floated elements a width as well, but I don´t know if that´s really necessary and if that´s possible in your situation.
<div id="sep">
<div class="floated_container"></div>
<div class="floated_container">
<form></form>
</div>
<div class="floated_container"></div>
<div class="floated_container"></div>
</div>
#sep {overflow:hidden;}
.floated_container {float:left;}
Make sure your nested containers don't exceed total #sep width else the floats will wrap.
Make sure the form width fits in the div that you a putting it in? Use the firebug inspector to check it.
精彩评论