Steve Gaines Steve Gaines - 6 months ago 12
HTML Question

How to lay out my sections without using a table

I can force this layout with a table, but I think the best practice may be some display/float settings in CSS. I have a header and menu section that are working as desired. Below them are top, middle, and bottom sections that are wrapping ugly. The top section should have an image followed by a block of text. The middle section should have 3 equal blocks of text. The bottom (footer) should have 1 equal block of text. Is there a clean way to do this without stuffing it into a table? Here's what I'm doing so far and as I say it's ugly:



<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<header>
<span class="HeaderTitle">My header info</span>
</header>
<nav>
<!-- the menu is working fine -->
</nav>
<main>
<style>
.MyArticle
{
width: 30%;
display: inline-block;
float: left;
margin: 8px;
}
</style>
<div class="jumbotron">
<img src="/Images/Photo.jpg" style="border:solid 1px black; margin-right: 14px;" height="180px" align="left">
<p class="lead">Some text</p>
</div>
<br/>

<section id="MiddleSection">
<span class="MyArticle">
<h2>Current News</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
</section>
</main>

<footer>
<div>
<br />
<hr />
<p>&copy; 2016 - Steve Gaines</p>
</div>
</footer>
</body>
</html>




Answer

Here's one way. You just need to clear your floats, basically. Here's some reading on CSS Floats:

* {
    box-sizing: border-box;
}
.jumbotron img {
    border: solid 1px black;
    margin-right: 14px;
}
#MiddleSection {
    clear: left;
    margin: 0px auto;
}
.MyArticle {
    width: 33%;
    display: inline-block;
    text-align: center;
    background: grey;
}
footer {
    clear: left;
    text-align: center;
}
<header>
    <span class="HeaderTitle">My header info</span>
</header>
<main>
    <div class="jumbotron">
        <img src="/Images/Photo.jpg" height="180px" align="left">
        <p class="lead">Some text</p>
    </div>
    <br/>
    <section id="MiddleSection">
        <span class="MyArticle">
        	<h2>Current News</h2>
	        <p>Some text</p>
	    </span>
        <span class="MyArticle">
        	<h2>Something</h2>
	        <p>Some text</p>
	    </span>
        <span class="MyArticle">
        	<h2>Something</h2>
	        <p>Some text</p>
	    </span>
    </section>
</main>
<footer>
    <div>
        <br />
        <hr />
        <p>&copy; 2016 - Steve Gaines</p>
    </div>
</footer>

Though most people don't usually make content on their websites full-width (expand the Snippet to full screen to see what I mean).

Another way that's better/simpler for modern browsers is to use the Flexbox method (not really an option if you have to support IE8 or IE9, etc.).

Comments