Problem aligning divs

[james]

I want a div to enclose two other divs, one to the left hand side, and one to the extreme right.

I've tried doing it with css float, but it doesn't work.

I've attached a file to show how it should work.

The first example uses float, but the containing div defaults to the minimum height possible, as if it doesn't contain the divs.

The second is basic, and just shows div's default behaviour.

The third shows what I am trying to achieve, but done with tables.


Note: It doesn't matter how wide the divs become, as long as their contents is to the extreme left and right of the containing div.

[glyakk]

I was not able to open your file but this code will produce what you want(provided I understand what you want)

CSS

.container {
  position: relative;
  width: 100%; /*change to whatever value you want*/
  height: 50px; /*change to whatever value you want*/
  background: #00f; /*adding color*/
}
.left {
  position: absolute;
  left: 0%;
  display: inline;
  width: 50px; /*change to whatever value you want*/
  height: 50px; /*change to whatever value you want*/
  background: #f00; /*adding color*/
}
.right {
  position: absolute;
  right: 0%;
  display: inline;
  width: 50px; /*change to whatever value you want*/
  height: 50px; /*change to whatever value you want*/
  background: #0f0; /*adding color*/
}

Markup

<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>

What you want to notice is the use of relative and absolute. As well as the display properties.

Hope this answers your question.

[glyakk]

just saw what you were trying to do.. try this css instead:

.container {
  position: relative;
  width: 100%; /*expand to width of container*/
  height: 50px; /*change to whatever value you want*/
  background: #00f; /*adds color*/
}
.left {
  position: absolute;
  left: 0%; /* 'glues' the left of the div to the container*/
  width: 50%; /*keeps div half the total width of container*/
  display: inline; /*allows you to put divs side by side*/
  height: 50px; /*change to whatever value you want*/
  background: #f00; /*adds color*/
}
.right {
  position: absolute;
  right: 0%; /* 'glues' the right of the div to the container*/
  width: 50%; /*keeps div half the total width of container*/
  display: inline; /*allows you to put divs side by side*/
  height: 50px; /*change to whatever value you want*/
  background: #0f0; /*adds color*/
}

[james]

OK, thanks Glyakk! The actual width of the sub-divs doesn't matter, i just coloured them white for clarity.