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 Link to comment https://forums.phpfreaks.com/topic/207496-images-in-my-div-go-out-side-of-my-div/ 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; } Link to comment https://forums.phpfreaks.com/topic/207496-images-in-my-div-go-out-side-of-my-div/#findComment-1084838 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. Link to comment https://forums.phpfreaks.com/topic/207496-images-in-my-div-go-out-side-of-my-div/#findComment-1084846 Share on other sites More sharing options...
xerox02 Posted July 12, 2010 Author Share Posted July 12, 2010 bump Link to comment https://forums.phpfreaks.com/topic/207496-images-in-my-div-go-out-side-of-my-div/#findComment-1085094 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.