CSS Metaphysics: Why Is Page Vertical Alignment So Difficult

CSS metaphysics: WHY is page vertical alignment so difficult?

Good question and I don't know, but I would suspect the root of the problem is going to lie in HTML and therefore it's rendering engines being originally intended for document semantics as opposed to layout/printing semantics. CSS is exceptionally good at describing paragraphs, headings, and all kinds of document concerns and really weak when it comes to the larger DTP layout tasks which everyone now wants their websites to be.

In a nutshell: I think the problem is that HTML is being tasked for things it was not intended for. Quel surprise.

Making top and bottom vertical alignment coexist on the same page - MS Word 2010

you can

• hijack the footnote functionality (ugly but effective) and play with the footnote styles
• insert a text box and position it absolutely (that's what a textbox should be used for) in Word2010 look in Insert ribbon, Text section, Text Icon

What is the benefit of using span versus using col to display objects in grid like structures?

<span> is a generic inline container wich has no semantic meaning and is normally just used for styling.
Here‘s a guide for span.

<col> on the other side is used to define a column in a table and semantics on all cells. It should not be used outside of a <table> element.
Here‘s a guide for col.

<row> is not a valid html element?! There‘s <tr>, wich defines a row in a table and should also only be used in a <table> element, but <row> doesn’t exist. Here‘s a guide for tr.

Overall, you don’t use <col> and <tr> for anything other than tables and <span> for everything else. I would say, it’s a very easy element to use, because you don’t need to add required attributes or anything and it has no semantic meaning.

You wrote in your post, that you want to create grid (-like) structures. For anything like this, just use a <div> container and the css property display: grid;. A guide to grid can be found here.

2 boxes of same height (percentage)

See the Example Here

---

If that is what you are looking for, here is more:

CSS:

  #parent{
    width:205px;
    height:200px;
    border:1px solid #000000;
    overflow:auto;
  }

  #child1{
    height:40%;
    background:#00ff00;
    float:left;
  }

  #child2{
    height:40%;
    background:#0000ff;
    float:left;
  }  

The Important Points:

• The float:left is used to align the two boxes side-by-side
• The height is specified in % for both child boxes so that they inherit from their parent.

HTML:

  <div id="parent">
    <div id="child1">
        This is first box
    </div>
    <div id="child2">
        This is second box
    </div>
  </div>

Most difficult programming explanation

Thread Synchronization and Dead-Locking.

---

Related Topics