Reputation: 601
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>© 2016 - Steve Gaines</p>
</div>
</footer>
</body>
</html>
Upvotes: 0
Views: 54
Reputation: 21078
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>© 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.).
Upvotes: 1