Using "overflow:hidden;" on a div inside a div

Question

I have a set of 6 divs nested in another div. i have a border-radius set for the parent and no border radius on the nested divs. their combined width is exactly the width of the inner area of the parent div. they are all floated left. in this setup, the corners of the children spill over the rounded corners of the parent. setting overflow to hidden seems to do nothing.

Does anyone know how to hide those corners that are overflowing from the parent?

I am using a css reset which is not in the attached code. that particular file is available here: reset.css

And a link to this page (so you can see what i mean)

79.170.44.85/rasmussenprojects.com/home.html

EDIT: heres a screenshot of what firefox shows in case its not displaying properly for you:

https://i.sstatic.net/OHkng.png

<!doctype html>
<html>
    <head>
        <title>Home</title>
        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <!--
            <link rel="stylesheet" type="text/css" href="home.css">
        -->
        <style>
            html, body{
                    background-color:rgb(32,32,32);
                    width:1366px;
                    height:637px;
                    position:relative;
                    }
                #banner_logotext{
                    color:rgb(16,16,16);
                    width:1074px;
                    text-align:center;
                    font-size:32px;
                    font-weight:700;
                    font-family:Arial, Helvetica, sans-serif;
                    }
                #banner_slogantext{
                    color:rgb(16,16,16);
                    width:1074px;
                    text-align:center;
                    font-size:12px;
                    line-height:6px;
                    margin-top:8px;
                }
                .content-panel{
                    background-color:rgb(64,64,64);
                    margin:0 auto;
                    border: 2px solid rgb(16,16,16);
                    border-radius:16px;
                    }
                #banner{
                    width:1074px;
                    height:90px;
                    padding-top:8px;
                    }
                #navbar{
                    width:1074px;
                    height:45px;
                    }
                .navbar-tab{
                    width:178.333333333px;
                    height:41px;
                    float: left;
                    background-color:rgb(48,48,48); 
                    border: 2px solid black;
                }
        </style>

    </head>

    <body>
        <div class="content-panel" id="banner">
            <p  id="banner_logotext">
                Lorem ipsum dolor sit amet
            </p>
            <p  id="banner_slogantext">
                "Neque porro quisquam est qui dolorem ipsum 
                <br></br>quia dolor sit amet, consectetur, adipisci velit..."
            </p>
        </div>
        <div class="content-panel" id="navbar">
            <div class="navbar-tab">

            </div>
            <div class="navbar-tab">

            </div>
            <div class="navbar-tab">

            </div>
            <div class="navbar-tab">

            </div>
            <div class="navbar-tab">

            </div>
            <div class="navbar-tab">

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

You're linked page has a dark overlay that obscures the content you're trying to show us. — Madbreaks
– Madbreaks, Commented Jan 22, 2015 at 21:58
@Madbreaks see the edit, a screenshot can be found here: i.stack.imgur.com/OHkng.png — user2944537
– user2944537, Commented Jan 22, 2015 at 22:03
Setting overflow:hidden works just fine for me: codepen.io/anon/pen/wBeKWq — Marcelo
– Marcelo, Commented Jan 22, 2015 at 22:04
your parent div has class="content-panel" id="navbar" none of those contain an overflow:hidden add it to one of them and it works — Prakhar Thakur
– Prakhar Thakur, Commented Jan 22, 2015 at 22:09

Marcelo · Accepted Answer · 2015-01-22 22:18:03Z

When you set overflow:hidden you are telling an element to hide any children that overflow out its bounds. As such, in your scenario, you have to set it for the #navbar instead of for each .navbar-tab.

#navbar{ overflow:hidden; }

As was mentioned by Justin Breiland, you can also round some of the corners of the first and last .navbar-tabs for better presentation.

.navbar-tab:first-child { border-top-left-radius: 13px; border-bottom-left-radius: 13px; }
.navbar-tab:last-child { border-top-right-radius: 13px; border-bottom-right-radius: 13px; }

