plachance Posted April 26, 2011 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 Link to comment Share on other sites More sharing options...
jeffman Posted April 27, 2011 Share Posted April 27, 2011 I would normally test this. Please post the dimensions of your images. Link to comment Share on other sites More sharing options...
plachance Posted April 27, 2011 Author Share Posted April 27, 2011 59x136 for the thumbs (img01.png and img02.png) and 430x332 for "img-maison" Link to comment Share on other sites More sharing options...
plachance Posted April 27, 2011 Author 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 Link to comment Share on other sites More sharing options...
Ingolme Posted April 27, 2011 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? Link to comment Share on other sites More sharing options...
plachance Posted April 27, 2011 Author 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 Link to comment Share on other sites More sharing options...
cousineaug Posted April 27, 2011 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 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 Link to comment Share on other sites More sharing options...
plachance Posted April 27, 2011 Author Share Posted April 27, 2011 Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.