New_Div Id not responding

+1 Benson Kanyi Gitonga · July 2, 2015
I have followed tutorial number 14 up to 16 about layout with flexibox model and copied everything according to the lessons. When I refreshed the page, the aside element did not position next to the section element as expected, but below it. I have tried to figure out the mistake but I find none. What could be the possible cause?

Post a Reply

Replies

Oldest  Newest  Rating
0 Ahsan Fayyaz · July 2, 2015
it would be easy to debug if you post your code here.
0 Jahanzaib Nadeem · July 2, 2015
facing the same difficulty !!

here is the code 
body{
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}

#top_header{
background: yellow;
border: 3px solid black;
padding: 20px;
}
#top_menu{
background: blue;
border: red;
color: white;
}

#top_menu li{
display:inline-block;
list-style:none;
padding: 5px;
font: bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
-webkit-box-orient: horizontal;
}
#main_section{
border: 1px solid blue;
-webkit-box-flex:1;
margin: 20px;
padding: 20px;
}
#side_news{
border:1px solid red;
width: 220px;
margin: 20px 0px 0px  500px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid green;
}
0 Benson Kanyi Gitonga · July 6, 2015
I have used a different  method and it worked(trial and error though). I used the style above but changed things a bit
with the new_div element. Instead of "display: -webkit-box;, I instead used "Display: inline-flex". Is this a legitimate way 
or is it bound to bring more problems later? My code now looks this way:

body{
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}

#top_header{
background: yellow;
border: 3px solid black;
padding: 20px;
}
#top_menu{
background: blue;
border: red;
color: white;
}

#top_menu li{
display:inline-block;
list-style:none;
padding: 5px;
font: bold 14px Tahoma;
}
#new_div{
display: inline-flex;
-webkit-box-orient: horizontal;
}
#main_section{
border: 1px solid blue;
-webkit-box-flex:1;
margin: 20px;
padding: 20px;
}
#side_news{
border:1px solid red;
width: 220px;
margin: 20px 0px 0px 500px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid green;
}
+1 Kaveh Greenwood · July 8, 2015
If you could share the HTML & CSS separately using the
 & [ / code ] forum tabs we could debug easy. Or have an example via jsfiddle.net
0 Benson Kanyi Gitonga · July 9, 2015
Thanks Kaveh Greenwood. Here is the HTML code

<!DOCTYPE HTML>
<HTML>

       <HEAD>
       <TITLE>The Flexibox Website Layout
       </TITLE>
               <meta charset="UTF-8">
               <Link Rel="stylesheet" Href="Flexiboxindexcss.css" Type="text/css">
       </HEAD>
       
       <BODY>
       
            <DIV ID="Big_wrapper">
       
              <HEADER ID="Top_header">
                       <H1>The Flexibox Website Layout</H1>
              </HEADER>
              
              <NAV ID="Top_menu">
                    <UL>
                         <LI><A HREF="index.html">Home</A></LI>
                         <LI><A HREF="indexa.html">About</A></LI>
                         <LI><A HREF="indexb.html">Flexibox module</A></LI>
                         <LI><A HREF="indexc.html">Affiliate Resources</A></LI>
                         <LI><A HREF="indexd.html">Members</A></LI>
                         <LI><A HREF="indexe.html">Support</A></LI>
                    </UL>
              </NAV>
              
              <DIV ID="new_div">
              
              <SECTION ID="main_section">
                        
                        <section class="sub_section">
                                 <HEADER>
                                         <H2>Our Policy Document</H2>
                                 </HEADER>
                                
                                
                                          <P>Paragraph Here</P>
                                          <P>Paragraph HERE</P>
                                          <P>Paragraph Here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                
                                
                                 <FOOTER>
                                        <P>Compiled And editted by B K Gitonga
                                 </FOOTER>
                        </section>
                        
                        <section class="sub_section">
                                 <HEADER>
                                         <H2>The New Animation Policy</H2>
                                 </HEADER>
                                
                                
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                          <P>Paragraph here</P>
                                
                                
                                 <FOOTER>
                                        <P>Compiled And editted by B K Gitonga
                                 </FOOTER>
                        </section>
              
              </SECTION>
              
              <ASIDE ID="side_news">
                    <H3>The news You will Find</H3>
                    <P>It is not ussual not to find news that is related
                    to the content you are writing down</P>
              </ASIDE>
              
              </DIV>
              
              <FOOTER ID="foot_note">
                      This Website Is Founded On The Principal Of Ethical Cyber Practice
              </FOOTER>
              
              </DIV>
       </BODY>
</HTML>


And this is the style:




Benson Gitonga · July 7, 2015
I have used a different method and it worked(trial and error though). I used the style above but changed things a bit
with the new_div element. Instead of "display: -webkit-box;, I instead used "Display: inline-flex". Is this a legitimate way
or is it bound to bring more problems later? My code now looks this way:

body{
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}

#top_header{
background: yellow;
border: 3px solid black;
padding: 20px;
}
#top_menu{
background: blue;
border: red;
color: white;
}

#top_menu li{
display:inline-block;
list-style:none;
padding: 5px;
font: bold 14px Tahoma;
}
#new_div{
display: inline-flex;
-webkit-box-orient: horizontal;
}
#main_section{
border: 1px solid blue;
-webkit-box-flex:1;
margin: 20px;
padding: 20px;
}
#side_news{
border:1px solid red;
width: 220px;
margin: 20px 0px 0px 500px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid green;
}
  • 1

HTML / CSS / Web Design

107,119 followers
About

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

Links
Moderators