Hello: I am trying to get all my divs inside 1 main one ( .pepe ), but it is not working properly. I am basically having problems with the .pepe part as I want all the others to fit inside that main div. I know this is simple but I am still struggling. Any help would be appreciated. PS: I know it is suppose to be external css file, but for testing I like to place inside the document so that the refreshing always loads the style. I also know the naming sucks, but again, it is just part of the testing part of this. I also know that I should NOT use tables for styling, and I won't as these will be data tables later in life. I would move away from data tables, but for now, I just have to get this working and any advice on that would also be appreciated. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Search Results</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="pepe.css" rel="stylesheet" type="text/css"> <style type="text/css"> .pepe { border: 1px solid pink; padding: 25px; margin-bottom: 50px; margin: 0 auto; } #peter01 { width: 25%; border: 1px solid green; height: 50px; float: left; } #peter02 { width: 74%; border: 1px solid yellow; height: 175px; float: left; } #peter03 { width: 84%; border: 1px solid pink; height: 55px; } #peter04 { width: 45%; border: 1px solid red; height: 45px; float: left; } #peter05 { width: 45%; border: 1px solid blue; height: 45px; float: left; } @media ( max-width:680px ) { #peter05 { clear: both; width: 75%; border: 1px solid blue; height: 45px; float: left; } } </style> </head> <body> <div class="pepe"> <div id="peter01">PICTURE</div> <div id="peter02"> <div id="peter03">4 COLUMNS</div> <div id="peter04">1 TABLE</div> <div id="peter05">1 TABLE</div> </div> </div> </body> </html>