...

View Full Version : Problem with one div under another



samtaylor159
04-08-2009, 09:59 PM
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

jcdevelopment
04-08-2009, 10:07 PM
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

Excavator
04-08-2009, 11:00 PM
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?

samtaylor159
04-09-2009, 12:10 AM
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

samtaylor159
04-09-2009, 12:14 AM
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

Excavator
04-09-2009, 12:29 AM
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 (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)

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


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
</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>

samtaylor159
04-09-2009, 12:41 PM
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

Doctor_Varney
04-09-2009, 03:59 PM
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

Excavator
04-09-2009, 05:55 PM
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.

Excavator
04-09-2009, 06:14 PM
Here is option b -



the CSS that changed

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

<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.

camp185
07-21-2009, 02:08 AM
Min width worked great for me, and registered to this forum just to say thanks to Dr. Varney!!!


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum