Help with container

HTML & CSS
1

Hey guys, my old website was done in entirely tables and i’m working on updating it and making it use CSS. I was going well until I tried to add some content to the body. If I just add text it seems to be ok and scrolls. but when I added another container within my main body field it doesnt autoscroll the main container. and just floats the datea. I’msure that doesnt make too much sense so i will post the code. and here is the result

worktopmagic.co.uk/upgrade/


a:link {color:#FFFFFF;text-decoration:none;}
a:visited {color:#FFFFFF;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#069;text-decoration:none;}

div.container {
  font-size: 12px;
  width: 680px ;
  margin-left: auto ;
  margin-right: auto ;
  background-color: #ffe;
  text-decoration: none;

  }

  div.float {
  float: left;
  padding-left: 20px;
  height: 160px;

  }


div.floatr {
  float: right;
  text-align: right;
  padding-bottom:15px;
  }

h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
        margin-top:-5px;
        margin-bottom:-5px;
}

h2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
        margin-top:-3px;
        margin-bottom:-3px;
}

body {
	background-color: #333;
	margin-top: 0px;
	margin-bottom: 0px;
}

#header {
	height: 135px;
	width: 800px;
	overflow: hidden;
	margin: 0;
	text-align: center;
        margin-left: auto;
        margin-right: auto;
        background: url('kitchen-worktops.jpg');
}

#mainback {

	width: 800px;
        margin-left: auto;
        margin-right: auto;
        background: url('worktops-background.jpg');
}

#maincontain {

        width: 770px;
        height: auto;
        margin-left: auto;
        margin-right: auto;

}

#footer {

        width: 800px;
        height: 50px;
        background-color: black;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        color: white;
        }

#menu{
    padding:0;
    margin:0;
}
#menu ul{
    padding:0;
    margin:0;
}
#menu li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
}

#menu li a{
    width:160px;
    height: 25px;
    display: block;
    text-decoration:none;
    text-align: center;
    line-height: 25px;
    background-color: black;
    color: white;
}

#menu li a:hover{
    background-color: red;
}

#menu ul ul{
    position: absolute;
    top: 25px;
    visibility: hidden;
}

#menu ul li:hover ul{
    visibility:visible;
}




<link href="styles.css" rel="stylesheet" type="text/css" />

<div id="header"></div>

