flexible box

+2 Eddie Davis · July 25, 2014
I cannot get my side bars to float right in the flexible box. Here below is the css. Also Internet explorer will not read my css.

Can anyone help? I am using Google Chrome.

I also cannot get my two articles to be separate.

Thanx,
Eddie
==============================================================================
flex.css

*  {

 margin:0px;
 padding:0px;
}
A:link, A:visited, A:active {
 text-decoration: none;
 color: #F0E68C;
}
 A:hover {
 text-decoration: none;
 color: #C76114;
}
h1{
 font: bold 20px tahoma;
}
h2{
 font: bold 14px tahoma;
}
p {
 font: bold 14px times new roman;
}
/*
some browsers don't recognize the HTML5 coding & some browsers treat as inline elements.
rule for compatibility for all browsers
*/ 
header, section, footer, aside, nav, article, hgroup {
 display:block;
}
body{
 margin-top: 15px;
 width:100%;
 display:-webkit-box;
 -webkit-box-pack: center;  /* align everything inside the box the children of the parent */ 
 background: black;
}
#body_wrapper {
 max-width: 1000px;
 background: #363636;
 border: 2px solid black;  
 margin: auto;
 display:-webkit-box;
 -webkit-box-orient: vertical;  /* this will place the children on the parent left to right or top to bottom */
 -webkit-box-flex: 1;  /* this will let the web page shrink or grow one is flexible and zero is fixed*/   
}
#top_header {
 background: #363636;
 font:  bold 20px tahoma;
 color: white;
 text-align: center; 
}
#page_header {
 font:  bold 18px tahoma;
 text-align: center;
 color: #E8E8E8;
}
#nav_menu {
 background: #363636;
 text-align: center;
 color:white;
 font: 12px tahoma;
}
#nav_menu li {
 display:inline-block;
 padding: 5px;
 list-style:none;
}
#flex_main {
 display:-webkit-box;
 -webkit-box-orient:horizontal;   
}
#main_section {
 background: #B7B7B7;
 -webkit-box-flex: 1; /* 1 will flex & 0 will be for fixed */
 margin: 10px;
 padding: 10px; 
}
#article {
 margin-bottom: 10px;
}
#rticle_footer {
 text-align: right;
}

#side_bar {  
 background: #B7B7B7;
 width: 220px;
 margin: 10px;
 padding: 10px; 
}
#main_footer {
 text-align: center;
 background: #363636;
 color:white;
 font: bold 12px tahoma;
 padding: 10px;
}
==============================================================================
box.css

*  {

 margin:0px;
 padding:0px;
 border:0px;
 }
A:link, A:visited, A:active {
 text-decoration: none;
 color: #F0E68C;
}
 A:hover {
 text-decoration: none;
 color: #C76114;
}
/*
some browsers don't reconize the HTML5 coding & some bowsers treat as inline elements.
rule for compadability for all browsers
*/ 
header, section, footer, aside, nav, article, hgroup {
 display:block;
}
body {
 text-align:center;
 background: black;
 font: bold 14px tahoma; 
 line-height: 1.5;
}
#page_header {
 text-align:center;
 font: bold 16px tahoma;
}
 
h1 {
 font: bold 20px tahoma;
}
h2 {
 font: bold 14px tahoma;
}
p {
 font: bold 14px times new roman;
}
#body_wrapper {
 border: 1px solid black;
 background: #363636;
 width:1000px;
 margin:15px auto;
 text-align:left;
}
#top_header {
 background: #363636;
 font:  bold 20px tahoma;
 color: white;
 text-align: center; 
}
#nav_menu {
 background: #363636;
 text-align: center;
 color:white;
 font: 12px tahoma;
}
#nav_menu li {
 display:inline-block;
 padding: 5px;
 list-style:none;
}
#main_section {
 float: left;
 width:710px;
 margin:5px; /* 640px+30px+30px=720px remaining total 300px for side bar you will need to account for borders pixles as well*/
 padding: 8px; 
}
article {
 background: #B7B7B7;
 padding: 10px;
 -webkit-border-radius:25px solid black; 
 margin-bottom: 10px; /* this will give the margin on the bottom beteween the articles */  
}
#article_footer {
 text-align: right;
 font: bold 12px tahoma; 
}
#side_bar {
 float:right; 
 width: 230px;
 margin: 10px 0px; /* top & bottom margin */
 margin-right: 10px;
 padding: 10px;
 background: #B7B7B7;
}
#main_footer {
 Clear:both; /* this will clear the main section & side bar when items are floating and set it below them both*/
 text-align: center;
 background: #363636;
 color:white;
 font: 12px tahoma;
 padding: 10px;
}


