0

So excuse my being very new and inexperienced in this, the answer is probably obvious.

For some reason the text in the "main-content" div in my layout (which will be the body) looks like its adding padding or something on the left, but I don't have any in the css. The container is the correct width and placement on the page, but all of the text in it starts 200px or so in, like every line has an indent.

I'm not sure why? Anyone have any idea? It's #main-content that is acting up, but I've included all of the code (minus the writing inside each section) in case it could be affecting it. I know, I know, I'm clueless. I'd just like it to be 1200px wide like the bg in #masthead, text filling the whole area.

    body {
         font-family: Georgia, "Times New Roman", Times, serif;
         color: #FFFFFF;
         background-color: #333333;
         padding: 0px;
         margin: 0px;}
    #container {
         background-color: #333333;
         width: 1200px;
         margin: 10px auto 10px auto;}
    #masthead {
         background-position: center;
         height: 500px;
         width: 1200px;
         background-image: url('banner.jpg');
         background-color: #ffffff;
         background-repeat: no-repeat;}
    #left-nav {
         text-align: left;
         position: relative;
         top: -400px;
         margin: 20px 0px 10px 0px;
         width: 180px;
         float: left;
         border: 2px solid #000000;
         color: #FFFFFF;
         font-family: corbel, helvetica, arial;
         font-size: 14px;
         font-weight: normal;
         height: auto;
         line-height: 11px;
         text-shadow: 0 0 3px #8D6D6F;
         background-color: #333333;
         left: 20px;
         opacity: 0.8;
         filter: Alpha(opacity=80); /* IE8 and earlier */;
         padding-top:5px;
         padding-bottom:5px;
         padding-right:5px;
         padding-left:5px;}
    #main-content {
         background-color: #666666;
         font-family: "Palatino Linotype";
         margin:auto;
         width:1200px;}
    #right-content {
         background-color: #666666;
         font-family: "Palatino Linotype";
         margin:auto;
         width:200px;}
    #footer {
         border-top: 2px solid #006600;
         clear: both;
         padding: 10px 0 px;
         text-align: center;}
    #top-nav ul {
         text-align: center;
         list-style-type: none;
         margin: 0px;
         padding: 0px;}
    #top-nav ul li {
         opacity: 1.0;
         display: inline;}
    #top-nav ul li a {
         color: #000000;
         font-family: Impact, Charcoal, sans-serif;
         background-color: #CCCCCC;
         padding: .2em 1em .2em 1em;
         opacity: 1;
         filter: Alpha(opacity=100); /* IE8 and earlier */;}
    #top-nav ul li a:hover {
         border-color: 99BF99;
     color: #000000;
     background-color: CCFFCC;
     border-width: 1px;
     border-style: solid;}
h1 {
     font: 30px Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;}

And here's the html:

<!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> 
<title></title> 
<link href="mycss.css" rel="stylesheet" type="text/css"/>
</head> 
<body>
<div id="container">
<div id="masthead"></div>
<div id="top-nav"></div>
<div id="left-nav"></div>
</div>
<div id="main-content"></div>
<div id="footer"></div>
</body> 
</html>

Update: I added clear:both to main-content, which fixes the text positioning issue. However, now the whole main-content div shifts down a few inches. Any ideas on that?

Here's a jsFiddle: http://jsfiddle.net/r7yCa/

user3307787
  • 1
  • 1
  • You could create a jsFiddle and remove code until the problem stops appearing. Then you have a good candidate for what is causing it. And after that, posting the stripped down jsFiddle could help us help you. – kapa Feb 13 '14 at 21:26
  • 2
    That's because your left-nav div is floated left and you didn't clear it. – j08691 Feb 13 '14 at 21:26
  • Also, don't use position:relative to directly control your layout. You should figure out how to use floats correctly. – Diodeus - James MacFarlane Feb 13 '14 at 21:29
  • Hmm, so I removed the float on left-nav and now the text -is- displaying correctly within main-content....however, for some reason it moved the main content down a few inches on the page as well, leaving a big space in between that and #masthead. Any ideas why that is? Something to do with the fact that I used the position.relative on left-nav? – user3307787 Feb 13 '14 at 21:34
  • I've added a jsFiddle, if it helps: http://jsfiddle.net/r7yCa/ – user3307787 Feb 13 '14 at 21:55

1 Answers1

0

I've replicated your issue and believe you need to add

 clear: both;

to your #main-content within the css:

#main-content {
     background-color: #666666;
     font-family: "Palatino Linotype";
     margin:auto;
     clear: both;
     width:1200px;}
Stu1986C
  • 1,452
  • 1
  • 18
  • 34
  • Hmm that has the same result as removing float from left-nav (which I said in a comment and didn't add to the question, sorry). It does fix the text within main-content, but then main-content shifts down a few inches on the page, leaving a big gap. – user3307787 Feb 13 '14 at 21:44