Am 17.06.2013 16:44 schrieb Olivia A:
But for the web page layout by default, (with no media query applied) ,
when i resize down the pages "a propos.php" and "enregistrement.php"; the
two containers (below the long picture ) which are floated elements don't
float as it should, but instead there is one container falling down
underneath the other one.This only occur when i resize down the browser.
At the moment I look at your example pages, the 2nd container is below
the 1st one even without resizing (Firefox 21.0 on Windows 7). And this
is actually the expected behaviour, as the total width of them is more
than 100%. You have widths of 49% + 2% + 49% = 100%, plus 10px padding
on both containers, which makes totally 40px padding horizontally. So
both containers have a total width of 100% + 40px.
I made the same mistake when I started with web design. I was used to
the InDesign-/QuarkXPress box model which has the padding inside the
total width. In CSS, the padding is added to the total width.
You could add a css rule as follows, to change the box model:
.container1, .container2 {
box-sizing: border-box;
}
Anyway I believe to have read that browser support for border-box is not
quite perfect (IE8 seems to have problems). I'd personnally change the
padding to %, so you can sum up to exactly 100%, such as:
.container1, .container2 {
width:45%;
padding:2%;
}
.container1 {
margin-right:2%;
}
HTH
Markus
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
