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

Float issue with images in a list of divs

I am utilizing MVC pattern to provide a list of divs that have an image, some text, and a button.

In the image provided you can see the problem. However, I did fix that issue by adding overflow: hidden; to the list-item div.

Is there another way to fix this issue, or can someone explain why overflow: hidden; didn't hide anything?

PS - I couldn't get the HTML to render properly for whatever reason is going, so i just took a snapshot.

div.item
{
    border-top: 1px dotted gray;
    padding-top: .7em;
    margin-bottom: .7em;
}
 
div.item:first-child
{

Syndicate content