Hi Guys,
I want to make a website with CSS. However, I have problems with the design. I have different areas. The header, which is independent. And then the "main area", which consists of a left frame, a center frame and a right frame. As you can see in the code, I have defined the distance as '1.75%'. As I show it here, it is (in my opinion) already almost perfect.
I now have the following problem:
I want to pay attention to a recursive design. If I use this page as it is and shrink the browser window to the left until it is no longer possible, all spacing is correct.As you can see, there are no spaces between the frames in the middle.As soon as I try to get the same distance of '1.75%' between these 3 with e.g. 'margin-top' or 'margin-bottom', it shifts the distances when zooming out.
Can you please take a look and help me?
* { box-sizing: border-box; height: 95%;}body { background-image: url(Pics/XXX.jpg); background-color: #FFFFFF; color: white; font-weight: normal; font-family: Arial; font-size: 100%;}body { font: 100.01% Verdana, Arial, Helvetica, sans-serif; background-color: #ff0; margin: 0;}a:link { color: #FFFFFF;}a:visited { color: #FFFFFF;}a:hover { color: #B58900;}a:active { color: red;}.Site { border: 0px dotted #192F3D; width: 70%; height: 100%; margin-left: 15%; margin-top: 4%; display: block; overflow: hidden;}.Site_Container { border: 1px dotted #192F3D; height: 75%; display: block; overflow: hidden;}/* --------------------------------------------------------- */.Site_Container_L { float: left; position: relative; border: 1px dotted #192F3D; width: 15.5%; height: 100%; background-color: #FFFFFF;}.Site_Container_M { float: left; border: 0px dotted #192F3D; width: 67%; height: 100%; margin-right: 1%; margin-left: 1%;}.Site_Container_R { float: left; border: 1px dotted #192F3D; width: 15.5%; height: 100%; background-color: #FFFFFF;}/* --------------------------------------------------------- */.Header { border: 1px dotted #192F3D; height: 15%; display: block; background-color: #ffffff; margin-bottom: 1%;}/* --------------------------------------------------------- */.Links { border: 1px dotted #192F3D; height: 12%; background-color: #FFFFFF;}/* --------------------------------------------------------- */.Container { border: 1px dotted #192F3D; height: 76%; background-color: #FFFFFF;}/* --------------------------------------------------------- */.Border { border: 1px dotted #192F3D; height: 12%; background-color: #FFFFFF;}/* --------------------------------------------------------- */.Seperator { border: 0px dotted #192F3D; height: 1.75%; background-color: #FFFFFF;}<div class="Site"><div class="Header"></div><div class="Site_Container"><div class="Site_Container_L"></div><div class="Site_Container_M"><div class="Links"></div><div class="Container"></div><div class="Border"></div></div><div class="Site_Container_R"></div></div></div>Thank you very much!