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 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2010
    Location
    England
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy <div> on top of <div> when resizing browser

    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.




  • #2
    New Coder
    Join Date
    Oct 2010
    Location
    England
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I should have resized the images.

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

    HTML

    Code:
     
        <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:

    Code:
    #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;
    }
    Last edited by goodoldarsenal; 10-28-2010 at 12:20 PM. Reason: Added code

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    How about a hint? I would bet it's because you're using pixels for widths. Try using percentages instead and see what happens.

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.

  • #5
    New Coder
    Join Date
    Oct 2010
    Location
    England
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #6
    New Coder
    Join Date
    Oct 2010
    Location
    England
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Forgot to thank you guys for the help.

    Thanks very much!

  • #7
    Regular Coder
    Join Date
    Jun 2010
    Posts
    132
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

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