Trouble with Aside in HTML5

0 Levi Molnar · October 2, 2015
Hi, I'm new on this forum and I have a question to ask. Why isn't my aside going to the side as it's supposed to do?
Here's what i've got on HTML. (Ignore the dutch text on the website, i'm supposed to build a basic website based on Bucky's tutorials for school, which is in The Netherlands.) Please don't be too harsh on my capability of writing code, since I'm only a newbie.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Website</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h3>Welkom op mijn website!</h3>
</header>
<nav id="top_menu">
<ul>
<li>HOME</li>
<li>GAMES</li>
<li>OPDRACHTEN</li>
</ul>
</nav>
<div id="new_div">
<section id="main_section">
<article id="first_article">
<header>
<hgroup>
<h1>Titel van artikel</h1>
<h2>Subtitel van artikel</h2>
</hgroup>
</header>
<p>Dit is artikel #1!</p>
<footer>
<p>-geschreven door mij</p>
</footer>
</article>
<article id="second_article">
<header>
<hgroup>
<h1>Titel van 2de artikel</h1>
<h2>Subtitel van 2de artikel</h2>
</hgroup>
</header>
<p>Dit is artikel #2!</p>
<footer>
<p>-geschreven door mij</p>
</footer>
</article>
<aside id="side_article">
<h1>Nieuws</h1>
Nieuws momenteel niet beschikbaar.
</aside>
</section>

</div>
<footer id="the_footer">
Copyright 2015 
</footer>
</div>
</body>
</html>


Couldn't add the code in normally for some reason, so here's a quote, it's missing all tabs though :(

This is what I've got on CSS:

*{
margin:0px;
padding:0px;

}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
h3{
font:bold 26px Tahoma;
color:white;
}
header, section, footer, aside, nav, article, hgroup{
display:block;
}
body{
background-image:url(body_background.png);
width:100%;
display:-webkit-box;
-webkit-box-pack:center;
}
#big_wrapper{
border:1px solid black;
background:white;
padding:15px;
max-width:1000px;
margin:20px 0px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;
-webkit-border-radius:20px;
-webkit-box-shadow:rgba(110,110,110,.6) 10px 8px 8px;
}
#top_header{
background:-webkit-radial-gradient(top right,ellipse,yellow,orange 10%,red 70%);
border:1px solid red;
padding:20px;
-webkit-border-radius:15px 15px 0px 0px;
}
#top_menu{
padding-left:10px;
padding-top:5px;
height:25px;
border:1px solid red;
border-top:1px solid white;
background:red;
color:black;
}
#top_menu li{
display:inline-block;
background:white;
border:1px solid black;
padding:1px 10px;
margin:0px 10px;
list-style:none;
font:bold 14px Tahoma;
}
#main_section{
border:1px solid black;
-webkit-box-flex:1;
margin-top:10px;
padding:20px;
-webkit-border-radius:0px 0px 15px 15px;
}
#first_article{
border:1px solid red;
-webkit-box-flex:1;
margin:2px;
padding:10px;
}
#second_article{
border:1px solid red;
-webkit-box-flex:1;
margin:2px;
margin-top:5px;
padding:10px;
}
#side_article{
border:1px solid red;
width:220px;
margin: 10px 0px;
padding: 30px;
background:white;
}
#the_footer{
text-align:center;
margin-top:10px;
}

Someone please help me! If you do help me, i shall reward you with the picture of a potato and a huge thanks.:D

Post a Reply

Replies

Oldest  Newest  Rating
0 Craig Charlton · October 2, 2015
Me I would totally re- write it and not use flex.... but as you seem to be a big fan I have done it that way..... I dont know where you are learning but be sure to declare your flexboxes correctly....

in your HTML wrap a div (id="article_wrapper")  around your articles... but not your aside.... this gives you 2 direct children of the main_section... (your new div and your aside)


 as you are using flex then if flex is declared right  "display: flex;" in the parent (main_section) the articles and the aside will now be side by side....

replace your #main_section   css with this

#main_section{
    border:1px solid black;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    margin-top:10px;
    padding:20px;
    -webkit-border-radius:0px 0px 15px 15px;
}



your 2 children (articles and aside) will now be side by side....

use css to style width and match up your margins you have already set to get them the same size...

if you wish then give your  #article_wrapper a css of {flex-grow: 2;}   this will make it twice the size of your aside....

work with your styling to get them set right.....

study this.... it is simple yet invaluable for flex-boxes
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
0 Levi Molnar · October 8, 2015
/images/forum/upload/2015-10-07/69cc6a88fe0277d811c741c653e9b633.png

Here ya go, didn't really have any potatoes at home, so here's a poorly drawn potato. Thanks for the help, especially the stuff about positioning the aside.
  • 1

HTML / CSS / Web Design

107,346 followers
About

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

Links
Moderators