Div width problem with CSS

Ok, I have a very basic page that I am trying to set up. I have a div called wrapper to contain the entire page content. Then I have two divs inside of the wrapper, the main content (on the left) and a sidebar (on the right).

I am floating the sidebar to the right of the main content section. That is working fine. What I want to do is to have the sidebar a fixed width of 200px and the main section automatically resize based on the users browser size. I want this main section to stretch up to the sidebar then stop. I tried setting it to 100% width hoping that it would just stretch to the sidebar. This didn't work and the two divs overlapped. I tried the "auto" setting for the width but that didn't work either. Again, it ran over.

I am missing something easy I think. Can you help?

Jan 7 '09 #1

Subscribe Post Reply

1739

Death Slaught

1,137

1GB

Please post your code, or a link to a sample/test page, so that we may help you more accurately.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")

Jan 7 '09 #2

serdar

Try this template. I've tested it with Internet Explorer 7, Firefox, Opera and Safari.

Notice the negative margin in #sidebar and padding in #content.

Expand|Select|Wrap|Line Numbers

 
<html>

    <head>

        <style>

            body{margin:0; padding:0;}

            p, h1, h2 {margin:0; padding:0;}

            #wrapper {background:#888; width:100%; height:100%; margin:0 auto;}

            #content {background:#ccc; float:left; margin:0; padding:0 200px 0 0;}

            #sidebar {background:#ddd; width:200px; float:right; margin:0 0 0 -200px; padding:0;}

        </style>

    </head>

    <body>

        <div id="wrapper">    

            <h1>Header</h1>

            <div id="content">

                <h2>Content</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            </div>

            <div id="sidebar">

                <h2>Sidebar</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            </div>

        </div>

    </body>

</html>

Attached Images

template.jpg (16.1 KB, 118 views)

Jan 7 '09 #3

Similar topics

width of a charactor

by: Alex Shi | last post by:

In php, is there a way obtain the width of a charactor of a certain font? Alex -- ================================================== Cell Phone Batteries at 30-50%+ off retail prices!...

PHP

TD WIDTH and CELLPADDING (full post)

by: Graham J | last post by:

Apologies for the partial post that mysteriously escaped as I was composing. I shall try again. For many years I have been happily and successfully coding tables such that the WIDTH specified...

HTML / CSS

Table TD width not rendering correctly

by: karlman | last post by:

I am trying to create a web page that shows a calendar schedules. I am attempting to use table cells with fixed widths and different colors to display this. It seems that IE6 doesn't always...

HTML / CSS

Why does MSIE (but not Mozilla) expand my table beyond its width?

by: javaguy | last post by:

I have a table I hide show/hide through a pair of divs. The show/hide part works fine in both Mozilla and MSIE. When switching between the hide and show versions the Mozilla browser keeps them in...

HTML / CSS

table width layout problems in IE

by: Alex Meier | last post by:

I have the following problem: I need a simple, tabular layout in a webshop. - left column: navigation column with approx. 170px width - right column: content area the goal: the left column...

HTML / CSS

How to set column width of a table in ccs

by: Jean Pion | last post by:

Dear readers, Can anyone explain how to set column width of a table in ccs. I use the following style in an external stylesheet: table.tbl { table-layout:fixed; border-top: 5px solid #333;...

HTML / CSS

FireFox, RemoveChild, AppendChild, making width grow?

by: Stewart | last post by:

Originally posted in comp.lang.javascript: Newsgroups: comp.lang.javascript From: "Stewart" Date: 23 Aug 2005 02:50:04 -0700 Local: Tues, Aug 23 2005 10:50 am Subject: FireFox, RemoveChild,...

HTML / CSS

DOCTYPE Strict uses "correct" box model - so why is 100% width now useless?

by: Shadow Lynx | last post by:

Consider this simple HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>...

HTML / CSS

CSS border/margin width and percentage width

by: Hacking Bear | last post by:

Hi, I still don't quite fully understand how to handle mixing border/margin pixel width with percentage width. In the example below, I want to place side-by-side two DIV boxes inside a box....

HTML / CSS

Table Width = 100% In FireFox Not Working

by: lilOlMe | last post by:

Hi there! I'm developing a "scrollable table". At first I started using CSS. It worked pretty well until I found a bug that happens when placing this table into a tabbing control... So I...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++