SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Float CSS Problem

    can anyone tell me how to solve this problem? Picture attached here.

    Div1 is floated left;

    Div2 was isn't floated left so it goes like this;when was floated it goes entirely below Div1(due to width problem).

    Also please tell me how can we make container of the size of its floated contents?


    Thankyou
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Not sure what you mean by the last bit, but to stop the div2 text wrapping, you can give is overflow: hidden;

    It would be easier if we could see this live, or at least your code in terms of the container question. Generally, you need to give your floats a set width for them to sit side by side.

  3. #3
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    57 Post(s)
    Tagged
    0 Thread(s)
    I presume you're wanting the right div to not wrap around the floating div and stay in its own column. This is a fairly common use case, and the starting HTML at a base will look something like this.

    Code html:
    <body>
      <header></header>
      <section>
        <nav></nav>
        <article></article>
      </section>
      <footer></footer>
    </body>

    The section will be our container. Nav will be our "div1" and article will be our "div2". The nav I presume is fixed and the article column will be allowed to take all available space.

    Code css:
    section {
      padding-left: 200px; /*width of the nav */
    }
     
    nav {
      float: left;
      width: 200px;
      margin-left: -200px; 
    }
     
    article { width: 100% }
     
    footer { clear: both; }

    So, we float the nav and push it left a distance equal to its width. This gets it out of the article's way. The footer then has a clear set to prevent the nav from floating over it.

    When you're ready to go to 3 columns things get a bit trickier: http://www.alistapart.com/articles/holygrail/

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    I presume you're wanting the right div to not wrap around the floating div and stay in its own column. This is a fairly common use case, and the starting HTML at a base will look something like this.

    Code html:
    <body>
      <header></header>
      <section>
        <nav></nav>
        <article></article>
      </section>
      <footer></footer>
    </body>

    The section will be our container. Nav will be our "div1" and article will be our "div2". The nav I presume is fixed and the article column will be allowed to take all available space.

    Code css:
    section {
      padding-left: 200px; /*width of the nav */
    }
     
    nav {
      float: left;
      width: 200px;
      margin-left: -200px; 
    }
     
    article { width: 100% }
     
    footer { clear: both; }

    So, we float the nav and push it left a distance equal to its width. This gets it out of the article's way. The footer then has a clear set to prevent the nav from floating over it.
    Thanks it was really good.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Not sure what you mean by the last bit, but to stop the div2 text wrapping, you can give is overflow: hidden;

    It would be easier if we could see this live, or at least your code in terms of the container question. Generally, you need to give your floats a set width for them to sit side by side.
    Thanks Ralph

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    I presume you're wanting the right div to not wrap around the floating div and stay in its own column. This is a fairly common use case, and the starting HTML at a base will look something like this.
    I feel that I should point out that although that method appears to work well it is slightly flawed in that you can no longer have any elements in the main column that are set to clear:both. If for example you have a floated image in the main column and you want to clear the content that follows it then you end up with all the rest of the content down below the sidebar. You actually clear all floated elements in the html before because the article element does not create a new "block formatting context".

    You would need to nest an inner div inside the article element and set it to be floated and 100% wide and then keep all the inner content inside that.

    You can see the difference here:
    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    section { padding-left: 200px; /*width of the nav */ }
    nav {
    	float: left;
    	width: 200px;
    	margin-left: -200px;
    	background:red;
    	padding-bottom:100px;
    }
    article { width: 100% }
    footer { clear: both; }
    .inner {
    	width:100%;
    	float:left;
    }
    </style>
    </head>
    
    <body>
    <header></header>
    <section>
    		<nav>
    				<p>test</p>
    				<p>test</p>
    				<p>test</p>
    				<p>test</p>
    				<p>test</p>
    				<p>test</p>
    		</nav>
    		<article>
    				<div class="inner">
    						<p>This is a test</p>
    						<p>This is a test</p>
    						<p style="float:left">This is a float</p>
    						<p style="clear:both">Clearing element</p>
    						<p>This is a test</p>
    						<p>This is a test</p>
    				</div>
    		</article>
    </section>
    <footer>footer</footer>
    </body>
    </html>
    If you don't need visible overflow then the method Ralph suggests will do all that automatically anyway but will need zoom:1.0 for ie7 and under (or a valid property that gives layout).


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
  •