SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The natural flow of <div>'s?

    I am struggling to learn CSS, and in my experiements I was trying see the flow of divs without positioning. The following code does things that I was not expecting.

    For instance, the "left" div extends ALL the way across the screen, even when I have defined the width at 100px.

    Also I don't even SEE the "top" div on the page, so I assume that it is hiding behind the "left" div.

    Can anyone shed some light on this?

    Thanks!
    PHP Code:
    <html>
      <
    head>
        <
    style>
          
    div {
            
    border1px solid blue;
          }
          
    div.top {
            
    width:  100%;
            
    height30px;
          }
          
    div.left {
            
    width:  100px;
            
    height200px;
          }
          
    div.second {
            
    width:  100%;
            
    height30px;
          }
        </
    style>
      </
    head>
      <
    body>
        <
    div class="top>
          Top test
        </div>
        <div class="
    left">
          Left Text
        </div>
        <div class="
    second">
          next down
        </div>
      </body>
    </html> 
    John

  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    <html>
      <head>
        <style>
          div {
            border: 1px solid blue;
          }
          div.top {
            width:  100%;
            height: 30px;
            position:relative;
          }
          div.left {
            width:  100px;
            height: 200px;
            position: relative;
            top:      30px;
            float:left;
          }
          div.second {
            width:  100%;
            height: 30px;
            float:right;
          }
        </style>
      </head>
      <body>
        <div class="top>
          Top test
        </div>
        <div class="left">
          Left Text
        </div>
        <div class="second">
          next down
        </div>
      </body>
    </html>
    Aaron Brazell
    Technosailor



  3. #3
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope. Same effect, as I noted in the first post.
    John

  4. #4
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, ok, I see that now. It might be worth creating a master div that goes around everything. I'd have to play with it some more. Redux or one of those guys should be coming along soon and will likely get to this before I can...
    Aaron Brazell
    Technosailor



  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    <html>
      <head>
        <style>
          div {
            border: 1px solid blue;
          }
          div.top {
            width:  100%;
            height: 30px;
          }
          div.left {
            width:  100px;
            height: 200px;
          }
          div.second {
            width:  100%;
            height: 30px;
          }
        </style>
      </head>
      <body>
        <div class="top">
          Top test
        </div>
        <div class="left">
          Left Text
        </div>
        <div class="second">
          next down
        </div>
      </body>
    </html>
    You have an unclosed quote in your <div class="top"> I fixed that. If you want the <div class="second"> to take up the white space left over by <div class="left">, then use the "float: left;" property on <div class="second">.

    Edit:

    Also, a <div>'s width is 100% by default. Adding that into your stylesheet, while reinforcing the default rules, is not necessary and may mess you up when you want to add padding and margins.

    Edit:

    Edit 2: This is what my file does in Mozilla Firebird:
    Attached Images Attached Images

  6. #6
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm... thanks! I was thinking that the <div class="second"> would be positioned right below the <div class="top"> and butt up against the left edge of <div class="left">.

    What would I need to change to do that?
    John

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If you want <div class="second"> to go after <div class="top">, but before <div class="left">, then just move that <div> code between <div class="top"> and <div class="left">.

  8. #8
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    vgarcia, I sure appreciate your time.

    I've been playing with the code and came up with this.
    PHP Code:
    <html>
      <
    head>
        <
    style>
          
    body {
            
    margin10;
            
    padding0;
          }
          
    div {
            
    border1px solid blue;
          }
          
    #container {
            
    positionabsolute;
            
    width:    100%;
            
    top:      10px;
            
    left:     10px;
            
    margin:   5px;
          }
          
    div.top {
            
    width:  100%;
            
    height30px;
          }
          
    div.left {
            
    width:  100px;
            
    height200px;
          }
          
    div.second {
            
    height30px;
            
    top:    30px;
            
    left:   100px;
            
    width:  100%;
            
    positionabsolute;
          }
        </
    style>
      </
    head>
      <
    body>
        <
    div id="container">
          <
    div class="top">
            
    Top div
          
    </div>
          <
    div class="left">
            
    Left div
          
    </div>
          <
    div class="second">
            
    Second div
          
    </div>
        </
    div>
      </
    body>
    </
    html
    It has only one hitch, though. And that is that the <div class="second"> extends well beyond the <div id="container">.

    I was under the impression that a width of 100% would only go to the full width of the containing <div>.

    I'll try your suggestion from the above post and see what effect it has.

    Thanks!
    John

  9. #9
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your suggestion on post #7 does not produce the effect I wanted. My explaination was most likely lacking. If you try the code I posted above, you'll see what I am trying to do.

    Thanks.
    John

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Ah, I now see what you mean! See if this code works:
    Code:
    <html>  
    <head>  
    <style>  
    div { border: 1px solid blue; } 
    div.top { width: 100%; height: 30px; } 
    div.left { width: 100px; float: left; height: 200px; clear: none;} 
    div.second { float: left; clear: both;} 
    </style>  
    </head>  
    <body>  
    <div class="top">  Top test </div>  
    <div class="left">  Left Text </div>  
    <div class="second">  next down </div>  
    </body> 
    </html>
    Also, if you are going by the CSS box model standards, it may be a good idea to place a Validating DOCTYPE declaration on your page, so you don't throw browsers into quirks mode (which may be some of your problem).

  11. #11
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Closer, but that <div class="second">'s top border needs to butt up against the bottom of the <div class="top">'s border, and against the right border of <div class="left">'s border and extend all the way across the page to the far right border of the <div class="top">

    In the code above (post #8), the format is right, but the length of the <div class="second"> extends BEYOND the containing div and off the screen...

    How would you go about solving that?
    John

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by PHP John
    Closer, but that <div class="second">'s top border needs to butt up against the bottom of the <div class="top">'s border, and against the right border of <div class="left">'s border and extend all the way across the page to the far right border of the <div class="top">

    In the code above (post #8), the format is right, but the length of the <div class="second"> extends BEYOND the containing div and off the screen...

    How would you go about solving that?
    Once you put the valid DOCTYPE in place that should work itself out. Just pick a standard (I recommend XHTML 1.0 Transitional for beginners, but go for strict if you're a masochist) and place the DOCTYPE declaration on your page (and the required attributes on the HTML element), and your <div> should expand. I'm pretty sure that what you're seeing is a quirks-mode thing.

  13. #13
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I forgot to mention that I added the "doc type", but that "second" div is still extending beyond the containing div.
    John

  14. #14
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
    <
    html>
      <
    head>
        <
    style>
          
    body {
            
    margin10;
            
    padding0;
          }
          
    div {
            
    border1px solid blue;
          }
          
    #container {
            
    positionabsolute;
            
    width:    100%;
            
    top:      10px;
            
    left:     10px;
            
    margin:   5px;
          }
          
    div.top {
            
    width:  100%;
            
    height30px;
          }
          
    div.left {
            
    width:  100px;
            
    height200px;
          }
          
    div.second {
            
    height30px;
            
    top:    31px;
            
    left:   101px;
            
    width:  100%;
            
    positionabsolute;
          }
        </
    style>
      </
    head>
      <
    body>
        <
    div id="container">
          <
    div class="top">
            
    Top div
          
    </div>
          <
    div class="left">
            
    Left div
          
    </div>
          <
    div class="second">
            
    Second div
          
    </div>
        </
    div>
      </
    body>
    </
    html
    John

  15. #15
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Is this more along the lines of what you're looking for?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <style type="text/css">  
    div { 
    border: 1px solid blue; 
    } 
    .top { 
    height: 30px; 
    } 
    .left { 
    width: 100px; 
    float: left; 
    height: 200px;
    background-color: white;
    } 
    .second { 
     
    } 
    </style>  
    </head>  
    <body>  
    
    <div class="top">  <p>Top test</p> </div>  
     
    <div class="second"> 
    <div class="left">  Left Text </div> 
     <p>next down this content is here to fill the page this content is here to fill the page this content is here to fill the page this 
    
    content is here to fill the page this content is here to fill the page this content is here to fill the page </p></div>  
    
    </body> 
    </html>
    NOTE: I know the borders are messed up a bit. Are those required for you, or were you just bordering your content to see where everything was?

  16. #16
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will actually be wanting those borders. And was hoping for a look like this (see attachment when it comes up) However, the <div class="second"> extends 100px beyond it's containing <div> (<div id="container">).

    This effect is undesirable, and I was wondering if there was a way of specifying the "second" div to only expand to the border of the "container" div.
    John

  17. #17
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Got it figured out!
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <style type="text/css">  
    body {
    	margin: 0px;
    	padding: 0px;
    }
    div { 
    border: 1px solid blue; 
    } 
    .top { 
    height: 30px; 
    } 
    .left { 
    position: absolute;
    top: 31px;
    left: 0px;
    width: 100px; 
    height: 200px;
    background-color: white;
    } 
    .second { 
      margin-left: 101px;
      padding: 11px;
    
    } 
    </style>  
    </head>  
    <body>  
    
    <div class="top">  <p>Top test</p> </div>  
    
    <div class="left">  Left Text </div> 
    <div class="second"> 
     <p>next down this content is here to fill the page this content is 
    here to fill the page this content is here to fill the page this content 
    is here to fill the page this content is here to fill the 
    page this content is here to fill the page </p>
     </div>  
    
    </body> 
    </html>
    Thanks to BlueRobot for the fix.

  18. #18
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Thanks for the response!

    From a quick glance it appears that the margin-left, and the padding where the only things changed.

    Very cool. That figures out one thing. The other thing that I am still working on is the "container" div that is supposed to border ALL of the other divs.

    Does the "left" div extend past the "container" div vertically, because the "left" div is positioned "absolutely"?
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]"
    >
    <
    html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">
      <
    head>
        <
    style type="text/css">
          
    body {
           
    margin0px;
           
    padding0px;
          }
          
    div {
          
    border1px solid blue;
          }
          .
    top {
          
    height30px;
          }
          .
    left {
          
    positionabsolute;
          
    top31px;
          
    left0px;
          
    width100px;
          
    height200px;
          
    background-colorwhite;
          }
          .
    second {
            
    margin-left101px;
            
    padding11px;
          }
          
    #container {
            
    positionabsolute;
            
    width:    100%;
            
    top:      10px;
            
    left:     10px;
            
    margin:   5px;
          }
        </
    style>
      </
    head>
      <
    body>
        <
    div id="container">
          <
    div class="top"><p>Top test</p></div>
          <
    div class="left"><p>Left Text</p></div>
          <
    div class="second">
           <
    p>next down this content is here to fill the page this content is
          here to fill the page this content is here to fill the page this content
          is here to fill the page this content is here to fill the
          page this content is here to fill the page 
    </p>
           </
    div>
        </
    div>
      </
    body>
    </
    html
    John

  19. #19
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by PHP John
    Does the "left" div extend past the "container" div vertically, because the "left" div is positioned "absolutely"?
    Yes and no. It's removed from the document's normal flow because of the absolute positioning, but if your "left" div was short enough it would fit in the container*.

    Edit:

    * From a purely visual standpoint of course. The code would probably tell a different story

  20. #20
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PHP John
    Code:
    	  #container {
    		position: absolute;
    		width:	100%;
    		top:	  10px;
    		left:	 10px;
    		margin:   5px;
    	  }
    I was under the impression that a width of 100% would only go to the full width of the containing <div>.
    Just because I'm the sort of person who uses Strict...

    width: 100% is (though not in IE5) the width of the content area of the div. The total width therfore equals margin-left (5px) + margin-right (5px) + width (100% of the width of the body tag) and the fact that it has a left (10px) too = 100% + 10px + 10px, so you should get a scroll bar letting you scroll an extra 20 pixels

    Douglas

    (BTW, the default width is auto not 100%)
    Hello World


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
  •