HTML5 Finishing the flexible box model layout

+1 David Amanquah · January 29, 2015
pls can somebody paste  the code for HTML5  tutorial 16

Post a Reply

Replies

Oldest  Newest  Rating
0 Brendan Murphy · April 6, 2015
Hi
I'm having the same problem
both my boxes are lining up below each other.

Can anyone help where am I going wrong????


This is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title Application</title>
<link rel="stylesheet" href="css/style.css" />

</head>

<body>
<div id="big_wrapper">

<header id="top_header">
<h1> Application.</h1>
</header>

<!-- Navigation Top Menu -->
<nav id="top_menu">
<ul>
<li>
<a href="index.html" title=" Application." class="active">
Home
</a>
</li>
<li>
<a href="about.html" title="Find out more about Application.">
About
</a>
</li>
<li>
<a href="news.html" title="Latest News a.">
News
</a>
</li>
<li>
<a href="menu.html" title="Options for s Application.">
Menu
</a>
</li>
</ul>
</nav>


<div id="new_div" >
<section id="main_section">
<article>
<header>
<hgroup>
<h1> Title of Article</h1>
<h2>Subtitle of Article</h2>
</hgroup>
</header>
<p> This is the best article</p>
<footer>
<p> writter by me</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1> Title of 2nd Article</h1>
<h2>Subtitle of Article</h2>
</hgroup>
</header>
<p> This is the best article</p>
<footer>
<p> writter by me</p>
</footer>
</article>
</section>

<aside id="side_news">
<h4> Assistance</h4>
Any help ypou need is here
</aside>
</div>


<!-- Footer -->
<footer id="the_footer">
Footer details
</footer>

</div>
</body>
</html>

/****************************/
the css code is here


/*************************
Main Styling
*************************/
h1 {
font: bold 20px Tahoma;
}
h2 {
font: bold 14px Tahoma;
}
body {
width:100%; /* needed for flexible box size*/
display:-webkit-box;
-webkit-box-pack: centre; /*centre the website */
line-height: 1;
background: #FFF7C9;
color: #636363;
padding-top: 15px;
font-family: Tahoma, Helvetica Neue, Helvetica, Arial, sans-serif;
}
#big_wrapper {
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
-webkit-box-orient: vertical; /* treat as a block element */
-webkit-box-orient-flex: 1;
padding: 0 15px;
}
top_header {
background:blue;
border: 2px solid black;
padding:20px;

}
#top_menu{
border: ;
background: ;
color:white;
}
#top_menu li{
display:inline-block; /* display side by side */
list-style:none;
padding:5px;
font: bold 14px Tahoma;
}
#new_div{
display: -webkit-box;
-web-kit-box-orient: horizontal;
}
#main_section{ /* flexible box */
border: 1px solid blue;
-web-kit-flex: 1;
margin: 20px;
padding: 20px;
}
#side_news{ /* not flexible box */
border: 1px solid black;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: centre;
padding: 20px;
border-top: 2px solid black
}
0 Brendan Murphy · April 6, 2015
Hi all,
Fixed the problem.

Found the answer here:

https://www.thenewboston.com/forum/topic.php?id=2180">https://www.thenewboston.com/forum/topic.php?id=2180
  • 1

HTML / CSS / Web Design

107,070 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators