1 reply [Last post]
Star 2.0
Star 2.0's picture
Offline
newbie
Last seen: 7 years 20 weeks ago
Timezone: GMT-5
Joined: 2013-05-07
Posts: 1
Points: 2

This is just my basic layout for my webpage.
Every time I try to re-size the page my div tags overlap one another.

<html>
<head>
<title>Sample</title>
<link rel ="stylesheet" type= "text/css" href="SampleWeb.css"/>
</head>
 
<body>
<div style="width:100%; margin-top: -18px; display: block; clear: both;">
	<div style="width: 100%; height: 100px;  background-color: white;">
	<p style="padding-top: 3%;font-size:30px; font"><i>Marketing page </i></p>
     </div>	
 
    <div style="width: 100%; overflow: hidden;">
    <div><li><a href="http://www.albany.edu/about.php?WT.source=home" class="nav">About</a></li></div>
    <div><li><a href="http://albany.bncollege.com/webapp/wcs/stores/servlet/BNCBHomePage?storeId=19071&catalogId=10001" class="nav"> 
		       Books</a></li></div> 
    <div><li><a href="#AM" class="nav">Electronics</a></li></div>  
    <div><li><a href="#UA" class="nav">Apparel</a></li></div>
    <div><li><a href="#SP" class="nav">Activities</a></li></div>
    <div><li><a href="#" class="nav">Engagement</a></li></div>
    </div>
 
    <div class="thumbnail">
 
	</div>
 
	<div style="float: left; background-color:  white; margin-left: 80px;">
 
	</div>
 
	<div style="width: 100%;">
	<div id="left-col" style="clear: left;">
	</div>
 
	<div id="central-col">
	</div>	
 
	<div id="central-box" style="clear: both; text-align: center;">
	</div>
 
    <div id="central-box2" style="clear: both; text-align: center;">
	</div>		
 
	<div id="central-box3" style="clear: both;">
	</div>
 
	<div id="central-box4" style="clear: both;">
	</div>
 
	<div id="right-col" style="text-align: center; clear:">
	</div>
 
	<div id="right-box2" style="text-align: center;">
	</div>	
 
	<div id="right-box3">
	</div>
 
	<div id="right-box4" style="text-align: center;">	
	</div>
	</div>
 
    <div id="footer"><p style="text-align: center;">Web-page</p> </div>
</div>
</body>
</html>

a.nav
{
float: left;
width: 10%; 
height: 25px;
color: white;
background-color: #8B008B;
margin-left: 35px;
margin-top: 5px;
padding-right:25px;
padding-left:25px;
font-size: 20px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
display: block;
}
 
li
{
display: inline;
clear: both;
overflow: hidden;
}
 
a.nav:hover
{
background-color: #DAA520;
}
 
body
{
min-width: 1100px;
height: 100%;
margin: 25px;
background-color: #A9A9A9; 
padding: 0;
}
 
img
{
margin-top: 10px;
clear: both;
}
 
.thumbnail 
{
margin:5px;
}
 
p.center
{
text-align: center;
}
 
#left-col 
 {
float: left;
height: 525px;
width:225px;
background-color: white;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 80px;
}
 
#central-col 
{
float: left;
width:   500px;
height: 300px;
background-color: white;
margin-left: 95px;
margin-top: -136px;
}  
 
#central-box
{
float: left;
width:   500px;
height: 150px;
background-color: white;
margin-left: 399px;
margin-top: -355px;
}  
 
#central-box2
{
float: left;
width:   500px;
height: 150px;
background-color: white;
margin-left: 399px;
margin-top: -175px;
} 
 
#central-box3
{
float: left;
width:   500px;
height: 150px;
background-color: white;
margin-left: 399px;
margin-top: -1px;
margin-bottom: 10px;
}  
 
#central-box4
{
float: left;
width:   500px;
height: 350px;
background-color: ;
margin-left: 399px;
margin-top: 6px;
margin-bottom: 10px;
}  
 
#right-col 
{
position: ;
float: right;
width:   220px;
height: 225px;
background-color: white;
margin-top: -840px;
margin-right: 85px;
} 
 
a.right-col
{
text-decoration: none;
color: black; 
 
} 
 
#right-box2
{
float: right;
width:   220px;
height: 225px;
background-color: ;
margin-top: -600px;
margin-right: 85px;
color: #8B008B;
}  
 
#right-box3
{
position: ;
float: right;
width:   220px;
height: 195px;
background-color: white;
margin-top: -355px;
margin-right: 85px;
}  
 
#right-box4
{
float: right;
width:   220px;
height: 295px;
background-color: ;
margin-top: -130px;
margin-right: 85px;
margin-bottom: 10px;
color: #8B008B;
}    
 
#footer
{
clear: both;
color: white;
background-color: #8B008B;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Star 2.0, Firstly validate

Hi Star 2.0,
Firstly validate your styles.
You have a couple of instances of position: ; which may cause some browsers to ignore the rest of the stylesheet.

You are using lot's of negative margins to position floated elements, try to avoid this when you can.

Look into media queries so you have more control over the changes in size.