plachance 0 Posted April 26, 2011 Report Share Posted April 26, 2011 Hi,Im relatively newb in web development and im having some troubles with div's when the browser is resizing... the left div is pushed to the bottom of screen and i cant manage to keep it in place when browser is resized too small to contain both div's.Here is what the html looks-like: <body> <div id="page-div"> <div id="contents-div" class="contents-div"> <div id="img-div" class="img-div"> <span id="img-fond-wrapper" class="image-wrapper" style="opacity:1;"> <img id="img-maison" class="img-maison" src=""/> </span> </div> <div id="thumbs-div" class="thumbs-div"> <ul> <li> <a class="thumb" name="img01" href="" title="01"> <img src="./img/img01.png" alt="" /> </a> </li> <li> <a class="thumb" name="img02" href="" title="02"> <img src="./img/img02.png" alt="" /> </a> </li> </ul> </div> </div> </div> </body> CSS div.contents-div { height: 400px;}div.img-div { display: block; float: right;}div.img-div span.image-wrapper { display: block; position: absolute; top: 0; left: 0;}div.thumbs-div { float: left;}ul.thumbs { margin: 0; padding: 0; clear: both;}ul.thumbs li { margin: 5px 10px 5px 0; padding: 0; float: left; list-style-type: none; list-style-image: none; list-style-position: outside;}ul.thumbs img { border: none; display: block;} The img-div should be at right side of screen and thumbs-div at left of screen. The thumbs-div is a thumbnail and img-div contains a img i center on it. My problem is when i resize the browser these two div does not stay in place. Anyone know why?thanks Quote Link to post Share on other sites
jeffman 86 Posted April 27, 2011 Report Share Posted April 27, 2011 I would normally test this. Please post the dimensions of your images. Quote Link to post Share on other sites
plachance 0 Posted April 27, 2011 Author Report Share Posted April 27, 2011 59x136 for the thumbs (img01.png and img02.png) and 430x332 for "img-maison" Quote Link to post Share on other sites
plachance 0 Posted April 27, 2011 Author Report Share Posted April 27, 2011 Here i put two pictures illustrating my problem:When the browser is maximised... (everything is fine)When the browser is resized smaller the <div> A (thumbs in previous example) goes down like this Quote Link to post Share on other sites
Ingolme 1,019 Posted April 27, 2011 Report Share Posted April 27, 2011 If those two boxes have a fixed width, there's no way they'll fit together within the width of the window. Are you expecting them to overlap eachother? Quote Link to post Share on other sites
plachance 0 Posted April 27, 2011 Author Report Share Posted April 27, 2011 No they should not overlap... i just want them to stay the size they are and i most of all want them to stay in place when resizing. One div at left and the other at right.This is possible take a look at this example of the galleriffic jQuery plugin. http://www.twospy.com/galleriffic/example-2.html Quote Link to post Share on other sites
cousineaug 0 Posted April 27, 2011 Report Share Posted April 27, 2011 (edited) No they should not overlap... i just want them to stay the size they are and i most of all want them to stay in place when resizing. One div at left and the other at right.This is possible take a look at this example of the galleriffic jQuery plugin. http://www.twospy.com/galleriffic/example-2.html If you FLOAT an element, it will float where it can. If there is not enough space BESIDE, it will fall below.If you want the two DIVs to sit beside each other with a scrollbar when the browser is narrower then you need to put them inside a container that has the required width. Cut and paste the example below<head><style type="text/css" />div.left{float: left;background: #fed;width: 500px;height: 100px;}div.right{float: left;background: #edf;width: 400px;height: 100px;}div.outer{width:920px;}body{overflow:auto;}</style></head> <body><div class="left">Here is some left content . . .Here is some left content . . .Here is some left content . . .</div><div class="right">Here is some right content . . .Here is some right content . . .Here is some right content .</div><p style="clear:both;">this does nto work when the browser is narrow</p><div class="outer"><div class="left">Here is some left content . . .Here is some left content . . .Here is some left content . . . .</div><div class="right">Here is some right content . . .Here is some right content . . .Here is some right content . . .</div></div> </body> Guy Edited April 27, 2011 by Guy Cousineau Quote Link to post Share on other sites
plachance 0 Posted April 27, 2011 Author Report Share Posted April 27, 2011 Thanks! Quote Link to post Share on other sites
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.