Home/ Questions/Q 7753489
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T12:04:30+00:00

I’m having an issue with an expanding div tag that is nested within another

  • 0

I’m having an issue with an expanding div tag that is nested within another div tag. In IE the expanding div tag expands outside the outer div tag when needed. However, in Chrome, when the inner div tag expands, it causes the outer div tag to get scroll bars. I would like the behavior to be the same as in IE – no scroll bars appear and the content overlaps the body content of the page (after all it is just the shopping cart widget).

Here is the code in my html page.

<div id="mastheadcontainer"><!-- Begin mastheadontainer -->
<div id="masthead"><!-- Begin Masthead -->
    <div id="mastheadcontent">
        <div id="googlecart-widget" style="float:right;"></div>
    </div>
</div><!-- End Masthead -->

Here is my CSS:

#mastheadcontainer {
width: 100%;
margin: 0 auto;
background-color: #dcb;
border-bottom:10px solid #0066CC;
/*margin-bottom:20px;*/}


#masthead {
text-align: right;
width: 960px;
margin: 0 auto;
overflow: auto;}


#mastheadcontent{
width:956px;
height:122px;
margin:0 auto;
/*background-image:url('../images/bk-masthead.jpg');*/
/*background-repeat:no-repeat;*/
background-color:#dcb;}

Any recommendations so that the inner div tag expands similar to the behavior in IE when viewed in chrome?

Thanks
Mike

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I assume your are talking about vertical scrolling and that the content inside your #mastheadcontent id is making a scroll bar appear when it exceeds 122 pixels.

    I am not sure exactly what you want the end result will look like but here is what I suggest depending on what you are looking for:

    • Remove the height of the container so that the div will expand to fit the content inside of it. Note that since you are using a floated inside the container you will have to clear the container using a number of methods, one of them is using the property “overflow: auto;” on the #mastheadcontent. If you are not familiar with clearing floats I suggest you look at the multitude of guides on the web to help you understand the concept.

    • Or you want the content to expand past the boundaries but not expand the container itself, in that case you might want to use the property “overflow: visible;”.

    In any case you might want to play with the overflow property to get a solution to your problem, there is plenty of information on the web that should clear things up for you.

    Hope this helps.

    • 0