floating div that only goes so far

[turpentyne]

I have a div that is set to float: right;

Does anybody know how to make the div go off the page when somebody shrinks the window to a certain point?

For example, if somebody drags the corner in so the window is about 200 pixels wide. I don't want the floating div to be on top of a logo. I tried using a margin-setting, but no luck.

[Sammy12]

Hey there turpentyne,

Post your full code.

The problem is that you are most likely using a fluid layout (using the whole screen). Try resizing this very window, codingforums will collapse as well.
http://coding.smashingmagazine.com/2...t-one-for-you/

There is fixed layout (960px wide and centered - look at youtube), there's fluid layout which is 100%, and elastic which is a mix. 960px is standard as the smallest possible browser width size, so that even for tiny monitors, the page is still fully visible. http://www.w3schools.com/browsers/browsers_display.asp I recommend starting out with a fixed layout, since with fluid and elastic you will experience collapsing elements.

In short, if you are using 100% width of the screen and resize the browser, elements will collapse.

or you could be a total boss and resize things based on browser size http://css-tricks.com/ which is very advanced

[turpentyne]

Yeah, I'm trying out a liquid design with a header and footer.

Here's what I've got right now:

<style>
html, body {
height: 100%;
padding:0px;
margin : 0px;
}

#header {
	background-image:url(test_images/top_bg1.gif);
background-repeat:repeat-x;
z-index:3;
height:10px;
overflow:visible;
}


#nav ul
{
list-style: none;
padding: 0;
margin: 0;
} 


#container {
min-height: 100%;
margin-bottom: -135px;
position: relative;
background-color:#f0f0f0;
background-image:url(test_images/bg.jpg);
background-repeat:repeat-y;
z-index:1;
}

#footer {
height: 135px;
position: relative;
background-color:#000;
background-image:url(test_images/bottom_bg.jpg);
background-repeat:repeat-y;
z-index:2;
}

.clearfooter {
height: 135px;
clear: both;
}

</style>

<div id="container">
    <div id="header"><img src="test_images/page_top.gif" /></div>
    <div id="main">
    <img src="test_images/logo1.png" style="position:relative;top:10px" /><br />
     <img src="test_images/arrow.gif" style="position:relative;left:25px;top:11px" />
    
    <div id="nav" style="float:right;position:relative;right:40px;top:-100px;">
      <ul>
        <li><a href="#"><img src="test_images/b_hm1.gif" /></a></li>
        <li><a href="#"><img src="test_images/b_cmp1.gif" /></a></li>
        <li><a href="#"><img src="test_images/b_serv1.gif" /></a></li>
        <li><a href="#"><img src="test_images/b_pub1.gif" /></a></li>
        <li><a href="#"><img src="test_images/b_cnt1.gif" /></a></li>
      </ul>
      </div>
</div>
<div class="clearfooter"></div>
  
</div><!—End Container—>

<div id="footer"><img src="test_images/phone.jpg" /></div>

[Excavator]

Hello turpentyne,
A min-width setting can do what you're wanting. A container that holds both your right floated element and your logo that you don't want covered can be set to close down to a width where the two elements still fit side by side but no smaller.

See min-width property.