==============================================================================
HTML

<!DOCTYPE html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Eds Graphics 40</title>
        <link rel="stylesheet" href="box.css" />   
</head>

<body>
<div id="body_wrapper">
 
 <header id="top_header">
<table width="100%" cellspacing="3" cellpadding="3">
  <tr>
    <td width="200" height="35">Edz Graphicz 40 </td>
    <td width="85%" height="161" rowspan="3"><div align="center"><img src="images/scenery/blackfoot-river.gif" alt="blackfoot river, blackffot, idaho" width="100%" height="231"></div></td>
  </tr>
  <tr>
    <td width="200" height="35">Home</td>
    </tr>
  <tr>
    <td width="200" height="161"><img src="images/logos/logo2.jpg" alt="edsgraphics40.org" width="200" height="161"></td>
    </tr>
</table>
 </header>
 <nav id="nav_menu">
  <ul>
   <li><a href="metclub.com" target="new">Home</a></li>
   <li>About Me</li>
   <li>Portfolio</li>
   <li>Your Local</li>   
   <li>Contact</li>
  </ul>
 </nav>
 
<div id="flex_main">
 <section id="main_section">
  <article>
   <header>
    <hgroup>
     <h1>Title of Article</h1>
     <h2>Subtitle of Article</h2>
    </hgroup>
   </header>
    <p>lesson 14</p>
   <footer id="article_footer">
    - Metal-Edica
   </footer>
  </article>
  <article>
   <header>
    <hgroup>
     <h1>Title of Article 2</h1>
     <h2>Subtitle of Article 2</h2>
    </hgroup>
  </header>
   <p>2nd This Web Page is going to rock your world</p>
   <footer id="article_footer">
    - Metal-Edica
   </footer>
  </article>
 </section>
 <aside id="side_bar">
  <h3>News</h3>
  <p>The news section</p>
 </aside>
</div>
 <footer id="main_footer">
  Edz Graphicz 40 © 2013 -
  <script type="text/javascript">
 var theDate=new Date()
 document.write(theDate.getFullYear())
 </script>
 ** except where noted
 </footer>
</div>
</body>
</body>
</html>




The box css works fine

but

the flex works fine now that I took the second aside out, but I cannot get the two articles to separate now.

IE 11 does not read either css (flex version or box version)

Post a Reply

Replies

Oldest  Newest  Rating
+1 Franz Schmidt · July 26, 2014
The problem is that you took the color of the background to the main_section instead to the article

And the code of the box.css worked fine on IE :ermm: (also on Firefox)


<!DOCTYPE html>
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Eds Graphics 40</title> 
<!--<link rel="stylesheet" href="flex.css" />-->

