1. Home
  2. Forums Index
  3. Browser Side / CSS 12:35 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Layout Problems

         

indiana_01

2:03 pm on Apr 9, 2005 (gmt 0)

10+ Year Member



I'm trying to setup a layout for a website, and having 1 small problem. The basic layout is a containter div with an 800px width and javascript to set the height = the available space in the browser window. Within the container there is a banner, then a line of other text. Below there there is a navagation menu on the left, and the main content area on the right. Everything is pretty much set size-wise except the main content area which should fill up whatever space is available. The problem is, there is a margin on the left and right of the content <div> Since the backgroud is white, it's not normall noticable until there is enough content to cause a scroll bar to apprear (overflow is set to auto), then there is a few pixels of space between the scroll bar and the border of the container div. I've been trying everything, and just can't seem to be rid of the margin, even though margins are set to 0 just about everywhere.

Here is the CSS:


#banner {
float: right
margin: 0, 0, 0, 0;
padding: 0, 0, 0, 0;
height: 70px;
overflow: hidden;
}

#header {
padding: 0px, 0px, 0px, 0px;
margin: 0px, 0px, 0px, 0px;
height: 36px;
width: 800px;
top: 0px;
left: 0px;
position: relative;
text-align: left;
vertical-align: center;
background-image: url('images\bg_middle.gif');
overflow: hidden;
}

#categories {
width: 170px;
margin: 0, 0, 0, 0;
overflow: hidden;
background-image: url('images\categories.gif');
float: left;
padding: 0px, 15px, 0px, 10px;
}

#content {
overflow: auto;
margin: 0px;
padding: 5px, 0px, 0px, 5px;
background-color: red;
border-style: none;
border-width: 0;
}

#main {
padding: 0px, 0px, 0px, 0px;
margin: 0px, auto, 0px, auto;
border-left: thin solid gray;
border-right: thin solid gray;
text-align: left;
width: 800px;
top: 0px;
left: 0px;
background-color: white;
}

Here is the HTML (slightly edited)


<html>
<head>
<link rel="stylesheet" href="master_style.css" type="text/css">
<script language="javascript">
function changeheight() {
windowheight = (window.innerheight ¦¦ document.body.clientHeight)
contentheight = windowheight - 120
var cat = document.getElementById("categories")
var con = document.getElementById("content")
cat.style.height = contentheight
con.style.height = contentheight
}
</script>
</head>
<body onLoad="changeheight()"; onResize="changeheight()">
<div id="main">
<div id="banner">
<IMG SRC="banner.jpg" WIDTH="780"></div>
<div id="header">
Header info
</div>
<div id="categories">
<!-- #include file="categories.asp" -->
</div>
<div id="content">
<!-- #include file="main.asp" -->
</div>
</div>
</body>
</html>

indiana_01

2:06 pm on Apr 9, 2005 (gmt 0)

10+ Year Member



*Note, the backgroud was only set to red so that I could see where the edges of the <div> really were, normally it's white.

Thanks!

stef25

3:27 pm on Apr 9, 2005 (gmt 0)

10+ Year Member



not sure, but you can use.

padding: 0; instead of
padding: 0px, 0px, 0px, 0px;

AND

margin 0 auto; instead of
margin: 0px, auto, 0px, auto;

maybe the commas are messing things up.

you dont have add the units in px if using a value of zero.

also float:right for #banner doesnt have a ; behind it. that will def mess things up

let us know!
stef

indiana_01

8:45 pm on Apr 9, 2005 (gmt 0)

10+ Year Member



Thanks for the suggestion.

Not sure what the banner was even floating, so I took that line out, and made the changes you suggested, unfortunatly still not working.

Here is the .css now, including the body, which I think I left out the first time...


body {
background-image: url('images\bg.gif');
text-align: center;
padding: 0;
overflow: hidden;
}
#banner {
margin: 0;
padding: 0;
height: 70px;
overflow: hidden;
}
#header {
padding: 0;
margin: 0;
height: 36px;
width: 800px;
top: 0px;
left: 0px;
position: relative;
text-align: left;
vertical-align: center;
background-image: url('images\bg_middle.gif');
overflow: hidden;
}
#categories {
width: 170px;
margin: 0;
overflow: hidden;
background-image: url('images\categories.gif');
float: left;
padding: 0px, 15px, 0px, 10px;
}
#content {
overflow: auto;
margin: 0;
padding: 5px, 0px, 0px, 5px;
background-color: red;
border-style: none;
border-width: 0;
}
#main {
padding: 0;
margin: 0px, auto;
border-left: thin solid gray;
border-right: thin solid gray;
text-align: left;
width: 800px;
top: 0px;
left: 0px;
background-color: white;
}

