CSS div positionning problem in different browsers/OS

GregoryCo

New Member
Hi
I have a problem with my divs, in some browsers and different OS my divs change from position. On most browsers it is as it should be.

CSS (these are the 3 divs that change their position)
Code:
#homeLinks {
	width: 150px;
	height: 280px;
	margin-left:6%;
	margin-top:2%;
	background-color: #ffffff;
	border-color:#878787;
	border-style:solid;
	border-width:1px;
	float:left;
}
#homeIllu {
	width:48px;
	height:58px;
	background-image: url(images/illu_home2.png);
	position: absolute;
	left:3%;
	bottom:5%;
}
#homeRechts {
	width: 355px;
	height: 280px;
	margin-right: 5%;
	margin-top: 2%;
	float: right;
	background-color: #ffffff;
	border-color: #878787;
	border-style: solid;
	border-width: 1px;
	padding-left: 5px;
	padding-right: 5px;
}

HTML
Code:
<body>
	<div id="container">
		<div id="grijsVlak">
        
<div class="menu">
				<ul>
					<li><a href="index.htm"><img src="http://www.webdesignforum.com/images/menu_home_active.jpg" alt=""></a></li>
					<li><a href="illustraties.htm"><img src="http://www.webdesignforum.com/images/menu_illustraties.jpg" alt=""></a></li>
					<li><a href="ontwerpen.htm"><img src="http://www.webdesignforum.com/images/menu_ontwerpen.jpg" alt=""></a></li>
					<li><a href="mezelf.htm"><img src="http://www.webdesignforum.com/images/menu_mezelf.jpg" alt=""></a></li>
				</ul>
			</div>
			<div id="homeIllu"></div>
<div id="homeLinks">
				<h1>-UPDATES EN NIEUWS-</h1>
				<p>&nbsp;</p>
			  <p>Stage: Periode 22/09 - 31/10<br>
			  &amp; 20/04 - 05/06 bij het bedrijf<br>
			      <strong>speelokee - skateconstruct</strong> te Kortrijk</p>
			  <p>&nbsp;</p>
			  <p><strong>Laatste update schetsen<br>
			  7/11/2008</strong><strong><br>
		      </strong></p>
		  </div>
		  
<div id="homeRechts">
				<h1>-ABOUT-</h1>
				<p>&nbsp;</p>
				<p>Deze portfolio bevat een selectie uit de werken die ik tot nu toe heb gemaakt. </p>
				<p>&nbsp;</p>
				<p>° illustraties: Daar kun je de illustraties bekijken die ik in de afgelopen 4 jaar heb gemaakt met behulp van illustrator.</p>
				<p>&nbsp;</p>
				<p>° ontwerpen: Je kunt de ontwerpen en schetsen bekijken die ik heb gemaakt tot nu toe in het kader van mijn opleiding Industrieel Productontwerpen.</p>
				<p>&nbsp;</p>

</div>
	  
	  </div>
      
</div>


</body>

http://users.skynet.be/fa314098/ this is the website how it should be

image of issue:

531c651515927ed0cfc48ebfc5.png


Thanks in advance!
 
Last edited:

adx

New Member
Change the margins from percentages to pixels, i.e. margin-left: 10px;
I think that should do the trick. Give word if it doesn't.
 

GregoryCo

New Member
Well, originally it was like that, with pixels, but it showed exactly the same problem, so I tried to put it in percentages, but without success.
Thanks for reply
 

adx

New Member
Hm, It's really hard to tell what's going on even with the source available.
It seems like a simple layout that should work fine without any problems. Have you
tried switching the container's padding for 'container p {margin: px;}. Padding can
cause the cell to expand in certain browsers. Never touch the stuff myself :)
What language is that, Dutch? Most cryptic language ever! :p
 

adx

New Member
Word! All I can think of is that you start from scratch.
What happens if you float all the containers to the left? Just a thought.
 

adamblan

New Member
create a table. that way you can use columns instead of floats. a lot of people don't understand how to use floats -

Layout with tables terrible idea. Don't do it.

Try to absolutely position these elements instead of floating them.
 

conor

New Member
He seems to have fixed his problem so all is good! :)

He isn't trying to. He's just floating a couple of Div's.

It's not clear from what he provided but he is trying to. If you go to http://users.skynet.be/fa314098/index.htm you will see what I mean.

I'm refering to this code which had a float and was an inline element. He has obviously since removed the float:
Code:
#grijsVlak {
background-color:#F8F8F8;
border:1px solid #878787;
display:inline;
height:350px;
left:50%;
margin-left:-300px;
margin-top:-175px;
position:absolute;
top:50%;
width:597px;
}
 
Top