Div Positioning and Size Constraint Issues

HTML & CSS
1

Hello everyone, I’m fairly new to HTML and CSS, and I think I’ve managed to thoroughly confuse myself on a project I’m working on:

A JS Fiddle of what I currently have:

So here is what is confusing me:

  1. Initially, my bottomAreaWrapper div was too large and overflowed from its parent paddingDiv’s area (buttomAreaWapper being designed to occupy all available vertical space possible). This was ‘fixed’ by adding float:left to the topArea div. The 100% height now fit inside paddingDiv and it respected the 20px padding. However I don’t understand why this actually worked.

1b) Additionally, when inspecting the element (bottomAreaWrapper) in Chrome, the area that bottomAreaWrapper occupies is very different than how it appears visually (the top of the div being the same height as topArea (so much taller), and I don’t understand why that is either.

  1. I’m having trouble trying to get my left/center/right div areas to fit properly into their parent bottomArea. My understanding is that because 100% height takes not only the ‘content area’ but any border/padding and ignores any box-sizing rules of the parent, that this is why the divs are too large. So is there any way to keep them constrained without having to manually adjust the math on them every time I make a format change (I also tried using calc() but the amount of px I needed to subtract from 100% height never seemed correct)?

So I’m guessing that because I have this strange setup on bottomAreaWrapper, its causing a cascade of problems to my other elements?

2

Hi,

You have a basic number of errors and misconceptions in your code that all newbies make (and some not so new :slight_smile: ).

First of all 100% height refers to the height of the containing block (assuming the containing block has a fixed pixel height and is not auto height or content height only) and as your containing block has a height of 562px then the height:100% you put on the bottomareawrapper will make it 562px tall.

However above bottomwrapper you have a div called toparea that is 15% tall so bottomwrapper starts 15% down the page and then is 562px tall making it 15% too large for its parent container and thus overflows.

In css you will rarely set a fixed pixel height for your content when that content is going to contain fluid content like text otherwise as soon as you have too much text or when a user zooms the text your layout will break. Layouts should always adapt and cater for variable content.

That means that your fixed pixel heights and your height:100% all need to be removed and some other methods used that do no rely on these fixed sizes.

You can use min-height for your wrapper and that will allow it to grow but it will not allow the floated columns to all be equal height because you can’t use height:100% based on a min-height and even if you did then that would mean content may overflow.

If you want equal columns they you should look at using the display:table and table-cell properties to do this as they create automatic equal column or for modern browsers look into flexbox instead. Floats cannot be made into equal columns unless you resort to old fashioned hacks.

As this is a learning exercise I won’t offer code yet but just re-iterate that you need to remove the fixed pixel and percentage heights from your layout. You can see a display:table version here that I knocked up a while ago in answer to someone else’s question but it shows the basics.

4 Likes
3

Hi there guyp,

you also posted this problem on codingforums.com,
to which, as a possible solution, I supplied this code…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>test</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">

body {
    background-color: #000;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 } 

#container {
    width: 100%;
    max-width: 62.5em; 
    padding: 1.25em;
    margin: auto;
    box-sizing: border-box; 
    background-color: #999;
 }

#header {
    padding: 0.625em 0.625em 0.625em 1.25em;
    background-color: #ccc;
 }

#content {
    display: table;
    width: 100%;
    padding: 0.65em;
    border-spacing: 0.625em;
    box-sizing: border-box;
    background-color:#f00;
 }

h2 {
    display:table-row;
 }

#content div:nth-child(2),
#content div:nth-child(3),
#content div:nth-child(4) {
    display: table-cell;
    width: 33.333%;
    padding: 0.625em;
    border: 0.0625em solid #333;
    box-sizing: border-box;
    background-color: #fff;
 }

@media screen and (max-width:43em) {
#header {
    padding: 0.625em;
  }

#content, h2 {
    display: block;
  }

#content div:nth-child(2),
#content div:nth-child(3),
#content div:nth-child(4) {
    display: block;
    width: 100%;
  }

#content div:nth-child(3) {
    margin: 0.625em 0;
  }
 }

</style>

</head>
<body>

 <div id="container">

 <div id="header">
  <h1>Header</h1>  
 </div>  
  
 <div id="content"> 

  <h2>Content</h2>

 <div>
  <h3>Lorem ipsum </h3>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
    bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
    posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
    Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta.
   </p>
 </div>

 <div>
  <h3>Donec vehicula</h3>
   <p>
    Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
    purus vitae lobortis.
   </p>
 </div>

 <div>
  <h3>In sapien</h3>
   <p>
    In sapien massa, feugiat ut magna eu, hendrerit porttitor justo. In vitae massa ipsum. 
    Aliquam feugiat tortor sed diam facilisis.
   </p>
 </div>

<!-- #content --></div>

<!-- #container --></div>

</body>
</html>

coothead

4 Likes
4

Hi guyp, @PaulOB and @coothead already suggested a better way to achive your goal. Now I’ll try to explain how the 100% length is working.

TL; DR, percentage width and height refers to the actual length of its parent’s content-box. :sweat_smile:

The default block width is “auto”, which means expand to available horizontal space. That space is what is avaiable for content in the containing block.

So the “auto” value for width is actually 100% of the content box space, excluding padding and border of the contaning block’s width regardless of its box-sizing mode.

The default block height too is “auto” but here it means the height that fits the the height of contained content in flow. (Floats are not in the flow but can be cleared to be contained or counted for.)

So, 100% for height needs a given length to refer to and if it refers to ancestors that has their height set in percent the chain of heights must not be broken before reaching a given length.

Now, like the 100% width is the available width for content also the 100% height is the available height for content in the containg block. And in both cases the percentage value refers to an actual length of the containing box, either in fix units or computed px for percentage. (The “inherit” value gives the same length as 100% does.)
See: https://www.w3.org/TR/CSS2/visudet.html#the-height-property

Your test code has an unbroken chain of heights that starts with the “masterDiv” so the left/center/right divs percentage heights refer to a computed percentage length of the bottomArea’s content-box. But that box is residing in the 85% that is below the 15% float.

So, you can either clear the float for “bottomAreaWrapper” and set its height to 85% so the left/center/right divs gets 100% of that, or you can keep it 100% and set the left/center/right divs to get 85% of that. :slight_smile:

4 Likes
5

Thank you very much for the clarification, it does make quite a bit more sense now. If you don’t mind me asking a follow-up though, I’m still not quite sure about the interaction between topArea and bottom area regarding topArea having float:left. I would have thought that the div would still ‘occupy’ all the space at the top because it is a block element with 100% width, yet bottomArea ends up ‘under’ it and occupying the same space. Could you provide any clarification on the rules governing that interaction?

6

Indeed you did, I made sure to respond to you there as well, thank you for the help.

7

Thank you for the detailed response. Just to clarify something, I take it that even though topArea is a block level element and takes 100% width that the float:left still allows other divs to ‘slide’ under it because as you mentioned, “Floats are not in the flow”? The float ‘overrides’ even 100% space div behavior?

8

Not sure how to read the question. :slight_smile:

If “overrides” means be on top of; yes, the not clearing div are unaware of the float and goes under it. But its content does not go up under it, though non content as top padding does.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.