SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: How DIVs work

  1. #1
    SitePoint Enthusiast Dabrowski's Avatar
    Join Date
    Apr 2006
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How DIVs work

    I'm trying to acheive the basic layout of FIGURE 1, but I'm wondering if adding the extra div in FIGURE 2 is necessary.


  2. #2
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Los Angeles, CA
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope .... its not.

  3. #3
    SitePoint Enthusiast Dabrowski's Avatar
    Join Date
    Apr 2006
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't think so. I'm experimenting with the positioning to see how it will work. I guess, isn't that the primary reason divs are taking over tabled layout? To avoide extra nesting and code?

  4. #4
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Los Angeles, CA
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that is true ... you can use Div1 as a container, Div2 just set the width, Div3 float to the right and set width, then DIV4 clear both.

  5. #5
    SitePoint Enthusiast Dabrowski's Avatar
    Join Date
    Apr 2006
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    clear both? I'll have to look into that. It was overlapping and I didn't know how to fix it.

  6. #6
    SitePoint Enthusiast Dabrowski's Avatar
    Join Date
    Apr 2006
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I'm not getting this just right.

    <div id="div1">

    <div id="div2" style="width: 200px"></div>

    <div id="div3" style="width: 500px; float: right"></div>

    <div id="div4" style="clear: both"></div>

    </div>

    Is that a good start?

  7. #7
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Los Angeles, CA
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that should work fine. with div4 though you can just do clear:right instead of both, since by your image div3 is longer ... I just do both in case the content in div2 is for some reason longer than div3.

    you might want to put a width on div1 ... 700px perhaps to keep the layout together. Otherwise div3 will float way to the right on a large resolution.


Bookmarks

Posting Permissions

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