Jump to content

[SOLVED] Overlapping Containers

Cetanu

By Cetanu
in CSS Help

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
https://forums.phpfreaks.com/topic/172773-solved-overlapping-containers/
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>

 

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.

Archived

This topic is now archived and is closed to further replies.

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.