Div positioning

Question

Hi people, So, i have some block, and this block must contains two divs, first div must be at left(attached to block), second at right(attached to block), and this two divs must coverage all block size.

Answer 1

Would something like this do what you want?

<div id="container">
    <div id="leftside" style="width:100px; float:left">
        Left Side
    </div>
    <div id="rightside" style="margin-left: 100px;">
        Right Side
    </div>
</div>

You may need to tweak the margin-left depending on the padding (and widths obviously). This is an easy way to get the two column approach (even if the two columns is a small box) :)

Or in the interests of separating the HTML and CSS, the same code represented again in two parts :) :

HTML

<div id="container">
    <div id="leftside"></div>
    <div id="rightside"></div>
</div>

CSS

#container:
{
    /* insert any requires styles here :) */
}
#leftside:
{
    width: 100px;
    float: left;
}
#rightside:
{
    margin-left: 100px;
}

Answer 2

Try this:

<div id="container">
  <div id="left">
    Some Content
  </div>

  <div id="right">
    Some Content
  </div>
</div>

CSS:

<style type="text/css">
#container
{
  width:500px;
  height:500px;
  position:relative;
}

#left
{
  width:250px;
  height:250px;
  position:absolute;
  float:left;
}

#right
{
  width:250px;
  height:250px;
  position:absolute;
  float:right;
}
</style>

Answer 3

You would do it like this.

<div id="block">
    <div id="left"></div>
    <div id="right"></div>
</div>

The css would be

#block {
    width:800px;
    display:block //not sure if this line is required or not
}
#left {
    width:400px;
    float:left;
}
#right {
    width:400px;
    float:left;
}

Answer 4

<div id="block" style="width:800px">
   <div id="left" style="float:left;width:50%;"> left </div>
   <div id="right" style="float:right;width:50%;"> right</div>
</div>

Both divs have a width half of the parent's div.

But you have to be careful with borders as the width defines the width of the content (i.e. without borders). So if you use borders, the right box will be shown below the left, but still on the right side.

Answer 5

There are many ways this could be done.... here's one:

<div style="position: relative; width: 100%; ">
    <div style="position: absolute; left: 0; width: 50%; ">
        <p>Content</p>
    </div>
    <div style="position: absolute; right: 0; width: 50%; ">
        <p>Content</p>
    </div>
</div>

Answer 6

Adjust margin and width and you're done.

<div id="main">
    <div id="left" style="float:left">
         Content Left
    </div>
    <div id="right" style="float:right">
         Content Right
    </div>
</div>