...
PDA

3 column div child problem

honeyradiance
07-18-2011, 08:16 AM
Hello

I am having a problem with a gap between the right column and the left and center columns on my page

My 3 column div is to be a small table-like device INSIDE a body id div, because the body has a background image and everything.

I have posted 2 images.http://i1109.photobucket.com/albums/h424/honeyradiance/Current_Screenshot.jpg
This is how my site currently looks

This is how I'd LIKE it to be:
http://i1109.photobucket.com/albums/h424/honeyradiance/Goal_Screenshot.jpg



and this is my css code:
#container {
width: 100%;

}

#header {
width: 1600px;
height: 200px;
position: relative;
background-image: url(http://honeyradiance.org/Honeyradiance/Images/archive-header-img.jpg);
border-bottom: 2px solid #33FFFF;
}

#horizontalnav {
width: 1600px;
height: 30px;
position: relative;
background-color: #000000;
border-bottom: 2px solid #33FFFF;
}


.navlinks {
position: absolute; top: 4px; left: 77px;
}

.navlinks ul {
margin: auto;
}

.navlinks li {
margin: 0px 30px 0px 0px;
list-style-type: none;
display: inline;
}


.navlinks li a {
color: #66FF99;
padding: 5px 12px 7px;
text-decoration: none;
font-family: "Gill Sans", sans-serif;
font-size: 16px
}

.navlinks li a:visited {
color: #FF00CC;
text-decoration: none;
font-size: 16px

}

.navlinks li a:hover {
color: #99FFFF;
background-image: url(http://honeyradiance.org/Honeyradiance/Images/link-mouseover.jpg);
text-decoration: underline;
font-size: 16px;
}

#column-holder {
width: 45%
overflow: auto;
margin: 10px auto;
background-color: #00FFFF;
padding: 10px;
}

#left {
width: 200px;
height: 400px;
background-color: #000033;
float: left;
}

#left p {
color: #66FF99;
font-family: "Gill Sans", sans-serif;
font-size: 16px
}

#center {
width: 100px;
height: 400px;
background-color: #000033;
}

#center p {
color: #66FF99;
font-family: "Gill Sans", sans-serif;
font-size: 16px
}
#center a {
color: #66FF99;
text-decoration: underline;
font-family: "Gill Sans", sans-serif;
font-size: 16px
}
#center a:visited {
color: #FF00CC;
text-decoration: underline;
font-size: 16px

}

#center a:hover {
color: #FFFF00;
text-decoration: none;

font-size: 16px;
}

#right {
width: 100px;
height: 400px;
background-color: #000033;
float: right;
margin-bottom: 20px;
}

#right p {
color: #66FF99;
font-family: "Gill Sans", sans-serif;
font-size: 16px
}
#right a {
color: #66FF99;
text-decoration: underline;
font-family: "Gill Sans", sans-serif;
font-size: 16px
}
#right a:visited {
color: #FF00CC;
text-decoration: underline;
font-size: 16px

}

#right a:hover {
color: #FFFF00;
text-decoration: none;

font-size: 16px;
}




#body {
width: 100%;
background-image: url(http://honeyradiance.org/Honeyradiance/Images/Archives-Background.jpg);
background-attachment: fixed;
position: relative;
overflow: auto;
padding-left: 238px;
padding-top: 20px;
}



#body p {
color: #66FF99;
font-family: "Gill Sans", sans-serif;
font-size: 16px
}

#body a {
color: #66FF99;
text-decoration: underline;
font-family: "Gill Sans", sans-serif;
font-size: 16px
}
#body a:visited {
color: #FF00CC;
text-decoration: underline;
font-size: 16px

}

#body a:hover {
color: #FFFF00;
text-decoration: none;

font-size: 16px;
}








h1 {
color: #66FFFF;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 300%;
}


ul {
margin-left: 25px;
}

img {
border: none;
}







and this is my html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Honey Radiance</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
<div id="container">

<div id="header">
</div>

