Web Analytics Made Easy -
StatCounter Problem with one div under another - CodingForum

Announcement

Collapse
No announcement yet.

Problem with one div under another

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problem with one div under another

    Hi All,

    I am struggling to figure out how to pick this problem, when I resize my web browser or use a lower resolution one of my divs goes under the other one.

    Here is a link to my site: sugar.commitech.co.uk/test

    If anyone has any other suggestions on making it better that would be great! This is the first website I've done.

    Thanks alot,

    Sam

  • #2
    Which div goes under which. when i viewed the page everything looked fine. when i go to a smaller resolution the three images on the right go behind the left image. Other than that i see no problems.

    Im on FF3
    Generic signature comment!

    Comment


    • #3
      Hello samtaylor159,
      First of all, good job on the (mostly) valid code. The only error found by the validator (see the links in my sig) is the p tags surrounding your ul.

      Your dropdown menu works well in FF3, it's functional (links work) in IE8 and IE7 but the hover doesn't show.

      As to your problem, tell us exactly what div is dropping instead of making us guess. Also, telling us what browser your seeing the problem in is a big help.

      Are you trying to keep headerr.png from dropping? Is the absolute positioned .right supposed to slide behind .wrap?
      Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
      Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

      Comment


      • #4
        Sorry guys, its the right div going under the wrap div. I am not sure what to do to stop this? I did have the width of the wrap div to be a % but this meant I could not have the image of the keyboard as I did not have a set size.

        Any ideas?

        Sam

        Comment


        • #5
          Also I'm am going to change the right div z-index, which means I will be able to put links on the images.

          This means the right div now goes on top of the wrap div.

          Just in case this changes anything.

          Sam

          Comment


          • #6
            Originally posted by samtaylor159 View Post
            Sorry guys, its the right div going under the wrap div. I am not sure what to do to stop this? I did have the width of the wrap div to be a % but this meant I could not have the image of the keyboard as I did not have a set size.

            Any ideas?

            Sam
            First have a look at this to see why it's doing that - pitfalls of absolute positioning

            Then, to fix it, you can float both .right and .wrap:
            a. wrap both floated divs in one container so they are always side by side
            b. float them but leave out the containing div, the .right would drop below .wrap when the screen got too narrow for both to be side by side.


            Try it without the container like this -
            only .wrap and .right change
            Code:
            	
            div.wrap {
            		width: 800px;
            float: left;
            margin: 20px 0 50px  40px;
            		background:#000;
            
            }
            div.right{
            		width:250px;
            float: right;
            		margin: 50px 0 0 10px;
            		
            }
            markup would need to be re-arranged like this
            Code:
            	</div>
            	</li>
            </ul>
            
            </div>
            
            
            <div class="wrap">
            <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b><b class="r4"></b></b> 
            <div class="content">
            <img class="conpic" src="images/keyboard.png" alt="CommiTech" height="275" width="788">
            
            <br>
            <br>
            <h1>
              CommiTech - 'Commited to Technology'
            </h1>
            <p>
            CommiTech are a new company, that work in and around the Yeovil area in Somerset.
            </p>
            <p>
            We specialize in custom build computers however we have a range of services and products to offer!
            </p>
            <p>
            We are very good at what we do and have very extremely competitive prices.
            </p>
            <h2>
            Our Philosophy
            </h2>
            <p>
            We believe that everyone is different and has different demands, this means that all of our products can be specified to meet your demands and built with <strong>YOU</strong> in mind.
            </p>
            <p>
            This gives you:
            </p><ul>
            <li>
            Better Value
            </li>
            <li>
            Better Service
            </li>
            <li>
            Better Products
            </li>
            </ul>
            
            </div>
            <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b> 
            </div>
             
            <div class="footer">
            <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b><b class="r4"></b></b>
            <p>
            <a href="index.html">Home</a>
            <a href="services.html">Services</a>
            <a href="hardware.html">Hardware</a>
            <a href="aboutus.html">About</a>
            <a href="contactus.html">Contact Us</a>
            </p>
            <p>
             © Copyright CommiTech 2009
            </p>
            <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
            </div>
             [COLOR="Red"]
            <div class="right">
            <img class="right" src="images/tutoring.png" alt="CommiTech" height="200" width="250">
            <img class="right" src="images/help.png" alt="CommiTech" height="200" width="250">
            <img class="right" src="images/multimedia.png" alt="CommiTech" height="200" width="250">
            </div>[/COLOR]
            Last edited by Excavator; Apr 8, 2009, 06:33 PM.
            Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
            Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

            Comment


            • #7
              I have tried what you suggested, it has worked to a partially.

              But now when I resize the window, the .right moves below the .wrap on the page, therefore the user has to scroll down.

              Also if you look at this page: sugar.commitech.co.uk/test/repair.html, the footer overlaps the .wrap.

              Can someone help? Getting abit lost with it now.

              Sam

              Comment


              • #8
                Hello Sam.

                Really good design there. The browser is re-arranging things, so they can all fit into the width of your viewscreen, which typifies the flexibility of CSS. But you don't want it to do this, so try putting in a min-width attribute into the body. Start with, say =800px and raise or lower it, until you can stretch and squeeze the browser window, without the divs losing their right hand position and slipping under the wrapper.

                I hope this works for you.

                Regards,

                Doctor V
                Last edited by Doctor_Varney; Apr 9, 2009, 10:05 AM.
                Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

                Comment


                • #9
                  Originally posted by samtaylor159 View Post
                  I have tried what you suggested, it has worked to a partially.

                  But now when I resize the window, the .right moves below the .wrap on the page, therefore the user has to scroll down.

                  Also if you look at this page: sugar.commitech.co.uk/test/repair.html, the footer overlaps the .wrap.

                  Can someone help? Getting abit lost with it now.

                  Sam
                  Yes. I showed you option b. If you want it all to stay side by side, use option a.
                  When you do, the narrower resolutions will get a horizontal scroll bar at the point your .right is dropping now.
                  Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
                  Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                  Comment


                  • #10
                    Here is option b -



                    the CSS that changed
                    Code:
                    body {
                    	background: #fc6;
                    }
                    * {
                    margin: 0;
                    padding: 0;
                    border: none;
                    }
                    #container {
                    width: 1120px;
                    margin: 0 auto;
                    overflow: auto;
                    background: #ccc;
                    }
                    div.wrap {
                           
                    		width: 800px;
                    		float: left;
                    		margin: 20px 0 50px;
                    		background:#000;
                    
                    }
                    div.header {
                    	background:url(images/header.png) repeat-x;
                    	height:160px;
                    	border-bottom:1px solid #000;
                    	margin-top:-10px;
                    }
                    div.right{
                    		width:250px;
                    		float: right;
                    		margin: 50px 0;
                    		
                    }
                    div.footer{
                    	width:650px;
                    	height:95px;
                    margin: 0 auto;
                    clear: both;
                    	background:#8ac362;
                    	text-align:center;
                    }
                    img.logo {
                    	float:left;
                    	margin-left:40px;
                    	margin-top:10px;
                    }
                    img.right{
                    	
                    	position:relative;
                    	margin-bottom:0px;
                    	border:none;
                    }
                    add the bits in red to your markup
                    Code:
                    [COLOR="Red"]<div id="container">[/COLOR]
                    <div class="header">
                    <img class="logo" src="images/logo.png" alt="CommiTech" height="150" width="173">
                    <div class="headerl">
                    </div>
                    
                    <ul id="dropdown">
                    	<li><a href="index.html">Home</a>
                    	</li>
                    	<li><a href="services.html" onmouseover="mopen('m2')" onmouseout="mclosetime()">Services</a>
                    		<div style="visibility: hidden;" id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                    		<a href="repair.html">General Repair/Callout</a>
                    		<a href="network.html">Network Installation</a>
                    		<a href="pcinstall.html">PC Installation</a>
                    		<a href="entertainment.html">Home Entertainment Setup</a>
                            <a href="webdesign.html">Website Design</a>
                            <a href="tutoring.html">Computer Tutoring</a>
                            
                    	  </div>
                    	</li>
                    	<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Products</a>
                    		<div style="visibility: hidden;" id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                    		<a href="office.html">Office/Home Computer</a>
                            <a href="workstation.html">Workstations</a>
                    		<a href="multimedia.html">Multimedia Computer</a>
                            <a href="mini.html">Mini Computer</a>
                    		</div>
                    	</li>
                    	<li><a href="aboutus.html">About Us</a>
                    	</li>
                    	<li><a href="contactus.html" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
                    		<div style="visibility: hidden;" id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                    		<a href="mailto:[email protected]">E-mail</a>
                    		<a href="enquiry.html">Submit Enquiry Form</a>
                    		</div>
                    	</li>
                    </ul>
                    
                    </div>
                    
                    
                    
                    
                    <div class="wrap">
                    <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b><b class="r4"></b></b> 
                    <div class="content"><img class="conpic" src="images/keyboard.png" height="275" width="788"><br>
                    <br>
                    <h1>
                      CommiTech - 'Commited to Technology'
                    </h1>
                    <p>
                    CommiTech are a new company, that work in and around the Yeovil area.
                    </p>
                    <p>
                    We specialize in custom built computers however we have a range of services and products to offer!
                    </p>
                    <p>
                    We are very good at what we do and have very extremely competitive prices.
                    </p>
                    <h2>
                    Our Philosophy
                    </h2>
                    <p>
                    We believe that everyone is different and has different demands, this means that all of our products can be specified to meet your demands and built with <strong>YOU</strong> in mind.
                    </p>
                    <p>
                    This gives you:
                    </p><ul>
                    <li>
                    Better Value
                    </li>
                    <li>
                    Better Service
                    </li>
                    <li>
                    Better Products
                    </li>
                    </ul>
                    </div>
                    <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b> 
                    </div>
                     <div class="right">
                    <a href="multimedia.html"><img class="right" src="images/multimedia.png" height="200" width="250"></a>
                    <a href="tutoring.html"><img class="right" src="images/tutoring.png" height="200" width="250"></a>
                    <a href="repair.html"><img src="images/help.png" class="right" height="200" width="250"></a>
                    </div>
                    <div class="footer">
                    <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b><b class="r4"></b></b>
                    <p>
                    <a href="index.html">Home</a>
                    <a href="services.html">Services</a>
                    <a href="hardware.html">Hardware</a>
                    <a href="aboutus.html">About</a>
                    <a href="contactus.html">Contact Us</a>
                    </p>
                    <p>
                     © Copyright CommiTech 2009
                    </p>
                    <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
                    </div>
                    [COLOR="Red"]<!--end container--></div> [/COLOR]
                    This will get a horizontal scrollbar at 1120px width. If you want to narrow that up, you should work on your .header first.
                    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
                    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                    Comment


                    • #11
                      Min width worked great for me, and registered to this forum just to say thanks to Dr. Varney!!!

                      Originally posted by Doctor_Varney View Post
                      Hello Sam.

                      Really good design there. The browser is re-arranging things, so they can all fit into the width of your viewscreen, which typifies the flexibility of CSS. But you don't want it to do this, so try putting in a min-width attribute into the body. Start with, say =800px and raise or lower it, until you can stretch and squeeze the browser window, without the divs losing their right hand position and slipping under the wrapper.

                      I hope this works for you.

                      Regards,

                      Doctor V
                      Learn how to improve your website. Get a Web Usability and Design Analysis

                      Comment

                      Working...
                      X