xerox02 Posted July 12, 2010 Share Posted July 12, 2010 The code for my div is #filter { height: 263px; width: 703px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-image: url(images/filterby.png); background-repeat: no-repeat; } I have some <img src= > in my div, but when I add too many images it goes outside my div from the bottom, rather than go to the right of the previous images(which would be neighboring the previous images). I want it so the images are adjacent to each other, rather than stick out from the bottom. Thanks, xerox02 Quote Link to comment Share on other sites More sharing options...
XeNoMoRpH1030 Posted July 12, 2010 Share Posted July 12, 2010 I believe since you specified a width, it will not overflow past that width, unless you use the overflow property maybe. Have you tried overflow or maybe the CSS3 overflow properties (overflow-x)? Also, here is your CSS, but simplified. #filter { height: 263px; width: 703px; margin: 0 auto; background: url(images/filterby.png) no-repeat; } Quote Link to comment Share on other sites More sharing options...
xerox02 Posted July 12, 2010 Author Share Posted July 12, 2010 CSS /* ------------------------------------------------------------------------ This you can customize ------------------------------------------------------------------------- */ x.label label.checkbox span.holder { height: 147px; /* Total height of your checkbox image */ background: url(../images/prettyCheckboxes/checkbox.gif) 0 -1px no-repeat; /* Path to your checkbox image */ } p.label label.checkbox span.holder { height: 147px; /* Total height of your checkbox image */ background: url(../images/prettyCheckboxes/radio.gif) 0 -1px no-repeat; /* Path to your checkbox image */ } label.radio span.holder { height: 61px; /* Total height of your radio buttons image */ background: url(../images/prettyCheckboxes/radio.gif) 0 -1px no-repeat; /* Path to your radio button image */ } label.checkbox:hover span.holder, label.radio:hover span.holder { top: -200px !important; } /* Background position on mouseover */ label.checked span.holder, label.checked span.holder, label.checked:hover span.holder, label.checked:hover span.holder { top: -100px !important; } /* Background position when checked */ /* ------------------------------------------------------------------------ Customize at your own risk ------------------------------------------------------------------------- */ label.list { float: left; clear: left; margin: 0 0 5px 0; } label.inline { float: left; margin: 0 10px 0 0; } input.hiddenCheckbox { position: absolute; left: -10000px; /* Hide the input */ } label.prettyCheckbox span.holderWrap { float: left; position: relative; margin-right: 5px; overflow: hidden; } label.prettyCheckbox span.holder { display: block; position: absolute; top: 0; left: 0; } HTML in div <form id="checkboxDemo" method="post"> <div id="generate"> <input id="submit_btn" type="image" src="images/generate.png" value="Submit Request" name="submit_btn" rntsubmit="true"> </div> <div id="filter"> <br /> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> google.load("jquery", "1.3.2"); </script> <script src="../static/js/common.js" type="text/javascript" charset="utf-8"></script> <script src="js/prettyCheckboxes.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyCheckboxes.css" type="text/css" media="screen" title="prettyComment main stylesheet" charset="utf-8" /> <body> <br/> <x class="label"> <label for="checkbox-1" tabindex="1"></label> <input type="checkbox" name="checkbox-1" id="checkbox-1" value="checkbox-1"; /> <p class="label"> <label for="checkbox-2" tabindex="2"></label> <input type="checkbox" name="checkbox-2" id="checkbox-2" value="checkbox-2" /> <label for="checkbox-4" tabindex="3"></label> <input type="checkbox" name="checkbox-3" id="checkbox-3" value="checkbox-3" /> <label for="checkbox-4" tabindex="4"></label> <input type="checkbox" name="checkbox-4" id="checkbox-4" value="checkbox-4" /> <label for="checkbox-5" tabindex="5"></label> <input type="checkbox" name="checkbox-5" id="checkbox-5" value="checkbox-5" /> <label for="checkbox-6" tabindex="6">Check all</label> <input type="checkbox" name="checkbox-7[braket]" id="checkbox-6" value="checkbox-6" onclick="checkAllPrettyCheckboxes(this,$('#checkboxDemo'))" /> </form> It's somewhere in here because the css here is also in that filter div. Quote Link to comment Share on other sites More sharing options...
xerox02 Posted July 12, 2010 Author Share Posted July 12, 2010 bump Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.