Layout . Divs moving out of container

This is the Html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<!--- 
	  My first site using Html 5 
 
--->
 
 
<title> A Guide To HTML 5 </title>
 
 
<link href="style/css1.css" rel="stylesheet" type="text/css">
 
<body>
 
<div id="container">
 
 <div id="header">
  <header> 
 
    <h1> Html 5 </h1>
 
    <!--- below is the html 5 tag nav which sets out the navigation --->
 
    <nav> 
       <div class="menu">
 
       <ul> 
      <li> <a href="#"> Home </a> </li>

2 Content Columns: Float variable-width content column next to fixed width content column

I am a CSS noob. Sorry if this is redundant of other answers--I did try to search the forum and the web before posting.

I'd like to do this without javascript if possible:

I am trying to create a layout that has two content columns. The left content column can be fixed width, but I would like the right column to behave differently, depending on screen resolution:
(1) At lower screen resolutions (eg 800x600), the right content column will drop below the left content column.
(2) At higher screen resolutions, the right content column will float to the right of the left content column.

Liquid layout - float in main content clears outer float

I have set up liquid 2 column layout where sidebar has fixed width and is floated left. Main content has margin the same as sidebar's width. The problem is that if I clear floats inside the main content, it clears the sidebar too and moves the content down.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html>
 
<head>
<title>Float test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#wrap {
    min-height: 100%;
    margin: auto;
    position: relative;
    background:cyan;
}

I am racking my brain here.

I am racking my brain here, and I am sure it is a stupid mistake.

I can not get the content area (where the 1, 2, 3, 4, 5) are located to render right. I set up a inner div with margins and they do not work. Not sure what I am missing here.

On top of that the footer does not render properly at all either.

Any input would be great. Thanks guys.

Positioning two-column content layouts

Hi all, I have my site here <----there

Syndicate content