eljaykay

1:45 am on Apr 10, 2005 (gmt 0)

10+ Year Member



Hi -
Once you've set a container div / parent's width to a certain width in px, you can just use -
width:100%; on any elements that follow it that you want to have the same width.

I'm not sure but things like this are usually caused by not setting widths on certain elements or from having too much [compared to a parent elem.] in the way of width, margins or padding that will force things to go awry.

Have also seen oddities from having an extra closing bracket [or whatever] in the coding!

Good luck,
El

indiana_01

12:40 pm on Apr 10, 2005 (gmt 0)

10+ Year Member



Thanks for the suggestion.

Tried settings the width of the #content <div> to 100%, didn't change anything. Also changed the margings on the body to 0, that fixed another minor problem I was having, but didn't affect this. I tried settings the width manually, wouldn't let me make it big enough to fill the entrie area. The container div is 800, the navigation is 170, so that leaves 630. If I tried to make it any bigger then 623, then it would put it below the navigation menu instead of beside it.

I'm really stumped, can't figure out why the heck it won't take up all the remaining space!

Charlie Chan

12:33 am on Apr 11, 2005 (gmt 0)

10+ Year Member



My book shows the attribute background-image: url(litelogo.jpg);. You have single quote marks in your url source. This may not make a difference.

indiana_01

11:31 am on Apr 11, 2005 (gmt 0)

10+ Year Member



Thanks for the suggestion.

As far as I know, should work either with just the name or the single quotes, but for the heck of it I tried removing the quotes, didn't make a difference.

Anyone else have a clue what could be causing this?

indiana_01

12:06 pm on Apr 12, 2005 (gmt 0)

10+ Year Member



So have I stumpted everyone :). I've been playing around a bit, but haven't figured out a way to fix yet...

collymellon

1:27 pm on Apr 12, 2005 (gmt 0)

10+ Year Member



you cannot get rid of the 1-2pixel gap I.E puts in between divs.

Spook

2:27 pm on Apr 12, 2005 (gmt 0)

10+ Year Member



Few, I'm a bit rusty on this CSS stuff, but here goes.

Validate your CSS using the w3c validator [jigsaw.w3.org...] and you will find there are a couple of issues you need to sort out.

Once done, try putting a temporary coloured boarder around each of the elements [or #id's in this case](Sorry, the correct terminology escapes me!).

You will see that the #header {width: 800px;} is causing the problem.

Changing this width to 100% should solve the problem.

FYI I modded the CSS to:

body {
background-image: url('images\bg.gif');
text-align: center;
padding: 0;
margin: 0;
overflow: hidden;
}
#banner {
margin: 0;
padding: 0;
height: 70px;
overflow: hidden;
border: 1px dotted blue;
}
#header {
padding: 0;
margin: 0;
height: 36px;
width: 100%; /*800px; */
top: 0px;
left: 0px;
position: relative;
text-align: left;
/*vertical-align: center; */
background-image: url('images\bg_middle.gif');
overflow: hidden;
border : 1px solid blue;
}
#categories {
width: 170px;
margin: 0;
overflow: hidden;
background-image: url('images\categories.gif');
float: left;
padding-top: 15px;
padding-bottom: 10px;
border: 1px solid green;
}
#content {
overflow: auto;
margin: 0;
padding-left: 5px;
padding-bottom : 5px;
/*background-color: red; */
border-style: none;
/*border-width: 0; */
border: 1px solid black;
}
#main {
padding: 0;
margin: 0; /* auto; */
border-left: thin solid gray;
border-right: thin solid gray;
text-align: left;
width: 800px;
top: 0px;
left: 0px;
background-color: white;
}

Hope this helps.

GW

indiana_01

2:42 pm on Apr 12, 2005 (gmt 0)

10+ Year Member



Finally figured it out, and it's working, I just can't figure out WHY!

I ended up removing the line:


width: 800px;

in the #header <div>, and then everything started working correctly.

Weird.....

indiana_01

2:43 pm on Apr 12, 2005 (gmt 0)

10+ Year Member



Oh, guess Spook figured it out, didn't see his post before I posted.

Thanks!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 12:35 am May 2, 2026