CODEWITHSUNDEEP
htmlcssoverflowparent-child
Birdlady9604
Birdlady9604

Reputation: 207

override parent overflow:hidden with child overflow:visible

I have a header which is the parent of the nav and logo. I have set the parent to overflow:hidden so I was able to add margin-top to the nav to get it to sit at the bottom. However it clips the logo div as well. I was trying follow this question...Overriding overflow: hidden

so tried to set the logo to overflow:visible but that hasn't worked either. I am not sure of any other solution other than the logo not being in the parent container.

Here is my code

CSS:

.container {
width: 960px;
margin:0 auto;
background-color: blue;
}

header {
height: 100px;
background-color: #001D5D;
position: relative;
overflow: hidden;

}

#logo {
height:100px;
width:100px;
z-index:10;
top:0px;
position: absolute;
overflow: visible;
}

nav {
    background-color:#1CCEAE;
    margin-top:63px; 
}

nav ul {
width:100%;
line-height: 37px;
    text-align:right;
    background-color:#1CCEAE; 

 }

ul li {
display: inline-block;
margin-right: 20px;
}

ul li a {
text-decoration: none;
font-size: 1em;
color:white;    
}

Here is a fiddle http://jsfiddle.net/XS3Zs/

Upvotes: 0

Views: 832

Answers (2)

Amir5000
Amir5000

Reputation: 1728

The UL element has by default padding-left:40px; so if you set that to 0 it will be fine.

I updated your [FIDDLE]

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105853

remove width:100% to ul or reset padding to 0 to ul.

<ul> doesn't really need width:100%; since it is a block element, it will use all width avalaible., width set to 100% may be too much. Borders, margin and padding will not be estimated.

Upvotes: 1

Related Questions