Jump to content

div trouble when resizing browser...


Recommended Posts

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 post
Share on other sites

Here i put two pictures illustrating my problem:When the browser is maximised... (everything is fine)th.0b179b59a0.jpgWhen the browser is resized smaller the <div> A (thumbs in previous example) goes down like thisth.63c975bb86.jpg

Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites
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 by Guy Cousineau
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...