<div id="mainback">
    <div id="menu">
        <ul>
        <li><a href="#nogo">Kitchen Worktops</a>
        <ul>
        <li><a href="#nogo">Omega Worktops</a></li>
        <li><a href="#nogo">Prima Worktops</a></li>
        </ul>
        </li>
        <li><a href="#nogo">Worktop Samples</a>
        </li>
        <li><a href="#nogo">Request Quotation</a>
        </li>
        <li><a href="#nogo">Kitchen Doors</a>
        </li>


        <li><a href="#nogo">Contact Us</a>
        <ul>
        <li><a href="#nogo">Link 3-1</a></li>
        <li><a href="#nogo">Link 3-2</a></li>
        <li><a href="#nogo"></a></li>
        </ul>
        </li>
        </ul>
    </div>

 <div id="maincontain">
    <BR /><BR /><h2>Kitchen Worktops - Popular Choices</h2>
    Posted by admin on 1 August 2011 | 3:27 am
    <BR>


    <?php

    $connection = mysql_connect("localhost", "#######", "######");
        if(!$connection){
        die("database connection failed:". mysql_error());
	}
    $db_select = mysql_select_db("#########", $#######);
	if(!$db_select){
	die("database selecction failed:". mysql_error());
	}

        $sqtext = "SELECT *
                    FROM `worktops`
                    WHERE `range` = 'omega'";
                    $result = mysql_query($sqtext);

                    if(!$result){
                    die("database query failed:". mysql_error());
                    }

                    $Count = 0;

    while($row = mysql_fetch_row($result))
    {
    echo'
    <div class="container">
        <div class="float">
          <a href="'.$row[13].'">
          <img  src="http://www.worktopmagic.co.uk/omegaimg/'.$row[4].'" width="200" height="100"
          alt="'.$row[2].' Worktops" border="1" /><br />
          <a href="'.$row[13].'"><b>'.$row[2].'</b></a> '.$row[14].'<br />
          Texture: '.$row[3].'
              <div class="floatr">
                '.$row[15].'
              </div>
        </div>
    </div>
    ';
    $Count++;
    if ($Count > 5)
    {
        break;
    }

    }


    ?>


</div>


<BR />

  <div id="footer">
      <a href="http://www.worktopmagic.co.uk/privacy.php" rel="nofollow">Privacy Policy</a> | <a href="http://www.worktopmagic.co.uk/tandc.php" rel="nofollow">Terms and Conditions</a>
 | <a href="http://www.worktopmagic.co.uk/sitemap.html">Site Map</a> | <a href="http://www.worktopmagic.co.uk/locations.php">Delivery Locations</a>
<BR>
<a href="http://www.worktopmagic.co.uk/KitchenArticles.php">Kitchen Articles / Reviews</a> | <a href="http://www.worktopmagic.co.uk/Kitchen-Sinks.php">Kitchen Sinks</a> | <a href="http://www.worktopmagic.co.uk/Kitchen-Taps.php">Kitchen Taps</a> | <a href="http://www.worktopmagic.co.uk/articles/">Kitchen DIY</a><BR><BR>
  </div>
2

What version of IE are you using to get what you posted in the screenshot?

  • I’m using firefox

yeah im getting there, just trying to figure out how i get the css drop down menu to work in IE. also my pictures are all over the place in IE. seems like a bit of a mine field :frowning:

Any ideas on the menu?

I was using the menu used here
How to create a basic css horizontal drop down menu

I’ve added
behavior: url(“csshover3.htc”);

to my body in the css file but doesnt seem to do anything.

3

OK, so you’ve changed the code since I looked first, but in Opera I’m seeing something different:

In fact, it’s looking fine and funky in Chrome and Firefox too.

IE8 is now showing me something more akin to what I was seeing in Opera earlier today, which is the images going down the left hand side but still inside the white box (although text is overlapping outside the white area). What version of IE are you using to get what you posted in the screenshot?

4

Here is what i see, tried it in IE and it looks differant there too. tried adding overflow/float to #maincontain but its not working.

5

From what I can see, the images and associated text are on a very pale yellow background, which sits in the middle of the white background. Where exactly do you want them to move to?

6

Hi thanks for the reply. you can see what is happening from the website location

http://www.worktopmagic.co.uk/upgrade/

you can see the the worktop images just seem to float on the page. I need them to appear in the white section below the text. I need the white section to get big when i add more conent.

I have the folowing element which i basicaly want all my page content to go inside.

#maincontain {

    width: 770px;
    height: auto;
    margin-left: auto;
    margin-right: auto;

}

in the content i need to drag some products out of my db and display them. so I made the following elements to display them.

div.container {
font-size: 12px;
width: 680px ;
margin-left: auto ;
margin-right: auto ;
background-color: #ffe;
text-decoration: none;
}

div.float {
float: left;
padding-left: 20px;
height: 160px;

}

div.floatr {
float: right;
text-align: right;
padding-bottom:15px;
}

Tried messing with some stuff but doesnt seem to work. If I add height: 800px; to #maincontain everything looks fine, Obviouslty thought im going to have pages of differant sizes so this wont work well.

7

I’m not entirely sure what the problem is, so if this doesn’t help, you might need to post a screenshot and draw line and arrows on it to show what isn’t as you want it…

You may have a problem with containing floats. If you have a floated element, the parent element will only stretch to contain it if (a) the parent is also floated (but then you have the problem about its parent), or (b) the parent has overflow:hidden set on it.

Does that do anything for you?