Side by Side div's without using "position:absolute" nor "float:left"?

[memphis_1220]

As per the title, is there a way to position multiple div's side by side without the use of absolute positioning or using the float property?

The reason for this is so that they can eventually be centered on an unknown page width using a containing div. "float:left" effectively takes them out of the parent div, and absolute positioning would not be possible in this case.

I have tried "float:left" with relative positioning but the second, third,... div's become relative to other elements that are already in the containing div. And the result of this causes the inner divs to form what I can only describe as a set of stairs.

Any tips or solutions would be appreciated.

 

[svet-am]

As per the title, is there a way to position multiple div's side by side without the use of absolute positioning or using the float property?

The reason for this is so that they can eventually be centered on an unknown page width using a containing div. "float:left" effectively takes them out of the parent div, and absolute positioning would not be possible in this case.

I have tried "float:left" with relative positioning but the second, third,... div's become relative to other elements that are already in the containing div. And the result of this causes the inner divs to form what I can only describe as a set of stairs.

Any tips or solutions would be appreciated.

I may be a bit too rusty on my CSS but hopefully I'm not. IIRC, the DIV block element rule states that it must fill up its parent container completely horizontally. Hence, if it is a DIV inside the main BODY tag (that is, not inside anything else), then it will fill up the browser window completely on the horizontal space. This is not a defect, but by design. If you want to make two DIVs next to each other you'll need to specify some kind of horizontal size element for them and then float at least one of them in order to make it work.

Again, this is all from my rusty memory so you'll want to verify this. But, I'm pretty sure I'm remembering this correctly.

 

[memphis_1220]

I had a feeling I may have not been completely clear.

At the moment I'm using "float:left" with the width of each set, and by using a background colour I can see where each one is. What I'd like is similar to the following:

#div1 {[INDENT]position:absolute;
left:0px;
top:0px;
width:150px;
[/INDENT]}

#div2 {[INDENT]position:absolute;
left:200px;
top:0px;
width:150px;
[/INDENT]}

#div3 {[INDENT]position:absolute;
left:400px;
top:0px;
width:150px;
[/INDENT]}

This, coupled with the HTML code would organise the divs side by side. Each of them being 150px wide with 50px spacing between each one. This is what I am after, to a point. But, I'd like to be able to center the whole lot.

Floats seem to be relative to the browsers left, and I cannot see how absolute would be able to know about the browsers width and adapt to it when its size changes, without using javascript.

 

[svet-am]

to center them, you'll just need to do margin-left: auto and margin-right: auto in the BODY tag style. That'll center everything in the body. Then, you'll need to do text-align: center in the BODY tag style for IE compatibility. Is that more of what you were trying to do?

The following is copy-pasted from http://dorward.me.uk/www/centre/

Block Level Content Block level content includes such elements as <h1>, <h2>, <p>, <table>, and <div>. To centre block level elements set their left and right margins to auto (but see IE Bugs).
<h1 style="margin-left: auto; margin-right: auto;">
My Heading
</h1> However, the default width for most block level elements is auto, which fills the available area on screen. Just being centred places it in the same position as left alignment. If you wish it to be visually centred you should set a width (or a max-width although Internet Explorer 6 and earlier do not support this, and IE 7 only supports it in standards mode).
<h1 style="margin-left: auto; margin-right: auto; width: 50%;">
My Heading
</h1>

 

[maw]

the reason you're having the stepladder effect when using float is because all the divs together are wider than their container, so it forces each one to fall below the one before them.. make sure that in addition to any defined widths, that you also add any padding, margins and even border-width to the get the actual width of each div.

 

[memphis_1220]

Fixed.

I found a similar page on the web which included info about the IE problem. I thought I had implemented it correctly but obviously not.

Thanks very much.

 

[phide]

I have tried "float:left" with relative positioning but the second, third,... div's become relative to other elements that are already in the containing div. And the result of this causes the inner divs to form what I can only describe as a set of stairs.

So, you're saying you have something like this (simplified, of course):

<body>
  <div>
    <div>$</div>
    <div>$</div>
    Content
  </div>
</body>

If so, define the content area using the body tag (this is semantically correct, but XHTML 1.0 Strict/1.1 require that only certain tags follow the body tag). The first <div> will become the container for only the divs that it contains (the divs you're floating), and you'll be able to style that in whatever manner is appropriate. So, use the margin: auto trick described below to center the containing div with your body (which is now defining your structure), float both divs left, then axe the position attribute -- it isn't required. If you want to space each cell, use margins. Move your content out of the main container div such that it lies within the body.

On the other hand, if the content of the two (or three, or whatever) divs would be more semantically appropriate in the form of an ordered or unordered list, then use them instead of non-semantic divs. In this case, you can define the ul such that it centers, then you can either float or set list items to display inline.

And, as maw said, check your specified widths to fix the stair-stepping.

EDIT: Well, never mind then, I guess.

 

[amromousa]

Sorry, but why can't you just use <span> instead of <div> and get it for free?

 

[ekliptikz]

display:inline;