PDA

Click to See Complete Forum and Search --> : Problems with using divs for layout

Chrisab508
01-31-2004, 01:31 PM
okay, so i have 4 divs, one is a header and it has a logo, another is a content one with all the content, another is a sidebar with links, and lastly a footer one.

okay, so my problem is, I'm having trouble getting them all ligned up, I've gotten them pretty well ligned up, but if i resize the browser window, everything gets REALLY messed up, so i dno what to do

Code:

HTML:

<html>
<head>
<link rel="stylesheet"
type="text/css" href="stylesheet4.css" />
</head>
<div id="header">
<img src="titlebar.jpg" ALt= "titlebar">
</div>

</div>
<div id="sidebar">
<a href="http://www.csnation.net"> CsNation </a><br><br>
<a href="http://www.webmonkey.com"> webmonkey </a><br><br>
<a href="http://www.alistapart.com"> A List Apart (ALA) </a><br><br>
</div>

</body>

<div id="content">
<body>
<p class ="margin">
main content here main content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content here
</P>
</div>
<div id="footer">
<a href="mailto:email here">Contact Me</a>

</html>


and CSS:

body {background-color: #999999}

}

body {
margin: auto;
text-align: center;
}


#content {
float: left;
width: 576px;
text-align: left;
border: 1px solid #000
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #FFF;
}

#header {
width: 576px;
}

#footer {
width: 576px;
border: 1px solid #000
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
background-color: #ccccff;
}

#sidebar {
float: left;
width: 100px;
border: 1px solid #000;
padding-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
padding-top: 1em;
HEIGHT: 100px;
background-color: #ccccff;
margin-left: 88px;
margin-top: 0;
}



if you go onto a list apart web site, and resize your browser, nothing gets messed up.

Thanks!!
Vladdy
01-31-2004, 02:27 PM
You need to start with valid HTML - then apply CSS to it.
Chrisab508
01-31-2004, 02:30 PM
that is a valid html... Or do you mean i have to finish my whole HTML file, and then apply CSS to it?

thanks.
Mr J
01-31-2004, 04:34 PM
Your opening BODY tag and closing BODY tag are in the wrong place
Chrisab508
01-31-2004, 04:52 PM
okay, i changed the body tag but it didn't change anything, nor did i think it would. My question is, how do i get my page using divs to stay aligned if the browsers is re sized?

www.simplebits.com accomplishes this and it uses divs

thanks.
scottO
01-31-2004, 05:23 PM
Originally posted by Chrisab508
okay, i changed the body tag but it didn't change anything, nor did i think it would. My question is, how do i get my page using divs to stay aligned if the browsers is re sized?

www.simplebits.com accomplishes this and it uses divs

thanks.
SimpleBits uses a background image. ;)

Read about it here:
http://www.alistapart.com/articles/fauxcolumns/
Chrisab508
01-31-2004, 05:25 PM
thats what i use too, i use faux columns, i mean my divs in the columns for text, when i resize it gets all messed up, the text goes all over the place, on simplebits it doesn't.

thanks
ray326
01-31-2004, 11:46 PM
Here's my variation on what you've got. The main thing you need to do is sit back and maybe sketch out what your page design looks like. One of the biggest problems with your code (after the aforementioned syntax errors) is you've got a #sidebar that's about 120px wide that supposed to cozy up to a content area that's about 600px wide and the both of them are supposed to fit inside a 576px column. It just ain't possible.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
body {
background-color: #999999;
margin: auto;
text-align: center;
}

#header {
width: 576px;
background-color: #ffc;
}

#container {
width: 576px;
}

#sidebar {
float: left;
width: 100px;
border: 1px solid #000;
padding: 1em 10px 10px 10px;
background-color: #ccccff;
}

#sidebar a { display:block; margin-bottom: 2em; }

#content {
float: right;
width: 430px;
text-align: left;
border: 1px solid #000;
padding: 10px;
background-color: #FFF;
}

#footer {
width: 576px;
border: 1px solid #000;
padding: 0;
background-color: #ccccff;
clear:both;
}
</style>
<title>
</title>
</head>
<body>
<div id="header">
<img src="titlebar.jpg" alt="titlebar">
</div>
<div id="container">
<div id="sidebar">
<a href="http://www.csnation.net">CsNation</a>
<a href="http://www.webmonkey.com">webmonkey</a>
<a href="http://www.alistapart.com">A List Apart (ALA)</a>
</div>
<div id="content">
<p class="margin">
main content here
</p>
</div>
</div>
<div id="footer">
<a href="mailto:email%20here">Contact Me</a>
</div>
</body>
</html>