CODEWITHSUNDEEP
htmlcss
Steve Gaines
Steve Gaines

Reputation: 601

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>

Upvotes: 0

Views: 54

Answers (1)

TylerH
TylerH

Reputation: 21070

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.).

Upvotes: 1

Related Questions