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

Avatar of undefined
Last Comment
YZlat

8/22/2022 - Mon
Kyle Hamilton

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

YZlat

ASKER
but how do I make aside displayed under section?
Kyle Hamilton

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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
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
Kyle Hamilton

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
YZlat

ASKER
Thanks, I will try that on Monday
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
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Kyle Hamilton

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

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

ASKER
I resized it to below 500px and aside stayed to the right of the content at all times
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
YZlat

ASKER
Yay! That worked. Thank you!