1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: dreamweaver bug? or simple div problem? (version II)

Discussion in 'Web Design & Development' started by Gesp, Apr 5, 2010.

Thread Status:
Not open for further replies.
Advertisement
  1. Gesp

    Gesp Account Closed Thread Starter

    Joined:
    Nov 29, 2008
    Messages:
    270
    Hi there again

    As a second version of a previous thread of mine asking for some help on a div mistery, I now found another damn ghost on my web page`s CSS code.

    This time the problem is one of the most annoying issues you could find on an html/CSS page`s code.

    I`ve got a master div and in it I`ve got other small divs.
    But as I select the master div I notice some of the bottom small divs are out of the bounding div.

    The height of this div is set to "auto" and the width is a fixed number of pixels, but the small divs are small enough to fit in this master div, so it should keep them already in, as I wanted.

    The problem then originated is that the other divs I insert under this master div consider all "outbounded" divs as individual objects and changes the whole coding strategy.

    What could be the source of this problem?
    Any suggestions?

    Thanks in advance
     
  2. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Can you post a screenshot of what you're seeing?

    Peace...
     
  3. Gesp

    Gesp Account Closed Thread Starter

    Joined:
    Nov 29, 2008
    Messages:
    270
    [​IMG]

    The red line is the master div, the green boxes the small divs and the blue line is to show in case that I add a new master div iqual to the first what happens.

    On the right is what I see wile previewing the whole page on the browser.
    On the left is shown what I see while editing the code.

    The problem here is: once I`ve got two different master divs, the code shoudl prevent them from mixing up, but it doesn`t.

    Why?
     

    Attached Files:

  4. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Thanks for the screenshot. Are you applying a "float" to the DIVs on the right? If so, that could be why you're seeing the behavior you are. The elements with a "float" applied are removed from the "normal flow", such that the height of the containing element might not be what you expect.

    I suggest reading the CSS2.1 spec on "Normal flow and the subsequent section on "Floats".

    Here is a HTML test case you can use for experimentation:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>Floats</title>
    <style type="text/css">
    #outer {
      border-style: solid;
      width: 800px;
      height: auto;
      margin-right: auto;
      margin-left: auto;
      position: relative;
    }
    .box {
      border-style: dotted;
      border-color: red;
      width: 100px;
      height: 100px;
      position: relative;
    }
    #inner-right {
      float: right;
    }
    
    </style>
    </head>
    <body>
    <div id="outer">
    <div class="box">inner left</div>
    <div id="inner-right" class="box">inner right</div>
    </div>
    </body>
    </html>
    
    Peace...
     
  5. Gesp

    Gesp Account Closed Thread Starter

    Joined:
    Nov 29, 2008
    Messages:
    270
    Yes I understood that, but look at this.

    The top image shows what it displays if I select the master div (blue box) and the lower image on the green box shows me what I want and what I have it coded to do.

    This is the problem

    [​IMG]
     

    Attached Files:

  6. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    I'm not seeing any differences other than the blue and green borders.

    What is the difference between the two? Also, is the "read more" box floated right?

    Peace...
     
  7. Gesp

    Gesp Account Closed Thread Starter

    Joined:
    Nov 29, 2008
    Messages:
    270
    No, i`ve removed it and floated it left like the other divs.

    The blue box excludes one div thats bellow it and the green box includes it.
     
  8. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    So, does the screenshot above show the "Read more" box floated right or floated left? Also, the second set of screenshots don't match the behavior shown in the first set of screenshots.

    In the second set of screenshots, the blue border is BELOW the "Read more" box, which tells me the "Read more" box is where you wanted it to be.

    Could you post the HTML for the first set of screenshots you posted above?

    Peace...
     
  9. Gesp

    Gesp Account Closed Thread Starter

    Joined:
    Nov 29, 2008
    Messages:
    270
    Yes, I forgot to say, thats just right now. Forget the Read more box, its all right now.

    My problem is with the preview of the master div box.
    I mean, It can jam something else further more in the web site and I want it to be as it is on the green box (all in the master div). But instead it is now as in the blue box (somethings in a somethings out)
     
  10. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Ok, without seeing any HTML (hint hint :)) the only thing I can suggest is to put a DIV at the very bottom of the "master" DIV with a "clear" attribute, like this:

    Code:
    [b][color=red]<div style="clear: both;"></div>[/color][/b]
    </div> <!-- End of "master" DIV -->
    
    That should force the "master" DIV to be the full height of all of its contents. Just be sure to add any new stuff BEFORE that special DIV.

    Seeing the HTML would help but I'm glad you posted screenshots, at least. :)

    Peace...
     
  11. Gesp

    Gesp Account Closed Thread Starter

    Joined:
    Nov 29, 2008
    Messages:
    270
    Ok, so heres the html/CSS:

    The box were talking about is the post_individual
    By the way, even though my height on post_tab is set to 100% it stops at some point without covering the whole 100%, why?


    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body{margin:0 auto; padding:0 auto; background:#95e2fd repeat-x top}
    
    div#master{margin:0 auto; padding:0 auto; width:1024px; height:100%}
    
    div#header{width:1024px; height:224px; background:#900}
    div#menu_wrap{width:1024px; height:70px}
    div#closer1{width:25px; height:70px; float:left; background:#933}
    div#closer2{width:25px; height:70px; float:left; background:#933}
    div#master_menu{width:974px; height:45px; margin-top:13px; background:#960; float:left}
    div#logo_wrap{width:1024px; height:110px}
    div#logo{width:232px; height:94px; margin:4px 0px 0px 35px; float:left}
    
    div#fast_links1{width:1024px; height:44px}
    div#master_content{width:1024px; height:100%}
    
    div#post_tab{width:620px; height:100%; background:#FC0}
    div#postTop{width:620px; height:10px; background:#F60}
    
    div#post_individual{width:620px; height:auto; background:#6CF}
    div#post_header{width:620px; height:143px}
    div#date{width:90px; height:33px; margin-top:10px; padding:12px 0px 0px 10px; float:left; background:#F99}
    div#title{width:495px; height:auto; float:left; margin-top:10px; padding:8px 0px 0px 0px}
    div#post_info{width:553px; height:45px; margin:10px 0px 0px 42px; float:left; background:#966}
    div#post_author{width:auto; height:15px; padding:6px; float:left}
    div#post_category{width:auto; height:15px; padding:6px; margin-right:30px; float:right}
    div#post_coment_number{width:auto; height:15px; padding:6px; float:right}
    
    div#post_subject{width:556px; height:auto; padding:6px 24px 0px 40px}
    div#post_image{width:555px; height:176px; background:#656565; margin-bottom:10px; float:left}
    div#readmore{width:72px; height:auto; padding:6px; background:#CCC; float:left; margin:15px 0px 0px 510px}
    div#readmore:hover{text-decoration:underline; cursor:pointer}
    div#endline_wrap{width:598px; height:8px; padding-left:22px; float:left}
    div#endline{width:593px; height:7px; border-bottom:dotted 1px #B3B3B3}
    
    /* Text */
    .button_text{font-size:16px; font-family:Arial, Helvetica, sans-serif; color:#C2ECFF; text-shadow:#143E60 1px 1px 1px}
    .button_text:hover{color:#FFF}
    
    .global_text{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#4D4D4D}
    .global_textbutton{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#4D4D4D}
    .global_textbutton:hover{color:#C1C1C1}
    
    .date_text{font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#FFF}
    .title_text{font-family:Arial, Helvetica, sans-serif; font-size:30px; color:#143E60}
    .post_info_text{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#FFF}
    </style>
    </head>
    
    <body>
    <div id="master">
    
    <div id="header">
        <div id="menu_wrap">        
            <div id="closer1"></div>
            <div id="master_menu"></div>
            <div id="closer2"></div>
        </div>
        <div id="logo_wrap">
          <div id="logo"></div>
        </div>
        <div id="fast_links1"></div>
    </div>
    <div id="master_content">
        <div id="post_tab">
            <div id="postTop"></div>
            <div id="post_individual">
                <div id="post_header">
                    <div id="date" class="date_text"></div>
                    <div id="title" class="title_text"></div>
                    <div id="post_info" class="post_info_text">
                        <div id="post_author"></div>
                        <div id="post_coment_number"></div>
                        <div id="post_category"></div>
                    </div>
                </div>
                <div id="post_subject" class="global_text">
                    <div id="post_image"></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue risus sit amet enim egestas eu malesuada elit euismod. Nam consectetur eros tempor enim luctus quis semper nulla rutrum.<br /><br />
     Donec luctus posuere eros eu bibendum. Proin dignissim nisl in eros volutpat at eleifend magna ornare. Pellentesque semper mattis eros, feugiat dapibus lacus sollicitudin eu. Duis accumsan metus ut nisi ultrices a posuere mauris imperdiet. Phasellus vehicula vulputate diam, ac iaculis ante dictum et. Morbi ut eros lectus, ut rhoncus magna.
                </div>
                <div id="readmore" class="post_info_text">Read more</div>
                <div id="endline_wrap"><div id="endline"></div></div>
            </div>
        </div>
    </div>
    
    </div>
    </body>
    </html>
    
     
  12. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Did you actually read the links above about "Normal flow" and "Floats"?

    Thanks for posting it. It appears my comment about adding the DIV above the end of the "master" DIV addresses the issue but we'll explore it in detail.

    Ok, I've attached two screenshots. One is of your "raw" HTML with a border applied to the "post_individual" DIV. You will see how the "Read more" box is outside of that DIV. This is why:

    Inside the "post_individual" DIV are the following DIVs:
    • post_header
    • post_subject
    • readmore
    • endline_wrap

    The "readmore" and "endline_wrap" DIVs have floats applied where the other two do not. As I stated above, elements with a float applied are removed from the normal flow of the content. Logically, you can think of this as being like those elements aren't there when the elements without a float applied are rendered. In your specific case, the page is rendering as if the "post_individual" DIV contained ONLY the "post_header" and "post_subject" DIVs. This is correct behavior, per the CSS spec (which is why I posted the link to it above).

    The second screenshot I posted shows the "post_individual" DIV now including the "readmore" and "endline_wrap" DIVs in its height. How did I do this? By adding the DIV I mentioned above, with a "clear" attribute set. The "Floats" section at the page I posted the link to above discusses the "clear" attribute so I highly suggest you read the "Normal flow" and "Floats" sections, including the "clear" attribute discussion.

    It could be one of two things:
    • You might need to specify an actual height to one of the parent elements of "post_tab" if not adding a height of 100% to the "body" element.
    • Since the "post_individual" DIV didn't have the appropriate height, it made the "post_tab" DIV appear to not have the appropriate height too.

    I believe DreamWeaver is working just fine. Based on this and the other thread, you need to take some time and learn more about CSS to better understand some of the behavior you're seeing.

    Peace...
     

    Attached Files:

  13. Gesp

    Gesp Account Closed Thread Starter

    Joined:
    Nov 29, 2008
    Messages:
    270
    its set.

    it solved the question (the clear atributes).

    But now, imagine that I have all those divs and I wanted a gradient repeat-x on the top and one on the bottom bellow every thing, how could I do it?

    I try to attach two background images at the same time and obviously doesn`t work.
     
  14. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Cool. Now, do you understand why it worked? Can you explain it to me?

    I have a very vivid imagination but not quite that vivid. :)

    Can you post a screenshot of what you tried (even though it failed) to get an idea of where you want the gradient?

    Peace...
     
  15. Gesp

    Gesp Account Closed Thread Starter

    Joined:
    Nov 29, 2008
    Messages:
    270
    I understanded, but I don`t think I can explain it very well, but here goes:
    All of the coding is read by the browser as a vertical segment (for example). So inserting float attributes on an element, even though it is defined, in the code, as an internal part of a certain object, is "floats" and skips the standard segment that the browser follows on the code comprehension.
    So, what we`ve got to do is place a clear attribute so it "clears" the code reading from skipping (floating) to a side or another, as if it maked the browser forget it was skipping, but still applying the defined attribute.

    Hmm, not a very good explanation, but I think its on the point.



    Well, pardon me, but I thought I had it explained very simple and easy to understand.
    But perhaps I just didn`t once again.

    So what I wanted to do is something like this:

    The gradients are on the back of all of the structure and are repeating x, the top gradient is on the top and the bottom is right stick to the bottom like a footer, but are both behind or repeating on both sides as if they were.

    [​IMG]
     

    Attached Files:

  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Similar Threads - Solved dreamweaver simple
  1. Ricson
    Replies:
    2
    Views:
    641
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/914961

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice