css div within div issue ...

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
pepe_lepew1962
Forum Commoner
Posts: 44
Joined: Thu Nov 20, 2008 10:29 am

css div within div issue ...

Post by pepe_lepew1962 »

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>
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: css div within div issue ...

Post by Celauran »

#peter02 isn't closed. As for tables, they shouldn't be used for layout but if you're presenting tabular data, by all means use tables; that's the whole reason they exist.
Post Reply