Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 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
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote 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>
     
    <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>
    Last edited by Excavator; 04-08-2009 at 11:33 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Mar 2009
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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; 04-09-2009 at 03:05 PM.
    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.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote 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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    <div id="container">
    <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:sales@commitech.co.uk">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>
    <!--end container--></div> 
    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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New to the CF scene
    Join Date
    Jul 2009
    Location
    San Jose, CA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Min width worked great for me, and registered to this forum just to say thanks to Dr. Varney!!!

    Quote 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


  •  

    Posting Permissions

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