SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS A simple problem - Or is it?

    Hello all, im new to the forum and was attracted to this forum due to the sheer amount of brain power and experience you guys have.

    So I must now call on you generosity.

    Here we go.

    I created 1 container.

    One float left 50% width.

    One float right 50% width.

    Gave them both 100% height. The container is 500px high. So I have a nice Green side and a nice red side.

    Simple.

    This is where I get confused.

    I add one more float right.

    However it appears outside of my container. But it is certainly not in my HTML.

    Would anyone care to take a look at how retarded I am. I just need some one to say why this is doing what it is doing and any possible fix or alternative. So my theory can advance. I have been doing HTML and CSS now for a year and a half. For some reason I have never come across this before.

    HTML

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="base.css" />
    <title>Test</title>
    </head>
     
    <body>
    <div class="container">
     
    <div class="left">This is the left side</div>
     
    <div class="right">This is the right side</div>
     
    <div class="right_div">test</div>
     
    </div>
    </body>
    </html>

    CSS

    Code CSS:
    @charset "utf-8";
    /* CSS Document */
     
    div.container {
    	width:100%;
    	height:500px;
    	border: 2px solid black;
    }
     
    div.left {
    	float:left;
    	height:100%;
    	background-color:#0F6;
    	width:50%;
    	color:#0F6;
    }
     
    div.right {
    	float:right;
    	height:100%;
    	background-color:#F00;
    	width:50%;
    }
     
    div.right_div { 
    	float:right;
    	height:10px;
    	border: 2px solid black;
    }

    See my retarded work here

    http://www.jontiz.co.uk

    Seems to look the same in all modern main stream browsers.

  2. #2
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello, Jonathan,

    This is happening because the first two divs (.left, .right) are taking up 100&#37; of the container width as well as 100% of the container height.

    As a result, your '.right_div' is getting pushed to a new line and overflows below the container (.container). Try reducing those percentages (.right in particular) to see what I mean.

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea I had a bash at fixing this particular issue via adding a negative margin on the element with the height of its exact size.

    Thanks

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the problem was rounding errors because 50&#37;+50% can be sometimes more then 100% depending on the resolution.

    THough you reduced the width so you fixed it so good job
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

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
  •