Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS div inside main div not working…

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #159095
    pepe_lepew
    Participant

    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.

    Search Results

    .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;
    }
    }

    PICTURE
    4 COLUMNS
    1 TABLE
    1 TABLE

    #159104
    Senff
    Participant

    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 know it’s just for testing, but even if you’re linking to an external CSS file, then refreshing will also reload the style. Same as putting the styles inside the document, so that doesn’t make a difference for that.

    In the styles above, you don’t give “peter01”, “peter02”, etc. a PERIOD or HASH in front of it (.peter01 or #peter01). Not sure if you forgot to paste that properly or if that’s even relevant, but of course you’ll need to do that.

    If you can you create an example in Codepen, it’ll be a lot easier for us to help.

    #159105
    pepe_lepew
    Participant

    senff, seriously, I don’t know why the # didn’t show up because I copied it straight from the file. Either way, I have it working. .pepe needed overflow:hidden; and so far that is working.

    Not sure how the overflow will affect other stuff, but 1 problem at a time.
    _/ Cheers and thanks for your time and comment.

    #159106
    Senff
    Participant

    I think the problem you were having was basically about clearing floats. Many solutions to it, adding overflow:hidden; being one of them. Adding a clearfix is another popular solution.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.