www.webdeveloper.com
Results 1 to 6 of 6

Thread: Multiple DIVs parallel to each other...

  1. #1
    Join Date
    May 2003
    Posts
    373

    Multiple DIVs parallel to each other...

    How can I accomplish this:

    |xxDIVxx| |xxDIVxx| |xxDIVxx|

    Trying to get multiple DIVs to remain on one row, but they always seem to "wrap" to the next line like this:

    |xxDIVxx|

    |xxDIVxx|

    |xxDIVxx|

    Thanx.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Basics:
    Code:
    <div style="width:80%;border:1px solid #000;">
        <div style="float:left; width:33.3%; background:#aaa;">one</div>
        <div style="float:left; width:33.3%; background:#bbb;">two</div>
        <div style="float:left; width:33.4%; background:#ccc;">three</div>
        <div style="clear:both;"></div>
    </div>

  3. #3
    Join Date
    Feb 2004
    Posts
    310
    This is one advantage tables have over divs. Trying to create a "row" out of divs is one hell of a pain in the ass. Another method is to use display: inline and float that way as well. Or just use absolute positioning at the same top and shift left the divs width (total if more than one div).

    Is it possible to have inline divs using relative positioning? So that the next div will align itself horizontally to its neighbor despite it's width? This would also allow the divs to remain in flow.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Once you make a div inline it essentially becomes a span so the property width has no effect.

    Have a look at these boxes

  5. #5
    Join Date
    Feb 2004
    Posts
    178
    it really depends on exactly what u want to accomplish because some ways of getting boxes beside each other change the flow of the page. Most often, folks want the boxes to affect the flow, and when u float them you take them out of the flow. That's the issue, basically. Floats make it easy to line stuff up but then they're out of the flow, which stinks more often than not.

    If you want interdependent boxes side by side, just stop yanking your hair out and use a table. CSS is awesome but counterproductive for certain situations like this. There are countless hairless people who've taken a stab at the perfect solution to this...

    I'm not saying don't try to figure it out, of course, just FYI that it's so far not been solved to have to content areas side by side act like 2 table TDs, at least that I know of. I posted almost this same question here last week.

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles