Why do I have extra white space on the left side of my page below the logo?

Question

I'm trying to figure out how to stretch the border of a div containing a three-column layout across the page. It stretches to the right correctly, but is not correct on the left side. Can anyone shoot me some pointers?

As a side question, is this why the third column in my content-container div is not editable? I cannot seem to change the formatting on the third column of this layout for some reason, and I think its related to the first problem.

I checked the width tag and it seems to be set to auto.

<body>
<div id="wrapper">
<div id="logo">
<p align="left"><img src="assets/virael-logo.jpg" alt="logo"/></p>
</div>
<div id="menu">
<ul><p align="right">
<li><a class="button" href="..//FinalProject/playerprofiles.html">Media</a></li>
<li><a class="button" href="..//FinalProject/Tourneyschedule.html">Resources</a></li>      
<li><a class="button" href="..//FinalProject/Tourneyschedule.html">Blog</a></li>
</p>
</div>
</ul>
<p>
</p>
<div id="content-container">
<div id="section-navigation">
<ul>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
</ul>
</div>
<div id="content">
<h2>
Introduction to New Media
</h2>
<p>
Lorem ipsum dolor sit amet consect ...
</p>
<p>
Ut wisi enim ad minim veniam, ...
</p>
<p>
Duis autem vel ... 
</p>
</div>
<div id="aside">
<h3>
Glossary
</h3>
<p>
Critical Theory, Continental Philosophy, Horkheimer,
</p>
</div>
</div>

<!--This is the Footer-->
<!--This is the end tag for wrapper div--></div></div>
</body>

</html>

AND THE CSS SHEET

@charset "utf-8";
/* CSS Document */
<style type="text/css">
}
* {
margin: 0;
}
html, body {
margin:0;
padding:0;
height:100%;
width: auto;
}

#header {
padding:10px;
background:#5ee;
}

#content-container
{
clear: left;
width: 1024px;
background: white; 
}

#section-navigation
{
float: left;
width: 0;
padding: 40px 0px;
margin: 20px 0px;
display: inline;
}

#section-navigation ul
{
margin: 0px;
}
#section-navigation ul li
{
margin: 0px 0px 0px;
padding: 0px;
list-style-type: none;
}
#content {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial,     sans-serif;
margin: 0 0 0 85px;
display:inline-block;
padding-top: 30px;
padding-bottom: 30px;   /* Height of the footer element */
padding-left: 165px;
padding-right: 430px;
position: absolute;
top: 100px;
text-align: justify;
width: auto;
border-top: 7px solid black;
border-left: none;
border-right: none;
border-bottom: 7px solid black;
overflow: auto;
}

#content h2 { margin: 0;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'Myriad Pro', Arial, sans-serif;  }

#aside
{
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial, sans-serif;   
float: right;
width: 50px;
padding: 50px 0;
margin: 0 20px 0 0;
display: inline;
}

#aside h3 { margin: 0; }

#logo{
background-repeat: no-repeat;
background-position: right top;
margin-left: auto;
margin-right: auto;
float: left;
margin: 0px 30px 0px 25px;
overflow: hidden;

}

#logo2{
visibility: hidden;
margin: 0px 30px 0px 25px;
float: left;

}

#menu {
margin-left: auto;
margin-right: auto;
float: both; 
overflow: hidden;

}

ul {
float: left;
list-style-type:none;
text-align:center;
margin: 0;
padding: 0;
}

li {
display: inline-block;
text-align: center;
}

a:link, a:visited {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'Myriad Pro', Arial, sans-serif;
display: block;
font-size: 18pt;
font-weight: bold;
width: 256px;
color: black;
background-color: white;
text-align: center;
padding: 16px;
text-decoration: none;
text-transform: capitalize;
}

a:hover, a:active {
color: purple;
}

.content {
width:960px;
background: #F0F0F0;
border: 1px solid #CCC;
height: auto;
margin: 70px auto;
overflow: scroll;
}

#footer {
margin-left: auto;
margin-right: auto;
float: both;
}

#footer_menu {
margin-left: auto;
margin-right: auto;
float: left; 
overflow: hidden;

.wrapper {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -345px;
}

.footer, .push {
height: 345px;
}

#footer {
text-align: center;
text-transform: capitalize;
background: black;
line-height: 100px;
color: #FFFFFF;
} 

</style>
</head>
<body>

It keeps saying your entry contains code that is not properly formatted as code. something about 4 spaces indenting, etc etc. This is not easy at all. Why can't I just copy and paste this in the field? — user3769350, Jun 24 '14 at 02:19
http://jsfiddle.net/ Put your code in here, hit save, post the link. — Andrew Hoffman, Jun 24 '14 at 02:28
Use the little icon above the input that looks like brackets "**{}**" ... also, it looks like you haven't shared your CSS which will be needed to replicate/solve your issue. — JRulle, Jun 24 '14 at 02:31
I think I got it! To rephrase the question, why is that there is an extra white space on the left right below the logo? I don't want that there, it should be flush with the left side of the browser. — user3769350, Jun 24 '14 at 02:41

score 0 · Answer 1 · answered Aug 20 '23 at 12:24

0

add this in the css code

 body{
      overflow-x: hidden;
      height: 100%;
      width: 100%; 

     }

answered Aug 20 '23 at 12:24

Kingsley Kelechukwu

1
2

score -1 · Answer 2 · answered Jun 24 '14 at 03:04

-1

Replace this in your CSS

*{
margin:0px;
padding:0px;
margin-left:0px;
padding-left:0px;
padding-top:0px;
left:0px;
}

answered Jun 24 '14 at 03:04

Randel Fordberg

105
1
2
11

That didn't help? What does * mean? – user3769350 Jun 24 '14 at 03:11
It means the entire page and you already have it in your css. Just replace what I posted with what you have. Currently, you have: * { margin: 0; } Replace that with my code and it will solve your problem. – Randel Fordberg Jun 24 '14 at 03:20
No it didn't fix it. I don't see any change when I update the CSS as you asked me to. Any suggestions as to why I'm not seeing it? I'm using the latest Chrome by the way. Does it have to do something with the width I set for div content-container? – user3769350 Jun 24 '14 at 03:30
Remove the padding for #header and set #content-container width to 100% . – Randel Fordberg Jun 24 '14 at 03:42
That makes the Glossary section go all the way off the right side of the page. It does nothing to change the left side of the page. But that helps answer my side question :) ty for your patience – user3769350 Jun 24 '14 at 03:46
Hello Randel. Thank you for your patience. I'm still having trouble with this issue. Is this a browser thing that perhaps I'm not seeing? – user3769350 Jun 24 '14 at 04:59
No it's not a browser thing. Has nothing to do with the browser. I haven't really gone through your code, I just speed read it. I s will check it out tonight and get this problem solved for you. – Randel Fordberg Jun 24 '14 at 22:05
I fixed my own problem. I have another issue regarding moving three horizontally aligned divs down together. I am using "margin-top" as opposed to "position:absolute" to do this. I lose my 'margin: 0 auto" - the horizontal centering - for the middle div, is there any way to keep the horizontal centering and still move all the divs down equally? – user3769350 Jun 25 '14 at 05:54

Why do I have extra white space on the left side of my page below the logo?

2 Answers2