CODEWITHSUNDEEP
htmlcss
picknick
picknick

Reputation: 4007

Make 100% width div fit within another div and avoid horisontal scrollbar

So I don't want any horisontal scrollbars but I want the div to fill 100% of it's parent. The code works in FF and IE8 but not for IE7 and below. How can I solve this preferably with CSS only?

<html>
    <body>
        <div style="width:100%; overflow:auto; height:200px;"> 
            <div style="width:100%; height:400px; background:red;">

            </div>
        </div>
    </body>
</html>

Doctype is set to Transitional

Upvotes: 1

Views: 2472

Answers (3)

nikoloza
nikoloza

Reputation: 966

The second div automatically uses border, which contains 2px :

<div style="width:100%; border:none; height:400px; background:red;">

Upvotes: 0

tcooc
tcooc

Reputation: 21209

I think this sounds too simple, but you could set the height to 100%:

<div style="width:100%; height:100%; background:red;">

Upvotes: 2

James South
James South

Reputation: 10635

A div will automatically fill the width of it's parent unless specified otherwise.

Strip out the inner width style and the problem will go away.

<html>
    <body>
        <div style="width:100%; overflow:auto; height:200px;"> 
            <div style="height:400px; background:red;">

            </div>
        </div>
    </body>
</html>

On a side note. Unless you're building an email you really should be assigning style in an external css file.

Upvotes: 3

Related Questions