asked on

Div extending beyond container

I have a CSS class called "news". It's within another div with a class called "content-wrapper". When I add a 15px padding to the "news" class it pushes the left side beyond the "content-wrapper" div. How do I fix this?

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CSS Width Issue</title>
    <style type="text/css">
        .container {
            width: 100%;
            background-color:aqua;
            padding: 25px
        }

        .content-wrapper {
            width: 350px;
            background-color: red;  
            margin: 0 20px 0 0;
            float:left;  
            padding: 15px;        
        }

        .news {
            width: 100%;
            padding: 15px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <div class="content-wrapper">
            <div class="news">
                Here's My News!
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Open in new window

Gary

Add this css

* {
    box-sizing: border-box;
}

Open in new window

cdemott33

ASKER

Hi Gary,

Sorry, no luck. I even tried to remove the float: left to see if that was messing things up and it isn't. Here's a screen capture and my updated code. Any other ideas?

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CSS Width Issue</title>
    <style type="text/css">
		* {
		box-sizing: border-box;
		}

        .container {
            width: 100%;
            background-color:aqua;
            padding: 25px
        }

        .content-wrapper {
            width: 350px;
            background-color: red;  
            margin: 0 20px 0 0;
            padding: 15px;        
        }

        .news {
            width: 100%;
            padding: 15px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <div class="content-wrapper">
            <div class="news">
                Here's My News!
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cdemott33

ASKER

Looks like you helped me figure out the problem. It turns out that I needed to remove this...

<!DOCTYPE html>

Open in new window

... from the top of the page and it worked. Thanks for your help!