<div id="horizontalnav">
<div class="navlinks">
<ul>
<li><a href="http://www.honeyradiance.org/">Home</a></li>
<li><a href="http://www.honeyradiance.org/Archives">Archives</a></li>
<li><a href="http://www.honeyradiance.org/chat-room">Chat Room</a></li>
<li><a href="http://www.honeyradiance.org/farttalk-radio">Farttalk Radio</a></li>
<li><a href="http://www.honeyradiance.org/Schism-Radio">Schism Radio</a></li>
<li><a href="http://www.honeyradiance.org/Artwork">Artwork</a></li>
<li><a href="http://www.honeyradiance.org/Video">Video</a></li>
<li><a href="http://www.honeyradiance.org/Documentaries">Documentaries</a></li>
<li><a href="http://www.honeyradiance.org/Library">Library</a></li>
</ul>
</div>
</div>


<div id="body">
<h1>July 2011 Archives</h1>
<p>Directions: Right click, choose "Save Target As."</p>
<p>for those who have slower connections, we have 32k MONO archives</p>
<p>For 32k MONO archives, scroll to the right. I'm still working on getting rid of the</p>
<p>GAP between the "MONO" and "STEREO" columns</p>


<table>
<tr>
<td><p>July 15, 2011 </p></td>
<td><p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11.mp3">128K STEREO</a></p></td>
<td><p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11-32k.mp3">32K MONO</a></p></td>
</tr>
</table>



</table>
<div id="left">
<p>July 15, 2011</p>
<p>July 11, 2011</p>
<p>July 10, 2011</p>
<p>July 8, 2011</p>
<p>July 6, 2011</p>
<p>July 5, 2011</p>
<p>July 3, 2011</p>
<p>July 1, 2011</p>
</div>
<div id="right">
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11-32k.mp3">32K MONO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-11-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-11-11-32k.mp3">32K MONO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-10-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-10-11-32k.mp3">32K MONO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-8-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-8-11-32k.mp3">32K MONO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-06-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-06-11-32k.mp3">32K MONO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-5-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-5-11-32k.mp3">32K MONO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-3-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-3-11-32k.mp3">32K MONO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-1-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-1-11-32k.mp3">32K MONO</a></p>
</div>

<div id="center">
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11.mp3">128K STEREO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-11-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-11-11.mp3">128K STEREO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-10-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-10-11.mp3">128K STEREO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-8-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-8-11.mp3">128K STEREO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-06-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-06-11.mp3">128K STEREO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-5-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-5-11.mp3">128K STEREO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-3-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-3-11.mp3">128K STEREO</a></p>
<p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-1-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-1-11.mp3">128K STEREO</a></p>
</div>



<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
</div>

</div>

</body>

</html>


I'm wondering what im doing wrong. I've changed order of floats, I've changed floats from left to right and back and forth, and tried all kinds of things, and , still, nothing works.

Please help

Thanks
vikram1vicky
07-18-2011, 09:14 AM
Dont give width of #body to 100%...

Because of this only your 3rd column floating towards right of the screen.

Give width in px according to child div's width.


:)
Chris Hick
07-18-2011, 09:21 AM
Well, first off, you need to arrange your divs in the correct order in your html by placing your left div first, center div next, and your right div after. In your css, you put the body div as 100%width there for when you use floats it will go all the way to the side you float it on. You have several options to solve this problem. First, you can give your body div a set width as in pixels such as 450 px, enough to contain all three divs(left, center, and right). Or, you can remove the floats and place display:inline; in your css under the left, right, and center divs.
honeyradiance
07-18-2011, 01:23 PM
Ok, so I abandoned div's as a way to tabulate my data and decided to use Tables instead because I did not want to resize my #body down to a small size (and all my background images with it)

The problem I am having now is the CSS that I write isn't showing up in the browser.

When I look at the index.html file that is on the server, it looks the way I want it to

But when I clear my cache and try to go to the site, the border and background on the table is missing


When I view the CSS file in Page Source on the browser, it is different than the CSS file I uploaded

This is true in both firefox AND chrome
honeyradiance
07-18-2011, 01:32 PM
Here's how the table appears as it exists in the index.html page that is on the server:

http://i1109.photobucket.com/albums/h424/honeyradiance/index-page-on-server.jpg



And here's how it actually looks when loaded on a browser (even after the cache is cleared) (Incorrect)

http://i1109.photobucket.com/albums/h424/honeyradiance/index-page.jpg


See....its like the code is being uploaded to the server, but its not registering on browsers
Sammy12
07-18-2011, 07:20 PM
could very well be a server issue. what is your server provider? my first guess would be cache, but if you cleared it, then its probably a server problem
vikram1vicky
07-19-2011, 01:30 PM
Check if you have updated CSS file on server or not...

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum