I’m currently working on a responsive site and have come across a problem - hopefully a simple fix! On load the page is fine, a standard 70-30 split but when you adjust the window size to around 950px I have it set so that the left and right-hand divs in the main area expand to 100% and float left to fill the void.
However, I have noticed that despite the container having a set width, the left and right-hand child elements are not keeping within the area. I have put this down to the border but I cannot figure out how to fix it; keeping the border and having it still set to 100%.
When the window size gets set to 1070px I have a container class declaration which sets the site to fill 100%, as the original declaration has a set width of 100%. Perhaps this is something to do with the issue?
Something which I’ve noticed is that the “hundred” class and div works fine, fitting to 100% and not overspilling even though it has the same 3px border around it. Check the following link to see the hundred percent version of the page I linked above.
When you want 100% wide elements don’t float them and just remove the width and then you can add padding and borders as required. If an element is 100% wide then it should not be floated as there is no real need and floating everything can cause problems in older browsers.
Here:
.main .seventy {
float: left !important;
width: 100% !important;
}
The above is 100% wide but has 3px white borders so is 6px too large.
However that is a flawed approach also as floats are only as wide as the content they hold and so on a page with not enough text to reach the other side the element remains narrow and the background would not reach all the way across. This is another case of inappropriate floating.
Only float elements that need to be floated. If they are 100% wide then they don’t need to be floated and the width can be auto and thus borders and padding are no problem.
If on the other hand you have two columns that you want to add up to 100% then the secret is again to only float one column with the appropriate width and let the other column be non floated and take up the available space (either use a margin-left to clear the float or use overflow:hidden to create a rectangular block to the side of the float).
In cases where you have to make things add up to 100% then use an inner element to hold the padding and borders or use box-sizing (modern browsers) to use the old box model where width padding and borders are kept on the inside.
Great! Thanks very much for your quick and helpful advice, much appreciated. Will take all of the points you made on board
This may be a question for another thread but I was wondering why I am forced to put “!important” when dealing with @media. Surely if it’s specified that it only applies to a particular media type/size then it should apply it without the need for “!important”? An example is below of my media declarations.
@media only screen and (max-width:1070px) {
//css here
}
Media queries just follow the normal css cascade and specificity rules. Just treat them the same as you would any other styles in the document.
If for example your media queries are at the top of the stylesheet then any conflicting rules later in the stylesheet will win out just as if you redefined any other style. Therefore the media queries should be at the end of the stylesheet as they are over-rides and not at the start of the stylesheet and then you won’t need !important added to them.
Just because a media query clicks in it doesn’t exclude other rules (unless they are all in other non conflicting media queries also).