<style type="text/css">
*  {
margin:0px;
padding:0px;
}
A:link, A:visited, A:active {
text-decoration: none;
color: #F0E68C;
}
A:hover {
text-decoration: none;
color: #C76114;
}
h1{
font: bold 20px tahoma;
}
h2{
font: bold 14px tahoma;
}
p {
font: bold 14px times new roman;
}
/*
some browsers don't recognize the HTML5 coding & some browsers treat as inline elements.
rule for compatibility for all browsers 
*/ 
header, section, footer, aside, nav, article, hgroup {
display:block;
}
body{
margin-top: 15px;
width:100%;
display:-webkit-box;
-webkit-box-pack: center;  /* align everything inside the box the children of the parent */ 
background: black;
}
#body_wrapper {
//max-width: 1000px;
width:1000px;
min-width:650px;
background: #363636;
border: 2px solid black;  
margin: auto;
display:-webkit-box;
-webkit-box-orient: vertical;  /* this will place the children on the parent left to right or top to bottom */
-webkit-box-flex: 1;  /* this will let the web page shrink or grow one is flexible and zero is fixed*/   
}
#top_header {
background: #363636;
font:  bold 20px tahoma;
color: white;
text-align: center; 
}
#page_header {
font:  bold 18px tahoma;
text-align: center;
color: #E8E8E8;
}
#nav_menu {
background: #363636;
text-align: center;
color:white;
font: 12px tahoma;
}
#nav_menu li {
display:inline-block;
padding: 5px;
list-style:none;
}
#flex_main {
display:-webkit-box;
-webkit-box-orient:horizontal;   
}
#main_section {
//background: #B7B7B7;
-webkit-box-flex: 1; /* 1 will flex & 0 will be for fixed */
margin: 10px;
padding: 10px; 
}
#side_section {
-webkit-box-orient:vertical;   
}
#article {
background: #B7B7B7;
padding: 10px;
margin-bottom: 10px;
}
#article_footer { //you forgot the a at article
text-align: right;
}

#side_bar {  
background: #B7B7B7;
width: 220px;
margin: 10px;
padding: 10px; 
}
#main_footer {
text-align: center;
background: #363636;
color:white;
font: bold 12px tahoma;
padding: 10px;
}
</style>
</head>

<body>
<div id="body_wrapper">
<header id="top_header">
Eds Graphics 40
<table width="100%" cellspacing="3" cellpadding="3">
<tr>
<td id="page_header" width="210">Home</td>
<td rowspan="2"><img src="images/scenery/blackfoot-river.gif" alt="blackfoot river, blackfoot, idaho" width="100%" height="200"></td>
</tr>
<tr>
<td height="161"><div align="center"><img src="images/logos/logo2.jpg" alt="edsgraphics.org" width="200" height="161"></div></td>
</tr>
</table>
</header>
<nav id="nav_menu">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Portfolio</li>
<li>Your Local</li>   
<li>Contact</li>
</ul>
</nav>
 
<div id="flex_main">
<section id="main_section">
<article id="article">
<header>
<hgroup>
<h1>Title of Article</h1>
<h2>Subtitle of Article</h2>
</hgroup>
</header>
<p>lesson 14</p>
<footer id="article_footer">
- Metal-Edica
</footer>
</article>
 
<article id="article">
<header>
<hgroup>
<h1>Title of Article 2</h1>
<h2>Subtitle of Article 2</h2>
</hgroup>
</header>
<p>2nd This Web Page is going to rock your world</p>
<footer id="article_footer">
- Metal-Edica
</footer>
</article>
</section>
<section id="side_section">
<aside id="side_bar">
<h3>News</h3>
<p>The news section</p>
</aside>
 
<aside id="side_bar">
<h3>News 2</h3>
<p>The news section</p>
</aside>
</section>
</div>
<footer id="main_footer">
© [ Edz Graphicz 40 ] 2013 - 
<script type="text/javascript">
var theDate=new Date()
document.write(theDate.getFullYear())
</script>
** except where noted
</footer>
</div>
</body>
</html>



Though the flex.css won't work on IE and also won't work on Firefox, because those browsers don't support the -webkit box model, they have their own flexible box model:
http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

And please use code tags :angel:
0 Eddie Davis · July 26, 2014
First of all thanks,

And, thanks for letting me know about the "a" in article.

I see that you put the script back into the HTML doc instead of a CSS link. Does IE recognize the HTML doc better than the CSS? On my computer it does view better the script into the HTML doc. When I take it out IE does not read it.
0 Eddie Davis · July 26, 2014
Sorry I did not see your comments below the codes, a lot of nice info, thanks.

I am new to this newer technology so I am not being rude, what do you mean by code tags?
+1 Franz Schmidt · July 27, 2014
http://s1.directupload.net/images/140727/fpn8vjky.png

There is a button when you click it you get a textbox, where you can insert your code
0 Eddie Davis · July 27, 2014
Thanx I never knew what that was for.
  • 1

HTML / CSS / Web Design

107,232 followers
About

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

Links
Moderators