Problems with using divs for layout

@Chrisab508Jan 31.2004

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:

</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!!

to post a comment

CSS

7 Comments(s) _↴

@VladdyJan 31.2004 — #You need to start with valid HTML - then apply CSS to it.

@Chrisab508authorJan 31.2004 — #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_JJan 31.2004 — #Your opening BODY tag and closing BODY tag are in the wrong place

@Chrisab508authorJan 31.2004 — #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.

@scottOJan 31.2004 — #[i]Originally posted by Chrisab508 [/i]

[B]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. [/B][/QUOTE]
SimpleBits uses a background image. ?

Read about it here:

http://www.alistapart.com/articles/fauxcolumns/

@Chrisab508authorJan 31.2004 — #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

@ray326Feb 01.2004 — #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.

[code=php]
 <!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>
 
 [/code]

Also in #CSS _↴

Cannot remove bullet points from li tag CSS align How do I...

Success!

Help @Chrisab508 spread the word by sharing this article on Twitter...

Tweet This

Problems with using divs for layout

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Problems with using divs for layout

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