I have the child div set float:left and at the bottom of the child div, the content in the parent div will justify to the left below the child div.
This a common problem with floated elements known as "float breakout". To prevent it you can either break the float plane by adding an element positioned with float: none;
after the floated elements in the parent and before the closing tag of the parent,
for example
Code:
<br style="float: none;">
or add overflow: hidden; to the parent element style rules, your layout will determine which method is ideal for you.
And it's not 'justify', that is for lines of text within an element, float and justify are entirely different things.
Float is an element positioning property (
https://css-tricks.com/almanac/properties/f/float/) while justify is a text alignment property.
If I have .elem-a as my parent div that each page has a different amount of content and will be a different height depending on the amount of content. And I have .elem-b as the child div that I set the height:100%; then why does it not fill the parent div 100%. I can understand that if the parent has a padding: 10px; and it not filling that padding, but if the parent div is longer then the height of the monitor then the child div will only reach the height of the monitor.
No, no the size limit is the
browser window NOT the monitor size. even if the browser is 'full screen' the content can only fit between the inside top and bottom edges of the browser window.
If you want an element to fill the entire browser window you have to give both the <html> element and the <body> element an explicit size, usually 100% but if you have problems with 100% always triggering the display of a vertical scrollbar on browsers, use a value between 92% and 99%
for example, in your style sheet add;
CSS:
html, body {
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
Then use a 'wrapper' block level element as the first child of the <body> element also set to 100% height with position: relative; so it becomes the 'parent' for the element flow.
example:
Code:
<html>
<head>
</head>
<body>
<div id="wrapper">
all content goes here
</div>
</body>
</html>