Link to home
Start Free TrialLog in
Avatar of YZlat
YZlatFlag for United States of America

asked on

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?
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

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

Avatar of YZlat

ASKER

but how do I make aside displayed under section?
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.
Avatar of YZlat

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of YZlat

ASKER

Thanks, I will try that on Monday
Avatar of YZlat

ASKER

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
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?
Avatar of YZlat

ASKER

I don't have a link, it is on my hard drive
Avatar of YZlat

ASKER

I resized it to below 500px and aside stayed to the right of the content at all times
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of YZlat

ASKER

Yay! That worked. Thank you!