SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Floating causes child div goes outside parent div

    Below is shorten of my actual code. I try to keep the children div inside its parent div. It works in ie but goes lefty and not working in the others.
    What causes this and how to solve.
    Code:
    <html>
    	<head>
    		<style>
    			.width {
    				width: 960px;
    				margin: 0 auto;
    				border: 1px solid #000;
    			}
    			.left { float: left; }
    			.right { float: right; }
    		</style>
    	</head>
    	<body>
    		<footer>
    			<div class="width">
    				<div class="left">
    					Lest Side
    				</div>
    				<div class="right">
    					Right Side
    				</div>
    			</div>
    		</footer>
    	</body>
    </html>
    Thank you,

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Floats are removed from the flow which means that a parent element that contains only floats will in fact contain nothing and its height will be zero.

    You need to contain the floats which is usually accomplished by using a containing mechanism on the parent (such as overflow:hidden) or adding an element after the float and applying clear:both to it (see clearfix).

    If you don't need visible overflow then just apply overflow:hidden to .width.

    .width{overflow:hidden}

    ('width' is a bad naming convention and wrapper,outer or container would be better.)

    (You should also use a full doctype to stop triggering quirks mode and upsetting the standard behaviour. All pages should have a current valid doctype).

  3. #3
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thank you. It works, and thanks for additional suggestions.


Bookmarks

Posting Permissions

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