div stacking

[rayray1]

how do i get two floating divs to not stack when the window is minimized- meaning the div floated right drops below the div floated left, breaking the design. i've tried clear: both, min-width on parent and children, etc. please advise:

.bnr
{
height: 75px;
min-width: 741px;
position:relative;
width: 100%;

}

.bnrLft
{
background-image: url("../images/bnrLft.gif");
float: left;
height: 75px;
width: 590px;
}

.bnrRgt
{
float: right;
position:relative;

}



<div class="bnr">
<div class="bnrLft">
&nbsp;</div>
<div class="bnrRgt">
<a href="http://www.michigan.gov" target="blank">
<img alt="image" src="images/bnrRgt.gif" /></a></div>
</div>

[Medyman]

I don't understand what you mean by stacking? Post your markup or better yet, a link to the page where this is happening.

[terrik]

Try placing a wrapper around the two column-divs that is the width of the two column-divs combined.

So...
If you have one column at 600px, and another at 200px, create a wrapper div that is 800px.


Now...when the window is contracted, the two content columns will not stack.

[terrik]

Try placing a wrapper around the two column-divs that is the width of the two column-divs combined.

So...
If you have one column at 600px, and another at 200px, create a wrapper-div that is 800px, and place your content column-divs inside the wrapper-div.

Simplified Example

CSS Statements


#wrap {
display: block;
width: 800px;
margin: 20px auto; /* 20px margins top and bottom - auto center left and right */
}

#colm-1 {
display: block;
width: 600px;
}

#colm-2 {
display: block;
width: 200px;
}


HTML Code


<div id="wrap">

<div id="colm-1">
blah blah blah stuff.
</div name="CLOSE #colm-1">

<div id="colm-2">
blah blah blah more stuff.
</div name="CLOSE #colm-2">

</div name="CLOSE #wrap">


Now...when the window is contracted, the two content columns should not stack.

Hope this helped!