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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
Kyle HamiltonData 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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 HamiltonData 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.