Jump to content

[SOLVED] Overlapping Containers

Cetanu

By Cetanu
in CSS Help

 Share

Recommended Posts

Cetanu Regular Member

Cetanu

Posted
Posted

Well, in my CSS I have two basic containers.

 

The sidebar, and everything else. Here:

Cell One!              Cell Two!

 

When I view the site full-screen, all is good, but if I minimize the window just a little (imitating screen resolution) the text in Cell Two overlaps Cell one (sidebar). Is there a property I can declare to make the cells stay separate?

 

CSS: 

*{ 
padding: 0; 
margin: 0; 
} 
body{ 
background-color: #22221F; 
color: #fff; 
font-family: tahoma, arial, times new roman; 
font-size: .800em; 
word-spacing: .100em; 
} 

/*Links*/ 
a{ 
color: #007DFF; 
text-decoration: none; 
font-weight: bold; 
} 
a:hover{ 
color: #B80000; 
text-decoration: underline; 
font-weight: bold; 
} 
a:visited{ 
color: #fff; 
text-decoration: underline; 
font-weight: bold; 
} 
a:active{ 
color: #22459B; 
text-decoration: underline; 
font-weight: bold; 
} 
/*Containers*/ 
#nav{ 
width: 99%;
float: left; 
padding: 10px; 
height: 100px; 
background: url("images/d9bg.png") repeat-x; 
}
#nav img{ 
float: left; 
}
#nav ul{ 
dislay: inline; 
padding: 10px; 
font-size: .899em; 
float: right; 
}
#nav li{ 
display: inline; 
padding: 10px; 
font-size: .899em; 
float: right;
} 
#nav li a{ 
padding: 10px; 
} 
#nav li a:hover{ 
background-color: #555; 
color: #fff; 
padding: 10px;
}
#whole{ 
background-image: url("images/bwbg.png") repeat-x; 
width: 100%; 
}
#sidebar{ 
float: left; 
width: 30%; 
} 
#footer{
background: url("/images/d9bg.png") repeat-x;
height: 100px;
padding: 3px;
width: 99.5%;
margin-top: 20%; 
}
/*Classes*/
.clear{
clear: both; 
}
img.center{ 
display: block; 
margin: 0 auto; 
} 
a img{ 
border: none;
}
img.head{ 
float: left; 
} 
/*IDs*/ 

/*Normal Properties*/

fieldset{ 
border: 2px solid rgb(0, 0, 0);
float: left;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: -10px;
padding: 10px;
width: 25%;
} 
legend{ 
background: url("images/d9header.png") no-repeat; 
margin: 0 auto; 
}
input{ 
margin: 5px; 
border: 1px solid #44459B;
background-color: #555; 
color: #fff;
}

 

 

Link to comment
Share on other sites
Cetanu Regular Member

Cetanu

Posted
  • Author
Posted

Heh. 

<!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> 
<title>D9 Fans</title> 
<link rel="stylesheet" type="text/css" href="style.css" />
</head> 

<body>
<div id="whole"> 

<div id="nav">
<img src="/images/d9fans.png" class="head" alt="D9Fans"/>
<ul>
<li><a href="register.php">Register</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="#" class="selected">Home</a></li>
</ul> 
</div> 
<div id="whole"> 
<div class="clear"></div> 
<div id="sidebar"> 
<fieldset> 
<legend><img src="images/d9header.png" alt="MNU Classified"/></legend> 
Test Form! 
<form> 
<input type="text" name="uname"/><br/>
<input type="password" name="password"/><br/> 
<input type="submit" name="submit" value="Log In"/>
</form>

</fieldset>
<div class="clear"></div> 
<br/>
<fieldset> 
<legend><img src="images/d9header.png" alt="MNU Classified"/></legend> 
The news could go here. Maybe user info. I dunno, do YOU? 
</fieldset>
</div> 
<p>
District 9 is a movie that came out in August of 2009. It focuses around an extraterrestrial race (derogatory name: prawns) that has become 
stranded on Earth. The main characters are Christopher (prawn) and Wilkes (MNU Personnel)...BLAHBLAHBLAHBLAHBLAH. <br/> 
|<br/> 
| <br/> 
| <br/> 
|<br/>  
</p>
</div> 
<div class="clear"></div> 
<a href="http://mythscape.freezoka.com/"><img src="/images/cetnet.png" alt="Cetanu Network!" class="center"/></a>

</div>


</body> 
</html>

 

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

Ok, there are a few things you can do.

 

1) Give the left sidebar a fixed width, instead of a fluid width. Then give the paragraph tag directly after it a left margin equal to the width of the left sidebar, plus a little if you want a space between the sidebar and content. Or:

2) Give the p tag after the sidebar a left margin of 30% (the width of the sidebar). This will keep the containers from overlapping for the most part, though if when you get to a small enough resolution there will be some overlap. No one is really going to look at your site on a monitor that small however. Or:

3) Give the left sidebar a right margin. This will do mostly the same thing as number two. The overlap still happens, but only at really small resolutions.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.