Alternatively I put this together. Box-sizing is still better I guess. Although I understand how mine works more which is important. Paul which IE versions does box sizing work in? I guess I just need IE9 and up preferably.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.section {
overflow:hidden;
width:959px;
line-height:1.8;
border:1px solid #000;
border-bottom:0;
}
.section h3 {
text-align:center;
background:#ccc;
border-bottom:1px solid #000;
padding:4px;
}
h3, p {
margin:0;
}
.cell + .cell {
border-left:1px solid #000;
}
.row {
border-bottom:1px solid #000;
}
.row, .cell {
float:left;
}
.one {
width:100%;
}
.two span {
width:474px;
}
.three span {
width:314px;
}
.one, .two span, .three span {
padding-left:5px;
}
</style>
</head>
<body>
<div class="section">
<h3>Sewer/ Septic</h3>
<p class="row two">
<span class="cell">Billing is currently in owners name Yes No </span>
<span class="cell">Billing is currently in tenants name Yes No</span>
</p>
<p class="row two">
<span class="cell">Mains water shut off location</span>
<span class="cell">Is the water currently on Yes No </span>
</p>
<p class="row one">Water company Name:</p>
<p class="row one">Payment address</p>
<p class="row three">
<span class="cell">Payment amount: $</span>
<span class="cell">Payment Due Date:</span>
<span class="cell">Account #:</span>
</p>
</div>
</body>
</html>
Box-sizing works back to IE8 and is the reason I use it as a starting point for all my sites these days.
Yes that will work but is very fragile and means you have to work out widths for items so if you change or zoom text and the text moves on to two lines the whole thing breaks. And of course cannot be a fluid width as in my example.
The benefits of table-cell is that everything becomes automatic especially when dealing with unknown content (as you said you had 10 pages like this) and you never have to worry about widths of the cells or content wrapping as that is all handled seamlessly by the cell.
It also means the page can be fluid or fixed width no problems and can easily be turned into one column for mobile by simply setting the cells to block. No widths or floats to worry about or clear or contain.
Cool beans thanks Paul. I’m using your box sizing way. Just messing with it to make sure. I zoomed it before and the float version does seem to handle it the same as box sizing - just goes down to two lines. But as you said your is more fluid.
I see you are correct there. me crying time wasted lol. However, based on matts video here on the subject I feel as a stretch its worth my time. I’ve gone to far to turn around anywho.
The question asked is does google serve pdf or html of the same thing. Google says… “they make their best guess and its not a exact science. More of an art”
