CODEWITHSUNDEEP
htmlcssoverflow
user2944537
user2944537

Reputation: 9

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

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>

Upvotes: 0

Views: 1170

Answers (2)

Marcelo
Marcelo

Reputation: 4425

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>

Upvotes: 1

Prakhar Thakur
Prakhar Thakur

Reputation: 1229

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>

Upvotes: 0

Related Questions