...

View Full Version : <div> on top of <div> when resizing browser



goodoldarsenal
10-28-2010, 01:14 PM
Hi all, sorry for just jumping into this without an introduction but I have a bit of a dilemma.

I am using the <div> tag to split up content on my page, but when resizing the browser or viewing it on a smaller device, i.e the iPad, the far right <div> is coming over the top of the central <div>. Have a look at the screenshots for a better understanding of what I'm rambling on about.

I would appreciate if someone could help me as soon as possible with this :) thanks.

http://i825.photobucket.com/albums/zz180/hackmandavies/Normal.png

http://i825.photobucket.com/albums/zz180/hackmandavies/SidebarMessUp.png

goodoldarsenal
10-28-2010, 01:17 PM
Sorry, I should have resized the images.

Here's some of the code i'm using:

HTML



<CENTER><DIV id="header">
<IMG src="Images/Header.png" alt="Eco - The latest gadgets at incredible prices">
<UL id="navbar">
<LI><A href="Computing.html">Computing</A></LI>
<LI><A href="Gaming.html">Gaming</A></LI>
<LI><A href="Music.html">Music</A></LI>
<LI><A href="Photography.html">Photography</A></LI>
<LI><A href="CustomerSupport.html">Support</A></LI>
</UL>
</DIV></CENTER>
<DIV id="middlesection">
<UL id="menu">
<LI><A href="index.html">Home</A></LI>
<LI>New Products</LI>
<LI>Existing Products</LI>
<LI>Updates</LI>
<LI>Software Upgrades</LI>
</UL>
</DIV>
<DIV id="sidebar">
<IMG src="Images/LatestNewsTitle.png" alt="Latest News" align="middle">
<H3>X9 Software Update</H3>
<P>Version 5 software for the X9 tablet has just been released!
Exciting new features of this software include ability to download and run E-co
PC software natively on device, along with many bug fixes.
</DIV>
<CENTER><DIV id="content">
<IMG src="Images/Home/EcoX10Title.png" alt="Introducing the all new E-co X10">
<P>The new Eco X10 tablet allows you to do so much more, in a more environmentally friendly way!
<BR>
<A href="Computing.html">Find out more now!</A></P>
<IMG src="Images/Home/Tablet-Idea-1.png" alt="The new Eco X10 only 249 - Click to buy now!">
</DIV></CENTER>
<CENTER><DIV id="footer">
<P>Copyright 2010 E-co Technologies. All Rights Reserved</P>
<P>
<A href="terms.html">Terms of Use</A>
<A href="OurPartners.html">Our Partners</A>
</P>
</DIV></CENTER>


CSS:



#header
{
border: 0px;
padding: 0px;
width: 50em;

}

#middlesection
{
padding: 0px;
margin: 0px;
}
#menu
{
float:left;
margin: 0px 0px 0px 10px;
padding: 10px;
width: 300px;
}

#sidebar
{
float:right;
margin: 0px 0px 10px 0px;
padding: 10px;
width: 300px;
}

#content
{
border: 0px;
margin: 0px 240px 0px 250px;
padding: 0px;
}
/*#content img {width: 75%;}*/

#footer
{
padding: 10px;
margin: 10px;
clear: both;
}

#header ul
{
list-style-type: none;
list-style-image: url("Images/navbarbg.png");
}

#header li {display: inline}
#header a:hover {color: #262626}
#header a {text-decoration: none; color: black}
#header ul li a
{
text-decoration: none;
padding: 5px 20px 5px 20px;
color: black;
}

#header ul li a:hover
{
color: black;
}

teedoff
10-28-2010, 03:47 PM
How about a hint? I would bet it's because you're using pixels for widths. Try using percentages instead and see what happens.

Apostropartheid
10-28-2010, 11:41 PM
For god's sake, stop using the center element. It's been deprecated for years! :) Centering is easily achieved using CSS.

As for your issue, wrap all your content in a div and apply a minimum width.

goodoldarsenal
10-29-2010, 12:18 AM
Sorry guys, I've just restarted using HTML and CSS from scratch, because I'm on an IT course at University and I'm a bit rusty!

I'll check out your suggestions tomorrow afternoon ;) thanks a lot!

goodoldarsenal
10-31-2010, 04:17 AM
Forgot to thank you guys for the help.

Thanks very much!

Tony M
10-31-2010, 05:26 AM
I suggest that You read the article at http://www.decloak.com/dev/csstables/css_tables_01.aspx if You want to redesign Your site :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum