Log in

View Full Version : css div within div issue ...


pepe_lepew1962
12-25-2013, 06:47 PM
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>
Beverleyh
12-25-2013, 09:43 PM
.pepe is collapsing so you need to clear the floated children. The old way to do it was to use an empty cleared element under the floats ( eg - <br style="clear:both"/> or <div style="clear:both"></div> ) but to keep markup clean, a more modern way is to use an extra "clearfix" class coupled with some appropriate CSS;


.clearfix:before, .clearfix:after { content:" "; display:table; }
.clearfix:after { clear:both; }
Put the "clearfix" class on the pepe div (ie - the parent, collapsed element) and job done.

Ps - this isn't the only clearing solution - there are others - Google around to find them.
Beverleyh
12-25-2013, 10:10 PM
Ps - if you need IE7 (or 6?) support for the above clearfix, you have to trigger "haslayout" with this extra CSS;

.clearfix { zoom:1; }
jscheuer1
12-26-2013, 02:57 AM
It really depends upon just exactly what you're going for. If you look at the HTML or at the DOM, they already are.

One way to make it also look that way visually would be to simply add overflow: hidden to .pepe:


.pepe
{
border: 1px solid pink;
padding: 25px;
margin-bottom: 50px;
margin: 0 auto;
overflow: hidden;
}


This will work in virtually all modern browsers, and is another (simpler, more modern*) method for doing what Beverley is talking about. It forces .pepe to both contain the floats and to clear them for anything that comes after .pepe.


*some older browsers (IE 7 and less I think) may require explicit clearing and containing rules.
Beverleyh
12-26-2013, 11:12 AM
I think it depends on the situation. The overflow method can be easiest - definitely the shortest - but unless you can predict the content of the floated elements within, you may experience problems with unpredictable scrollbars and the chopping-off of content. This would be fine if, for example, you are the only person editing and manipulating content so it could be perfect for your needs. However, if you're preparing a template that other (less technical?) people will be editing, maybe as part of a CMS, then the clearfix method will probably be "safer". Both methods (and others) are perfectly acceptable though - it just depends on what your requirements are, so you'll be the best person to make that decision.

If it helps, here's a reference article where float-clearing methods are discussed (towards the bottom): http://www.impressivewebs.com/clearing-floats-why-necessary/
jscheuer1
12-26-2013, 03:13 PM
I think modern browsers are fine with the overflow method. Even IE 8. If so, it's only in cases were you want to support legacy browsers that you would worry about other methods.

Just tested. It's fine in IE 8 as long as there's a standards invoking DOCTYPE.
Beverleyh
12-26-2013, 05:20 PM
Don't hate me for niggling but I feel a bit squirmy with the overflow method John :( There are pros and cons either way, but what sways me towards the clearfix method is that its a bit more forgiving with unknown content. So for example, say I create a web template with an editable region (inside one of the floated elements) for a client, and all goes well until they decide to insert an overly wide image or fixed width table with bus timetable or financial report or whatever, courtesy of "convenient" WYSIWYG editor (damn you, WYSIWYG!); With overflow:hidden, the content becomes inaccessible (to some degree or other). On the flip side, the clearfix way doesn't do (or is less likely to do) that. Big irks for what it can do instead though which is break the layout to force out the width, but at least the content is accessible. Doesn't look particularly nice but at least a visitor can still get at the content.

So boiling it down to basics, 2 possibilities emerge (in the case of unpredictable, client-manipulated content);
1 - use overflow:hidden and retain layout, but possibly lose content, or
2 - use clearfix and risk a fudged layout but (hopefully) keep content.

In an ideal world I would love to fully support the simplicity of overflow:hidden - its so neat it deserves a little chin tickle - but until CMS's are foolproof or allow easy manipulation and full integration with infallible CSS, I have to pat clearfix on the back and bring him to the front of the class for good behaviour.

I appreciate that I've turned this thread into a bit of an over-cautious "what if?" discussion which could we totally off the mark from the original requirements, especially if what's in those floated elements is measured and edited with consideration. I'm happy to accept what I think you're saying about overflow:hidden in this and many other cases - it can certainly be the easiest and most appropriate solution - but for others reading this thread, the clearfix method is documented above as an alternative solution. As always, each situation on the web is different so (to folks reading) please weigh up the pros and cons on a case by case basis.
jscheuer1
12-26-2013, 05:42 PM
I can understand why you might feel squirmy after all those tarts. I think you would get into problems with overflow: hidden; if you set an explicit height that was inadequate for the content. But the point of this is to get the container with overflow: hidden; to expand to the size of the floated containers it contains. So setting an explicit height for the overall container would be counterproductive, as it would be when using any other method(s) to clear the float(s).

In the past I have often seen and used both methods. But with modern browsers and a standards invoking DOCTYPE, only the overflow method is needed. Remember, it hasn't been all that long that we had to cater to IE 6 and 7 or risk losing a large segment of the browsing publoc. So it's only natural to still see a tendency to do so.

And I would emphasize that in IE 8, the overflow: hidden; method requires a standards invoking DOCTYPE. So, to be idiot proof, conditionals for IE 8 and less could be employed.

The trend at DD is to ignore anything less than IE 8 in Standards Mode. But you are not required to follow that. There probably still are niche markets/areas (Asia? Others?) where catering to earlier versions is more or less mandatory. And of course if you are working with someone who cannot be made to use standards, then . . .