Unable to align a Div on the left margin. Any help much appreciated

HTML & CSS
1

Hey all. Im brand new CSS user. I do have an issue with a basic layout Id love to solve. If Anyone can help please see code below.

My question relates to “why am I unable to make the <div> sit flush left against the left margin of the page”. Im really just experimenting and learning, so any feedback whenever someone has time would be greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Inline Styles</title>

<style type="text/css">

p {
  margin-bottom: 0;
   }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }
  
p.stb { text-indent: 10px; margin-top: 0.83em; }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }

ul
{
	list-style-type:none;
	clear: none;
	float: none;
	height: 50px;
	width: 400px;
	margin-top: 30px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: px;
} 

ul li{
display: inline;

}

ul li a{
	text-decoration: underline overline;
	color: #FFF;
	background-color: #333;
	padding: 15px;
	margin: 5px;
	
	}
	
	ul li a:hover {
	background-color: #F5BE37;
	color: #FFF;
	}
	
#main{
	width: 700px;
	margin-right: 0px;
	padding: 10px;
	font-family:Arial, Helvetica, sans-serif;
	color:#F6C;
	font-weight:bold;
	line-height:1.3em;
	font-size:14px;
	display: block;
	float: left;
}

</style>

</head>

<body>
<h1 style="font-family: Georgia, 'Times New Roman', Times, serif; color: #006699;">Inline Styles and various CSS</h1>

<p class="stb">Heres my notes, as I learn new things about CSS. I have recently registered with Sitepoint and hope Ill gain some worthwhile knowledge by sharing my first ventures into this world. I have been working as a print designer for 20 years. More recently, I have worked on Flash banners and Email newsletters, or EDMs. 

Im going to add an inline or local style  to the heading using Dreamweaver. Here lies the content of my page. I am going to insert more copy as my ability grows. <p>


</p>


<ul class="navbar">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Folio</a></li>
    <li><a href="#">Contact</a></li>
</ul>
  
<div id="main"> 
Here's a DIV. HTML 5 calls this a section, which is a better name. A DIV is a division in the page and is an appropriate object to apply a class. </div>
2

Hi RaveyDavey. Welcome to the forums. :slight_smile:

The problem here is that you have the div inside a <ul>, which isn’t allowed. The <ul> has dafault padding to the left, which is pushing the div over.

So the first thing to do is take that div out of the <ul>. Also, you can’t have one <ul> directly inside another either. It must at least sit inside the <li> of the parent <ul> … although you don’t need that here anyway.

As another tip, when making a page layout, it’s a good idea to have a container for all your content in a section, rather than to have <p>, <ul>s etc just sitting in the <body>. This will become more apparent if you want to set a width on your content and not have it stretch across the whole screen. :slight_smile:

3

thankyou, Ill give that a go. Much appreciated.

David

4

No probs. Do post back if you have any troubles. I realize my answer wasn’t as specific as it could have been. :slight_smile:

5

No that worked - you were very specific. obviously, a nav bar would come earlier in a page anyway, so, despite the finishing </ul> tag, the div was still part of the first ul right?. And there was no need for the first ul anyway.

Adding the containe rmakes sense - like giving your page a boundary to work within.

thanks again, Im getting this slowly.

David

6

Yes. :slight_smile:

And there was no need for the first ul anyway.

No, that’s right.

Adding the container makes sense - like giving your page a boundary to work within.

Yes, that’s standard on web pages. In most browsers, you can right click Inspect Element to see under the hood of the web page. It’s very useful, as you see how pages are constructed. Typically, sections of a site (and sometimes the whole thing) are grouped inside containers for styling purposes.