Full example in snippet. Live example: http://codepen.io/anon/pen/wBeKWq

html, body{
  background-color:rgb(32,32,32);
  width:1366px;
  height:637px;
  position:relative;
}
#banner_logotext{
  color:rgb(16,16,16);
  width:1074px;
  text-align:center;
  font-size:32px;
  font-weight:700;
  font-family:Arial, Helvetica, sans-serif;
}
#banner_slogantext{
  color:rgb(16,16,16);
  width:1074px;
  text-align:center;
  font-size:12px;
  line-height:6px;
  margin-top:8px;
}
.content-panel{
  background-color:rgb(64,64,64);
  margin:0 auto;
  border: 2px solid rgb(16,16,16);
  border-radius:16px;
}
#banner{
  width:1074px;
  height:90px;
  padding-top:8px;
}
#navbar{
  width:1074px;
  height:45px;
  overflow:hidden;
}
.navbar-tab{
  width:175px;
  height:41px;
  float: left;
  background-color:rgb(48,48,48); 
  border: 2px solid black;
}
.navbar-tab:first-child{
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
}
.navbar-tab:last-child{
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
}

<div class="content-panel" id="banner">
  <p  id="banner_logotext">
    Lorem ipsum dolor sit amet
  </p>
  <p  id="banner_slogantext">
    "Neque porro quisquam est qui dolorem ipsum 
    <br></br>quia dolor sit amet, consectetur, adipisci velit..."
</p>
</div>
<div class="content-panel" id="navbar">
  <div class="navbar-tab">

  </div>
  <div class="navbar-tab">

  </div>
  <div class="navbar-tab">

  </div>
  <div class="navbar-tab">

  </div>
  <div class="navbar-tab">

  </div>
  <div class="navbar-tab">

  </div>
</div>

Prakhar Thakur · Accepted Answer · 2015-01-22 22:11:33Z

0

adiing overflow:hidden works on your code

html,
body {
  background-color: rgb(32, 32, 32);
  width: 1366px;
  height: 637px;
  position: relative;
}
#banner_logotext {
  color: rgb(16, 16, 16);
  width: 1074px;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
}
#banner_slogantext {
  color: rgb(16, 16, 16);
  width: 1074px;
  text-align: center;
  font-size: 12px;
  line-height: 6px;
  margin-top: 8px;
}
.content-panel {
  background-color: rgb(64, 64, 64);
  margin: 0 auto;
  border: 2px solid rgb(16, 16, 16);
  border-radius: 16px;
}
#banner {
  width: 1074px;
  height: 90px;
  padding-top: 8px;
}
#navbar {
  width: 1074px;
  height: 45px;
  overflow: hidden;
}
.navbar-tab {
  width: 178.333333333px;
  height: 41px;
  float: left;
  background-color: rgb(48, 48, 48);
  border: 2px solid black;
}

<div class="content-panel" id="banner">
  <p id="banner_logotext">Lorem ipsum dolor sit amet</p>
  <p id="banner_slogantext">"Neque porro quisquam est qui dolorem ipsum
    <br></br>quia dolor sit amet, consectetur, adipisci velit..."</p>
</div>
<div class="content-panel" id="navbar">
  <div class="navbar-tab"></div>
  <div class="navbar-tab"></div>
  <div class="navbar-tab"></div>
  <div class="navbar-tab"></div>
  <div class="navbar-tab"></div>
  <div class="navbar-tab"></div>
</div>

answered Jan 22, 2015 at 22:11

Prakhar Thakur

1,2403 gold badges15 silver badges39 bronze badges

2 Comments

Marcelo Over a year ago

@user2944537 There should be a button to insert it when editing your question or answer. It should be the 7th button or so in the top ribbon, called "Code Snippet". You can also use the shortcut Ctrl-M.

user2944537 Over a year ago

@Marcelo awesome! much appreciated ^.^

Collectives™ on Stack Overflow

Using "overflow:hidden;" on a div inside a div

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related