tags:

views:

63

answers:

2
Q: 

How to set div width to 100%

I'm trying to design a 2 column layout using divs. My left column size is fixed to 150 px. But right column is not fixed size, so I want it to extend to right boundary of the browser. I used width:auto and width:100% values in right column but they didn't work.

CSS : 

 html {
    height:100%; width:100%
}
body {
    color: #000040; 
    text-align: left; 
    padding:0; 
    margin:0; 
    height:100%; 
    width:100%
}
#header {
    position:relative; 
    float:left; 
    background-color: #000053; 
    width: 100%; 
    height: 76px
}
#wrapper {
  position:relative; 
  overflow:hidden; 
  width:100%; 
  height: 100%; 
  margin:0px auto; 
  padding:0; 
  background-color:Aqua
}
#container {
    clear:left; 
    float:left; 
    overflow:hidden; 
    width:100%; 
    height:100%
}
#left_column {
    position: relative; 
    float: left; 
    background-color:Fuchsia; 
    width: 150px; 
    overflow:hidden; 
    height:100%
}
#right_column {
    position: relative; 
    float:left; 
    overflow:hidden; 
    background-color:Blue; 
    height: 100%; 
    width:auto }

HTML

    <body>
        <div id="wrapper"> 
            <div id="header">
               HEADER
            </div>
            <div id="container">
                <div id="left_column">
                    LEFT COLUMN
                </div>
                <div id="right_column">
                    RIGHT COLUMN
                </div>
            </div>
        </div>
    </body>

</html>
+1  A: 

change for the div right_column the position from relative to fixed, and width from auto to 100%. Also add left:150px; With these changes you css for right_column will look like the following:

#right_column {
        position: fixed;
        left:150px;
        float:left;
        overflow:hidden;
        background-color:Blue;
        height: 100%;
        width:100%; }

you can check it here http://jsbin.com/ejetu3

Sotiris  2010-08-17 11:34:24
It works well but it has a problem with scrolling. I tried to remove overflow hidden tags to see what happens when the page needs to be scrolled. When I scroll down the page, right column doesn't scroll down..
penguru  2010-08-17 11:59:17
http://reference.sitepoint.com/css/overflowoverflow is already buggy in internet explorer :(
penguru  2010-08-17 12:06:30
+2  A: 

I would remove all position statements and only put a float:left on the left column, not the right nor the container. Give the right column a margin-left:150px and it should work fine.

Except for the left-floated column, you can also remove the width:100% statements from the rest; when they're not floated, they'll be 100% wide automatically.

The overflow:hidden is only needed on the wrapper; at least if you are using it to have the div grow in height to accommodate the floats inside it.

jeroen  2010-08-17 13:48:39

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?