PDA

Click to See Complete Forum and Search --> : <div> Tag

webjustin
12-16-2005, 07:27 PM
I am using the <div> tab in my css to separate the header, footer, left, body, and right side of my page. My problem is when I shrink the browser my objects go all over the place. For example I made some tabs that I placed in the main section and they blend in with the color of my masthead. When I shrink the browser the tabs move around. How can I fix this?

CSS

#masthead {
width:100%;
height: auto;
background-color : blue;
margin-bottom : 0px;
margin-top : 0px;
margin-left: 0px;
margin-right: 0px;
border-bottom: thin solid blue;

}
#leftside {
float: left;
width: 140px;
height: 100%;
margin-left : 0px;
margin-top : 0px;
margin-bottom : 0px;
margin-right : 0px;
border-right : thin solid Gray;
background : Silver repeat-y;

}

#Main {
float: none;
width: 100%;
height: auto;
margin-left : 0px;
margin-top : 0px;
margin-bottom : 0px;
margin-right : 0px;
background : repeat-y;

}

#rightside {
width: 140px;
height: 100%;
float: right;
background : #66cc33;
border-left : thin solid #00cc33;
margin-left : 0px;
margin-top : 0px;
margin-bottom : 0px;
margin-right : 0px;

}

#footer {
width: 100%;
clear: both;
height: 25px;
border-top : thin solid Gray;

}

HTML Page

<html>
<link rel="stylesheet" type="text/css" href="template2.css" />
<head>
<title>Untitled</title>
</head>

<body style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0;" >

<div id="masthead">
<img src="banner.gif" width="382" height="75" border="0" alt="">
</div>

<div id="leftside">
</div>

<div id="rightside">
</div>

<div id="Main">
</div>

<div id="footer">
</div>


</body>
</html>
The Little Guy
12-16-2005, 07:42 PM
Your style sheet should be between the <head> and </head> tags, and not the <html> and <head> tags

And It may be because you are using px and % for widths for sizes.

px is a fixed width, and will never change no matter how small the browser is

% is not fixed if you shrink the page, that will shrink the <div> as well.
webjustin
12-16-2005, 08:03 PM
So I should just use px for all of my widths?
The Little Guy
12-16-2005, 08:13 PM
If you don't want anything to change when someone resizes the page, I would suggest making the total width of the page no more than 1000px, otherwise you could start to get scroll bars along the bottom of the page.

The only thing that would be ok to have as a %, in my opinion would be the container (if you have one).
ShrineDesigns
12-17-2005, 08:49 AM
try this<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin: 0%;
padding: 0%;
}
div {
display: block;
}
img {
border: none;
}
#header {
width: 100%;
margin: 0%;
border-bottom: thin solid blue;
background: #00F;
}
#left {
float: left;
width: 140px;
height: 100%;
margin: 0%;
border-right: thin solid gray;
background: silver;
}
#main {
float: none;
margin: 0%;
}
#right {
float: right;
width: 140px;
height: 100%;
margin: 0%;
border-left: thin solid #0C3;
background: #6C3;
}
#footer {
clear: both;
width: 100%;
height: 25px;
border-top: thin solid gray;
}
-->
</style>
</head>
<body>
<div id="header"><img src="banner.gif" alt=""></div>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>
thewebman
12-17-2005, 09:35 AM
I would suggest making the total width of the page no more than 1000px, otherwise you could start to get scroll bars along the bottom of the page. really it should be no more than 780px if you want your web page to be viewed on a computer with only 800 x 600 screen resolution.
The Little Guy
12-17-2005, 10:06 AM
really it should be no more than 780px if you want your web page to be viewed on a computer with only 800 x 600 screen resolution.

Yeah, but not many people don't use that resolution now a days (at least no place I have been)
thewebman
12-17-2005, 10:27 AM
Yeah, but not many people don't use that resolution now a days (at least no place I have been) true, but web design is all about usability. every user on every screen on every computer on every browser should be able to view your web site the same. I'd recommend using percents if you want the page to take up the whole screen.
LJK
12-17-2005, 10:32 AM
Hi -
It's also nice to use % for the big page divisions, then px
for placement of elements within them.

El