CODEWITHSUNDEEP
htmlcss
user2490580
user2490580

Reputation: 23

Weird space in HTML & CSS design - can't get rid of it

I am creating a design in css & html. But a box which I want to have 100% width leaves ugly space to the right. I have no idea what causes this.

The div tag I want to have 100% width is called #view1.

http://jsfiddle.net/zBpAE/

#view1 {
    border: 1px solid #000;
    min-height: 300px;
    padding: 0; margin: 0;

}

<div id="view1">
                    Choose the option suiting you best
            </div>

I'd really appreciate your help as I've been stuck with this issue for more than one hour now.

Upvotes: 0

Views: 292

Answers (2)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

Your first div (#first) has width: 100% and padding: 25px ... that results in a width larger than the window's width ... remove the padding or set box-sizing: border-box;

Upvotes: 1

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

Remove padding: 20px; from <div id='first'></div>:

#first {
        width: 100%;
        min-height: 200px;
        text-align: center;
        background: url('images/background1.png') #99307f no-repeat;
}

Upvotes: 1

Related Questions