HTML5 and CSS3 question - positioning aside on resize

I have a web page designed using HTML5 and flexible box model in CSS3. My page has one section with 2 articles and aside. Section size is not specified and it is resized automatically when the page is resized. Aside tag is on the right hand side of the page and what i want to accomplish is to move contents of aside UNDER section whenever page is resized by the user to make it narrow. Is it possible to accomplish using CSS3?
LVL 35
YZlatAsked:
Who is Participating?
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
remove the -webkit-box from #sub_content when the window reaches a certain max-width:

for example:

@media all and (max-width:500px) { 
             #sub_content {
             display: block;
            }
        }

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
Yes. You would need to use a media query.

For example: When window reaches below 500px wide, set some rules for the aside element.

@media all and (max-width:500px) { 
    aside{
      /* whatever you need here. Probably: */ 
      display:block;
      float:none;
    }
 }

Open in new window

0
 
YZlatAuthor Commented:
but how do I make aside displayed under section?
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Kyle HamiltonData ScientistCommented:
I would have to see your code. But I'm guessing you have it floated right now, so set float to none, but it's just a guess. Need to see your markup.
0
 
YZlatAuthor Commented:
Here is sample html:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>HTML5</title>
	<link rel="stylesheet" href="main4.css">
</head>
<body>
<div id="content">
	<header>
		<h1>HTML5</h1>
	</header>
	<nav>
		<ul>
			<li>Home</li>
			<li>Test</li>
			<li>Links</li>
		</ul>
	</nav>
	<div id="sub_content">
	<section>
		<article>
			<header>
				<hgroup>
					<h1>Title of an article</h1>
					<h2>Subtitle for an article</h2>
				</hgroup>
			</header>
			<p>Test paragraph</p>
			<footer>
				<p> - written by ...</p>
			</footer>
		</article>
		<article>
			<header>
				<hgroup>
					<h1>Title of an article2</h1>
					<h2>Subtitle for an article2</h2>
				</hgroup>
			</header>
			<p>Another Test paragraph</p>
			<footer>
				<p> - written by ...</p>
			</footer>
		</article>
	</section>
	<aside>
		<h4>News</h4>
		Test aside
	</aside>
	</div>
	<footer id="main_footer">Copyright @ 2012
	</footer>
</div>
</body>
</html>

Open in new window


and here are the contents of css file:

@media all and (max-width:500px) { 
    aside{
      /* whatever you need here. Probably: */ 
      display:block;
      float:none;
    }
 } 


h1{
	font: bold 20px Tahoma;
}

h2{
	font: bold 14px Tahoma;
}

header, section, footer, aside, nav, article, hgroup{
	display: block;
}

body{
	width: 100%;
	display: -webkit-box;
	-webkit-box-pack: center; }

#content{
	max-width: 1000px;
	margin: 20px 0px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-box-flex: 1; 
}

#sub_content{
	display: -webkit-box;
	-webkit-box-orient: horizontal;
}


nav{
	border: red;
	background: blue;
	color: white;
}

nav li{
	display: inline-block; 
	list-style: none; 
	padding: 5px;
	font: bold 14px Tahoma;
}

section{
	border: 1px solid blue;
	-webkit-box-flex: 1;
	margin: 20px;
	padding: 20px;
}
aside{
	border: 1px solid red;
	width: 220px;
	margin: 20px 0px;
	padding: 30px;
	background: #CC6666;
}

#main_footer{
	text-align: center;
	padding: 20px;
	border-top: 2px solid blue;
}

Open in new window

0
 
YZlatAuthor Commented:
Thanks, I will try that on Monday
0
 
YZlatAuthor Commented:
I tried

@media all and (max-width:500px) { 
   #sub_content{
	display: block;
	}

 } 

Open in new window



but it didn't do anything, I am still having the same issue
0
 
Kyle HamiltonData ScientistCommented:
It worked for me with the code you posted originally. Make sure you are resizing your browser to under 500 px.

Can you post a link to your page?
0
 
YZlatAuthor Commented:
I don't have a link, it is on my hard drive
0
 
YZlatAuthor Commented:
I resized it to below 500px and aside stayed to the right of the content at all times
0
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
try putting the media query at the bottom of your css file and let me know if that helped.
0
 
YZlatAuthor Commented:
Yay! That worked. Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.