...

View Full Version : floating div that only goes so far



turpentyne
02-13-2012, 09:20 PM
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
02-13-2012, 09:24 PM
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/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-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
02-13-2012, 10:05 PM
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
02-13-2012, 10:50 PM
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 (http://www.w3schools.com/cssref/pr_dim_min-width.asp).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum