tags:

views:

302

answers:

2
Q: 

content and wrapper does not extend properly when content extends.

HI all, I am having a problem with my web page, because I have a wrapper around all element of the page (header,navigation menu and content) when the content expands due to the amount of data to display it would go over the wrapper without pushing it down, but on IE7 it does expand the wrapper. It is driving me crazy, and I can not figure out why it is doing this.

Sorry for the code, as it may have too many divs, but I dont know any other way to create round corner.

code:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title>Untitled Page</title>



    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
    *
    {
        padding:auto;
        margin:auto;
        text-align:center;
        }
    div
    {
        text-align:left;
        display:block;

        }
    </style>

</head>
<body style="">
    <form id="form1" runat="server">


    <!--Main div container-->
<div style="background-image:url('Images2/Content/WrapTop.gif');width:1210px;height:18px;background-repeat:no-repeat;margin-top:10px;" ></div>
<div style="background-image:url('Images2/Content/WrapMid.gif');width:1210px;min-height:900px;display:block;background-repeat:repeat-y;">
<!--Menu container-->
<!--Heading-->
<div style="width:1210px;height:132px;background-image:url('Images2/Heading/Heading.gif');background-repeat:no-repeat;">
<div style="width:1046px;height:6px;background-repeat:no-repeat;"></div>
<div style="width:1046px;height:96px;background-image:url('Images2/Heading/tiltle.gif');background-repeat:no-repeat;"></div>
<div style="width:1046px;height:3px;display:block;"></div>
<!--Top Menu-->
<div style="width:1200px;height:25px;text-align:justify;padding-bottom:-10px;">
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
</div>
</div>
<!--Container of menu and subcontainer-->
<div style="width:1212px;min-height:750px;margin-top:60px;margin-left:15px;">
<!--Menu-->
<div style="width:274px;float:left;">
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/menu/MenuTop.gif');color:White;"><asp:LinkButton ID="LinkButton1" runat="server" Text="Electronics" OnClientClick="FindSubCats(560864, 'SearchSubCatsOne');return false;" /></div>
<div id="SearchSubCatsOne" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/Menu/MenuTop.gif');"></div>
<div id="SearchSubCatsTwo" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/Menu/MenuTop.gif');"></div>
<div id="SearchSubCatsThree" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
</div>
<!--Content Menu-->
<div style="width:802px;float:left;min-height:650px">
<div style="float:left;margin-left:10px;">
<div style="width:800px;height:37px;background-image:url('Images2/Content/contentTop.gif');"></div>
<div   style="width:800px;min-height:650px;background-image:url('Images2/Content/contentMid.gif');background-repeat:repeat-y;display:block;">
<div id="Products" style="width:800px;min-height:650px;display:block;"></div>
</div>

<div style="width:800px;height:13px;background-image:url('Images2/Content/contentBottom.gif');"></div>
</div>
</div>


</div>
</div>
<div style="background-image:url('Images2/Content/WrapBottom.gif');width:1210px;height:15px;background-repeat:no-repeat;" ></div>



    </form>
</body>
</html>

Any help, would be very much appreciated.

A: 

You're probably looking for max-width or max-height, and for problems like this, you may want to take a look at overflow settings.

Also, FWIW, This code is going to be very hard for you to maintain if you continue to keep the CSS inline. You should be using classes and IDs with an external CSS file. That way, you can quickly change your entire site's design - plus the information only has to be loaded & cached once by the client browser.

dingle_thunk  2010-02-15 00:15:16
Thanks for the advice, the inline style it is temporaly until I get a solid template, and then I will remove all the styling to move it to an external file.
Cesar Lopez  2010-02-15 09:09:42
+2  A: 

On quick look, it may be caused by the fact that you've got floated divs inside the wrapper which means they'll gladly float outside of it.

As a quick hack, add this as the last element inside your wrapper:

<div style="clear: both"></<div>

If that solves it, you can add a cleaner "clear: both" solution into your CSS.

Tom  2010-02-15 02:54:47
Thank you very much I will try it when I get home.
Cesar Lopez  2010-02-15 09:10:09
Muchas Gracias Tom.
Cesar Lopez  2010-02-15 09:46:54

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?