The real question is: Why are you floating everything?
There are many far better ways to create a page layout these days that don’t involve having to clear floats.
Though I will looks at some of the specific questions when I’ve had a closer look at the code.
To answer the meta-question, for now I need to post a minimal version of my website to accomplish a couple of goals for my business. I plan to restyle.
To note, I attempted to re-code the site using display: table, following examples from a sitepoint book I bought a few years back. I was careful and strict about the code structure, following the example to the detail and it did not work. I wasted several hours trying to get it to work based on that book and finally ran out of time.
As is, my website is up and functioning without the border styling, but I’d like to add style as I have the time.
Guessing at your intended layout, many elements have 100% width. It’s worth noting that the default width of block objects is auto which pretty much means “fill the container width, accounting for margins and padding” which is actually a lot more useful than 100%.
So given this, there is no need for floats, they will only cause you unnecssary complications.
Since you don’t appear to have columns, I don;t see the need for display table either, though I maybe don’t really know your intended layout.
As I suspected, the floats need to be cleared, that needs a “clearfix” to contain it.
I’m not sure what you mean.
Though I still doubt you need any flots here. But if you can supply a simple sketch of the intended layout, I’m sure a better solution could be offered.
Thanks again. As I read your response, I realize that my floats were a relic from my old 3-column structure. So… I’ll remove them and see how that works, at least for the version for mobile devices. In terms of the clearing, thanks for clarification on that. When applying floats to the two-column version for laptops (yet unwritten), I’ll rethink through all those clearing and width issues and then rethink the design and layout. I really appreciate your thoughts on this.
For multi column layouts, floats are mostly considered a thing of the past. There are several options depending on the type of column behaviour you want. There is flex-box, grid, columns, inline-blocks and display table you know about and is proven to work, so if you can’t get it working, I’m sure you could get help.
Again, the modern way is not to have separate versions, but to have a fluid design, then throw in a media query where necessary to adjust the layout to a different screen size.
For sure I’ll be using media queries with separate css files, maybe three versions.
For the wider screens, I"ll use two maybe three columns. The outside columns will merely serve to hold some images, links and quotations that won’t display for the mobile device or will display below the fold. Perhaps I should revisit the css tables for that. I’ll look around to see if I can find some useful literature on them.
The site will remain minimal for a couple of years as I build the business (which is not IT related). After that, if I decide to build it up, I’ll pay a local developer to build it up.
The site merely lists my professional services (ecosystem design and education) and information pertaining to those services and to my background. I don’t sell anything from it, and most of my work will come from referrals. I’ll always strive for a minimalist theme.
Just to clarify the issue is more to do with float containment although most people refer to it as clearing.
In simplest terms a float is removed from the flow so if a container contains only floats the container will actually be zero height and any border on the container will be collapsed to the top of the container.
The clearfix technique (google it) will ensure that a container is aware of its floats and encompass them. It’s actually something that we do not need to do these days because there are much better and more robust methods around than using floats
PaulOB,
Thank you for helping me clarify the issue. I had forgotten that unfloated elements or text within the flow defines the height for the containing element. (I haven’t had need to do this work many years.) That pretty much clears my head on the issue (if you’ll excuse…).
I have re-read about float containment in my css refs and the material on clearfix to get up this basic version.
However, if I might bother you with two more questions. Given the logic, it seems to me that not floating the footer div will accomplish what I need, and it seems to work with the border. Will this create unforeseen problems on other browsers than FF?
With both solutions – group:after and removing the float display from the footer – a color I’ve applied to the containing element (div) does not present above, below or to the left of the container element – only to the right. Why is that?
I will revisit css tables next round and leave behind these floats, asap. In this case, they’re not even necessary as SamA74 told me. Again, thanks to all.
Yes if you don’t float the footer but you make it clear:both then that takes the place of the clearfix element and will allow the container to stretch around the footer.
I don;t see that happening once you’ve contained the floats so I may be misunderstanding. Can you post a demo of this behaviour?
With the footer non floated if I add a red background to #page it shows all across the page and to the height of the content. If I apply a green background to #container it fills the whole left section (300px wide) as expected.
The red is as tall as the green. Why would you think that the red will show above and below?
The red container is only as tall as it’s content and it’s content is clearly shown by the green container. You will not see any red above or below unless you had content there or something solid like padding top and bottom on #page.
Is that what you meant or did I misunderstand?
For the html you have shown the css only needs to be this.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
#page {
background-color: red;
}
#container {
width: 200px;
border: solid 1px;
font-size: 1.25rem;
background-color: green;
}
.maincontent p {
margin: 1em;
}
#nav {
list-style-type: none;
font-weight: bold;
margin:1em;
padding:0;
}
</style>
</head>
<body>
<!-- PAGE -->
<div id="page">
<!-- CONTAINER -->
<div id="container">
<!-- MAIN CONTENT #1 -->
<div class="maincontent">
<p> Main Content </p>
</div>
<!-- END OF MAIN CONTENT -->
<!-- NAVIGATION -->
<ul id="nav">
<li> Link </li>
</ul>
<!-- END NAV -->
<!-- FOOTER -->
<div id="footer"> Footer </div>
<!-- END FOOTER -->
</div>
<!-- END CONTAINER -->
</div>
<!-- END PAGE -->
</body>
</html>
Thanks for showing me how to get the code syntax right.
Also, thanks for replying and helping me form a better understanding of these element relationships and behaviors. It clicked.
To note, I did not pose my question well. I should have asked, “why does my browser present a persistent white margin around my page div?” The answer is that the body element has a default border around it. That makes sense, too.
Not quite, usually it has a browser default margin 8px wide (it has varied through the years). The common fix is a reset rule (now adays the padding could be omitted):
Thanks for that. The article I found also omitted the padding in the body style, as you did. However, the solution did require padding around the container element, per PaulOB’s comment, to surround it with the color.
