5 Replies - 20687 Views - Last Post: 26 August 2010 - 05:57 AM

#1 CodyD  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 75
  • Joined: 19-August 10

align <aside> to left using CSS3

Posted 25 August 2010 - 02:47 PM

Okay, so I am messing around and learning HTML5 and CSS3 (:

I am making a basic layout in it (Much easier now, btw) and am trying to align the whole aside section to the left

Here is my code so far:

HTML:
		<aside id="sidebar"><!-- begin main.css #sidebar -->
		
		</aside><!-- End #sidebar -->


CSS:
#sidebar {
	width: 200px;
	height: 900px;
	

}



What do I need to use to align the whole <aside> section? I tried halign (found out it doesn't exist..) margin: auto (didn't work)

This is what it looks like:
Attached Image
(1440x900)

This post has been edited by CodyD: 25 August 2010 - 02:52 PM


Is This A Good Question/Topic? 0
  • +

Replies To: align <aside> to left using CSS3

#2 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: align <aside> to left using CSS3

Posted 25 August 2010 - 03:43 PM

Well, it does do what you are asking it to do. The problem isn't with what you are showing us. The problem is with the rest of the markup.
Was This Post Helpful? 0
  • +
  • -

#3 CodyD  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 75
  • Joined: 19-August 10

Re: align <aside> to left using CSS3

Posted 25 August 2010 - 03:51 PM

Here is the full HTML:

<!Doctype HTML>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> HTML 5 Site </title>
		<link rel="stylesheet" href="./CSS/main.css" type="text/CSS">
	</head>
	<body id="page-container">
		<header class="main-head">
			<hgroup>
				<h1> HTML 5 site </h1>
				<h3 id="tagline"> This is my tagline </h3> <!-- main.css #tagline -->
			</hgroup>
			<nav>
				<ul id="main-nav"><!-- begin main.css #main-nav -->
					<li class="current"><a href="#">Home</a></li>
					<li><a href="#">Products</a></li>
					<li><a href="#">About Us</a></li>
					<li><a href="#">Links</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>
			</nav><!-- End #main-av -->
		</header>
		<aside id="sidebar"><!-- begin main.css #sidebar -->
		
		</aside><!-- End #sidebar -->
		<section id="main-area"> <!-- begin #main-area -->
			This is the main area
		</section><!-- End #main-area -->
		
		<footer id="main-footer">
			<p id="copyright"> Copyright &copy; 2010 Cody Dostal </p>
			<p id="footer-nav"><a href="#">Home</a> &diams; <a href="#">Products</a> &diams; <a href="#">About Us</a> &diams; <a href="#">Links</a> &diams; <a href="#">Contact Us</a></p>
				</ul>
		</footer>
	</body>
</html>



Here is the full CSS:
header, nav, section, aside, footer {
	display: block;
}
#page-container {
	width: 900px;
	height: 1000px;
	margin: auto;
}
	
/* Page Elements */

.main-head {
	background: #458B00;
	height: 130px;
	width: 900px;
	margin-bottom: 10px;
	text-indent: 15px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}

#sidebar {
	width: 200px;
	height: 900px;
	float: left;
	background: pink;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	}

#main-area {
	background: #008000;
	height: 400px;
	width: 900px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	text-indent: 15px;
}

#main-footer {
	background: #3F9E45;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	text-indent: 15px;
}

#tagline {
	color: #CD0000;

}

#main-nav {
	list-style: none;
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
	
}
ul#main-nav li {
	display: inline;
}

#footer-nav {
	text-decoration: none;
}

#footer-nav a {
	text-decoration: none;
	color: #CFCFCF;
	font-style: italic;
}

#copyright {
	font-size: 9px;
	font-style: italic;
	text-align: right;
	color: #CFCFCF;
	padding-top: 2px;
	padding-right: 20px;
}
.current {
	
}


This post has been edited by CodyD: 25 August 2010 - 03:52 PM

Was This Post Helpful? 0
  • +
  • -

#4 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: align <aside> to left using CSS3

Posted 25 August 2010 - 07:29 PM

OK. So you said you wanted the whole aside section to align to the left. It is aligned to the left. So what's the problem?

btw, technically, case matters in the doctype, so it should be <!DOCTYPE html>. That's true everywhere but I don't recall if it's changed in HTML5. I'll look it up.

This post has been edited by drhowarddrfine: 25 August 2010 - 07:30 PM

Was This Post Helpful? 0
  • +
  • -

#5 CodyD  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 75
  • Joined: 19-August 10

Re: align <aside> to left using CSS3

Posted 25 August 2010 - 10:32 PM

I think it would be the same. I will change that.

Secondly, I want to be to the left of the other ones, not on top as it is. I want it to be like this:

___________
|         |       _________________________________
|         |       |                               |
|         |       |                               |
|  aside  |       |          main-Header          |
|         |       _________________________________
|         |
|         |       _________________________________
|         |      |                                |
|         |      |          main-content-area     |
|         |      |                                |
|         |      __________________________________
|         |      
|         |      __________________________________
|         |     |                                 |
|         |     |             Footer              |
|         |     |                                 |
___________     ___________________________________


Was This Post Helpful? 0
  • +
  • -

#6 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: align <aside> to left using CSS3

Posted 26 August 2010 - 05:57 AM

Packing to go out of town in an hour.

You need a containing div for 'aside' and the main area. Floating them left/right will work but I feel that's abusing the property. Don't have time to go into all that but look into relative/absolute positioning inside a relatively positioned div.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1