Elements move around on the page when i re-size my window

pumabear

New member
Jan 25, 2010
76
1
0
Hi, im having trouble keeping these 3 columns in place when i resize the browser window. Heres the html code

Code:
<div id="columns">



<div class="vesti">
	<img src="http://www.lolly-pop.co.rs/lolly/images/stories/demo/under.png">
</div>

<div class="sport">
	<img src="http://www.lolly-pop.co.rs/lolly/images/stories/demo/under.png">
</div>

<div class="zabave">

	<img src="http://www.lolly-pop.co.rs/lolly/images/stories/demo/under.png">
</div>

</div>

and the css code

Code:
#columns {
	
	margin: 0 150px 0 0;
	width:100%;
	min-width: 700px;
	
	
}

#columns .zabave {
	background:url("http://www.wickedfire.com/images/zabavecolumn.gif");
	border: 1px solid #ffffff;	
	float:right;
	width:303px;	 
	margin:0 2.5% 0 0;
	
	
	
	
}
#columns .vesti {
	background:url("http://www.wickedfire.com/images/vesticolumn.gif");
	border: 1px solid #ffffff;	
	float:right;	
	width:303px;
	margin:0 2.5% 0 0;
	
	
	
}

#columns .sport {
	background:url("http://www.wickedfire.com/images/sportcolumn.gif");
	border: 1px solid #ffffff;	
	float:right;
	width:303px;	
	margin:0 2.5% 0 0;
	
	
	
}

#columns .vesti, * html #columns .vesti{
	clear:both;	
	margin:0 297px 15px 0;
	
}
#columns p {
	
}
#columns img {
	height: 200px;
	width: 200px;
	margin-top:60px;
	overflow:hidden;
}

Im around moderate skill level when it comes to css/html but i cant figure this one out for some reason. I am using wordpress theme moviesitepress btw
Thanks for the help!
 


Code:
#columns {
	margin: 0 150px 0 0;
	width:100%;
	min-width: 700px;
}

#columns .zabave {
	background:url("http://www.wickedfire.com/images/zabavecolumn.gif");
	border: 1px solid #ffffff;	
	float:right;
	width: 30.5%;	 
	margin:0 2.5% 0 0;
}

#columns .vesti {
	background:url("http://www.wickedfire.com/images/vesticolumn.gif");
	border: 1px solid #ffffff;	
	float:right;	
	width:31.5%;
	margin:0 2.5% 0 0;
}

#columns .sport {
	background:url("http://www.wickedfire.com/images/sportcolumn.gif");
	border: 1px solid #ffffff;	
	float:right;
	width:30.5%;	
	margin:0 2.5% 0 0;
}

#columns .vesti, * html #columns .vesti{
	clear:both;	
	margin:0 297px 15px 0;
}

#columns p {
	
}

#columns img {
	height: 200px;
	width: 200px;
	margin-top:60px;
	overflow:hidden;
}