Div within div problem

HTML & CSS
1

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>
2

Hi,
It is due to the floats inside the main div: floating elements float by default outside the “normal flow” of the document.
It’s easy solved when you give the container the instruction that no overflow (floats going outside) may occur:

.pepe {
    border: 1px solid #FFC0CB;
    margin: 0 auto; 
    padding: 25px;
    overflow: hidden;
}

BTW: Indeed, for [U]several reasons[/U] is putting the styles in the <head> very helpful during development. Just what I always do. :slight_smile: