Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Overflow issue

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post

    Overflow issue

    Hi guys, I have a basic header structure as follows
    Code:
    <!-- HEADER -->
    <div id="header">
       <a href="index.html"><img id="logo" src="images/logo.jpg" alt="" /></a> 
       <img id="logoTwo" src="images/top.png" alt="" /> 
    </div>
    <!-- ENDS HEADER -->
    So it displays a header image, with two logos on top of this header. The css is
    Code:
    #header {
    	padding-top:5px;
    	height: 95px;
    	position: relative;
    	background: #2a2d30 url(../images/header.jpg) top center no-repeat;
    	background-size:100% 100%;
    	
    }
    #logo {
    	float:left;
    	margin-left:210px;
    	display:inline;
    	height:117px;
    	width: 263px; 
    	overflow:visible;
    }
    #logoTwo {
    	float:right;
    	margin-right:210px;
    	width: 321px; 
    }
    At the moment, I have a problem with the logo's. Both logos are being cut off by the height of the div. So at the moment, my logos are 95px. What should happen is these logos should retain their normal size, and they should overlap the div border. I think it is the overflow property which does this, but I cannot seem to make it work.

    Is there anything I am missing?

    Cheers

    Nick

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For my browser it goes under the header div:


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •