Positioning problem

[Ifaiden]

I have this problem whenever I zoom out in the browser (FF). The div-boxes that is close to the right borders jumps down to the next vertical line. See for yourself: http://mindu.mine.nu/amazing_solutions/gallo_negro/main.php

The images on the top, the last link in the menu does just that and the right column in the middle seems to draw closer to the right corner.

---

The other problem I have is centering two columns in a div-box.

I've managed to center it, but it seems like the wrong way of doing it?

div#boxcontainer{
position:absolute;
left:50%;
margin-left:-460px;
margin-top:10px;
}

div#left_box {
float:left;
height:700px;
width:450px;
background-image:url("http://mindu.mine.nu/amazing_solutions/gallo_negro/img/opacity70.png");
background-repeat:repeat;
color:#FFF;
border:1px solid #3e3e3e;
text-align:justify;
margin-right:20px;
}

div#right_box {
float:left;
height:700px;
width:450px;
background-image:url("http://mindu.mine.nu/amazing_solutions/gallo_negro/img/opacity70.png");
background-repeat:repeat;
color:#FFF;
border:1px solid #3e3e3e;
}

[V]

By zoom, you mean resize the window? You need to center the container.  try this

 

body {

text-align:center;

}

 

#boxcontainer {

text-align:left;

margin:0 auto;

width: 950px; (can be more or less)

}

 

leave boxes are they are but without margins.

 

These are some very basic steps. I really suggest you take a css crash course, learn the basics and proceed.

 

[V]

also, there's no need to specify "div" just use # or .

[haku]

adding 'div' gives the CSS selector a higher specificity. This can be useful when trying to set priority on styles.

 

It's also necessary if using the same class or ID on more than one type of element.

[V]

Thanks for adding that haku. I use divs just when setting the priorities. Otherwise I just use . or #