1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

css div within div problem ...

Discussion in 'HTML & Website Design' started by pepe_lepew1962, Dec 25, 2013.

0
  1. #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>
     
    Solved! View solution.
    pepe_lepew1962, Dec 25, 2013 IP
  2. #2
    Add this:

    .pepe {
    overflow:hidden;
    }
     
    wiicker95, Dec 25, 2013 IP
  3. pepe_lepew1962

    pepe_lepew1962 Member

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    perfect. thank you !!!
     
    pepe_lepew1962, Dec 25, 2013 IP