Forum Moderators: not2easy
<!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" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style type="text/css">
/* ----------BODY ----------- */
body {
position: relative;
background: #8a8;
margin: .5em 1em;
padding: .5em 1em;
font-family: Arial,Verdana;
text-align: center;
color: green;
font-size/* */:/**/small;
font-size: /**/small;
}
/* ----------HEADER ----------- */
/* ------ I want the profile container to go into the left side of the header
but when I minimize the page and play with the sizing, the header title and
description get tucked underneath the profile image. --------*/
/*-------There is a roughly 40px height nav-searchbar that spans the top length of the screen.
I want to be sure the header border falls below this without looking cramped----- */
#header {
background: #8b8;
float:right;
width:600px;
margin: 5px;
padding: 5px;
border: 3px solid green;
text-align:center;
}
#blog-title {
margin: 5px 5px 5px 5px;
padding: 20px 20px .25em;
border: none;
font-family: Arial,Verdana;
font-size: 200%;
line-height:1.2em;
color: #063;
text-transform: uppercase;
letter-spacing: .2em;
}
#description {
margin: 0 5px 5px;
padding: 0 20px 20px;
font: 78%/1.4em Georgia,Verdana;
text-transform: uppercase;
letter-spacing: .2em;
color: #090;
}
/* ----------PROFILE----------- */
#profile-container {
float:left;
position:absolute;
top: 70px;
left: 50px;
margin:0 0 1.5em;
padding-bottom:1.5em;
}
.profile-img {
display:inline;
}
.profile-img img {
border:3px solid #0f0;
padding:4px;
margin:0;
}
/* ----------SIDEBAR----------- */
#sidebar {
position:absolute;
top: 210px;
left: .6em;
margin: 10px;
float:left;
padding: 5px 10px;
margin: 0 0 1px;
text-decoration: none;
color: #cfc;
background: #696;
border: 3px solid green;
}
#sidebar h2 {
font-family: Arial,Verdana;
font-weight: bold;
text-transform: uppercase;
display: block;
text-align: center;
background: #960;
}
#sidebar ul {
display: block;
background: #696;
text-align:center;
margin:0 0 1px;
padding:0 0 1.5em;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
/* ----------CONTENT----------- */
/* -----------When resizing the page maunually (minimizing screen and moving it about)
the content gets stuffed underneath the sidebar. I want it to keep a fixed distance
from the sidebar, and to keep the same distance from the #header as the sidebar
with no overlapping when the page gets shrunk--------- */
#content {
border: 3px solid green;
float:right;
padding: 5px;
width:67%;
text-align: left
}
/* ----------POSTS----------- */
.date-header {
text-align: center;
font-family: Arial,Verdana;
font-size: 90%;
margin:1.5em 0 .5em;
}
.post {
background: #8b8;
margin:0 5px 5px 5px;
padding: .5em 1em 1.5em 1em;
list-style: none;
border: 1px solid green
}
.post-title {
margin: .25em 0 0;
padding: 0 0 4px;
font-family: Arial,Verdana;
font-size: 140%;
line-height: 1.4em;
color: #063;
text-transform: uppercase;
border-bottom: 2px solid green;
}
</style>
</head>
<body>
<!-- Begin #Header -->
<div id="header">
<!-- Begin #profile-container -->
<div id="profile-container">
<dt class="profile-img">
<a href="#">
<img width="80" alt="profile pic" height="80" src="#.jpg"> /*should this have a closing tag?*/
</a>
</dt>
</div>
<!-- End #profile -->
<h1 id="blog-title">page title</h1>
<p id="description">whats on the page</p>
</div>
<!-- Begin #sidebar -->
<div id="sidebar">
<h2 class="sidebar-title">links</h2>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
<h2 class="sidebar-title">New Stuff</h2>
<ul id="recently">
<li><a href="#">recent post 1</a></li>
<li><a href="#">recent post 2</a></li>
<li><a href="#">recent post 3</a></li>
</ul>
<h2 class="sidebar-title">Old Stuff</h2>
<ul class="archive-list">
<li><a href="#">September 2004</a></li>
</ul>
</div>
<!-- End #sidebar -->
<!-- Begin #content -->
<div id="content">
<h2 class="date-header">Wednesday, September 15, 2004</h2>
<!-- Begin .post -->
<div class="post"><a name="#"></a>
<h3 class="post-title">Post Title</h3>
<div class="post-body">
<div>
<p>Text filler Text filler Text filler Text filler Text filler Text filler Text filler Text filler Text filler Text filler Text filler Text filler Text filler Text filler Text filler Text filler Text filler Text filler </p>
</div>
</div>
</div>
<!-- End #content -->
</body>
</html>
I apologize if it is too lengthy, and beg of anyone to help my solve this ugly squish overlap problem. I will even name a kitten after you.
First, let me see if I understand the problem. You have a right floated content <div> (more on that float in a minute) and a sidebar <div>. You want them side by side in the layout, and to remain side by side when the screen is resized. Is that the crux of it?
Here's at least one theory, based on your code, for why this 'overlap' is happening. Number one, you've got the sidebar div both absolutely positioned AND floated left. That's not possible. Both positioning schemes remove the element from the normal flow, but they are not compatible with each other. I'm not sure exactly how browsers handle this when they run across it. My assumption (based partly on your description of the problem) is that the absolute positioning is applied (since it comes first in the stylesheet)and the subsequent float is ignored.
This means you have a sidebar that is out of the flow (i.e., unable to interact with other elements in ANY way), and a right floated content div beside it. As long as the page width is wide enough for these to display side by side, they do.
But when the page shrinks, two things happen. One, the right floated content <div> moves in (because floated elements move in their float direction until they meet the edge of a containing block or another float, resizing the containing block changes thelocation of the float's edge). Two, the absoutely positioned sidebar doesn't go anywhere (that's whaty absoluye positioning is for). The result is the one that moves (content) jams up under the one that doesnt (sidebar).
Solution? Don't absolutely position the sidebar. What you really ought to do is tak those two <div>s (content and sidebar) and do one of two things. Either float #sidebar left, give it a width, and apply a margin-left to #content equal to the width of #sidebar, or put #content first in the source code, float it right, apply a width, and give sidebar a margin-right equal to #content's width. The key is that only one element gets floated, that whichever element that is comes first in the source code, and that the other element gets NO positioning properties (only the margin to clear space for the float.)
Here's some code to start you off. I'll leave your source code in it's existing order (with #sidebar first), meaning we will float sidebar to the left...
#sidebar {
float: left;
width: 33%;
}
#content {
margin-left: 33%;
}
If you want those elements to remain below yourheader, wrap them in a container div that follows the header in the source code...
<div id="header"></div>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
then give the container...
#container {
float: left;
width: SAME AS HEADER;
}
You may need to play around with these values some, and there are other things in your CSS that could cause trouble, but I think this will solve the specific 'squishing' problem you have.
Good luck!
I didn't have the absolute positioning originally, as I was just trying to use left and right floats. but no matter how skinny I made my sidebar, it would not go to the side, as it seemed to prefer dropping to the bottom of the page.
So I gave it absolute positioning to try and 'force' it to go where I wanted it. but I wasn't too happy with it, as the top position seems to change from one browser to another.
Your idea of adding a left margin to the content equal to the width of the (right) sidebar NEVER would have occurred to me. I know it is probably basic to most if you, but that little bit of information is one that seemed to slip through the cracks. I'm off to work on it some more, and hopefully will have it uploaded tonight after a thorough cleaning.
"Number one, you've got the sidebar div both absolutely positioned AND floated left. That's not possible."
for some reason that sentence made me laugh. I knew something goofy was happenning :)
I now have a kitten named "Error". Thanks also for the welcome! I've actually been peeking here for a few months, and only recently joined as I thought I might want to post something, but this is the first time where I desperately needed help. I usually try to search the available resources and come up with a solution on my own, but it just wasn't coming :o But there is a TON of good information to be found here (it was this site that made me download Firefox, and I love it! much more than IE6 & NN7 - the tabbed bookmarks are great for me when going back and forth between resources)
I was just trying to use left and right floats
It's better to avoid this if you can. Adjacent left and right floats work fine as long as you are certain you can maintain complete pixel control over the width of the layout. Any resizing (EM or % sizing, for instance) may cause the two floats to stack vertically. Always better to use the one-float-and-a-margin option if you can.
