Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

HTML5 and CSS3 question - positioning aside on resize

Posted on 2012-07-03
12
Medium Priority
?
1,646 Views
Last Modified: 2012-07-09
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?
0
Comment
Question by:YZlat
  • 7
  • 5
12 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38149011
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
 
LVL 35

Author Comment

by:YZlat
ID: 38149079
but how do I make aside displayed under section?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38149107
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 35

Author Comment

by:YZlat
ID: 38149461
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 1200 total points
ID: 38149827
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
 
LVL 35

Author Comment

by:YZlat
ID: 38161679
Thanks, I will try that on Monday
0
 
LVL 35

Author Comment

by:YZlat
ID: 38166324
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38166459
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
 
LVL 35

Author Comment

by:YZlat
ID: 38166778
I don't have a link, it is on my hard drive
0
 
LVL 35

Author Comment

by:YZlat
ID: 38166802
I resized it to below 500px and aside stayed to the right of the content at all times
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 1200 total points
ID: 38167771
try putting the media query at the bottom of your css file and let me know if that helped.
0
 
LVL 35

Author Closing Comment

by:YZlat
ID: 38167830
Yay! That worked. Thank you!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

876 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question