div inside main div not working…

[pepe_lepew]

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

[Senff]

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.

[pepe_lepew]

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.

[Senff]

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.

[Author]

Posts