Css trick to conjoin divs.

Question

Is there a way we could conjoin three divs together?

Hello
<div class="mainContainer">
    <div class="LeftDiv"></div>
    <div class="CenterDiv">
        <input id="txtTest" type="text"/>
    </div>
    <div class="RightDiv"></div>
</div>
World!

what we need here is to present the code this way:

Hello<*LeftDiv*><*CenterDiv with the textbox*><*RightDiv*>World

I tried to use float:left on LeftDiv, CenterDiv and RightDiv but the css also affects the mainContainer. I also need to set the LeftDiv's and RightDiv's height and width on the css but I just can't do it without the float.

Thanks in advance.

Edit: Added question - when LeftDiv, CenterDiv and RightDiv are floated-left, why is mainContainer affected? i just want to have the three inner divs conjoined without affecting the parent div's behavior...

Answer 1

You could float all the child divs of "mainContainer" left like below, then you can set height and width requirements as you please.

#mainContainer > div
{
    float:left;
}
#LeftDiv
{
    height:100px;
    width:100px;
    background-color:red;
}
#RightDiv
{
    height:100px;
    width:100px;
    background-color:green;
}

Hmm, and if your left and right containers are only meant for a background image, you might consider just making it one image and applying it to mainContainer,

#mainContainer
{
    background-image:url(theimage.jpg);
    padding-left:100px; /*The amount of the image to the left */
    padding-right:100px; /* the amount of the image to the right. */
}

Answer 2

you can use display inline-block, that way there will be no "linebreak" before divs

div.mainContainer, div.mainContainer div
{
  display:-moz-inline-stack; /* for gecko */
  display: inline-block;
}

try goog-inline-block class defined in goog/demos/css/common.css of closure library - supposedly covers all major browsers

Answer 3

divs with display: inline-block dont work as expected. But spans do.

Hello
<span class="mainContainer">
    <span class="LeftDiv"></span><span class="CenterDiv">
        <input id="txtTest" type="text"/>
    </span><span class="RightDiv"></span>
</span>
World!

And the spans should also not have a space between them because most browsers would render them with a white space in between... =)

(Answered for future reference)