1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Layout problem with 'cleared' elements

Discussion in 'CSS' started by rajivp, May 12, 2010.

0
  1. #1
    I have to get a layout done in a particular way. I have set the clear property to do this. However, when I apply clear to multiple consecutive elements, any other element that follows the 'cleared' elements, gets placed along side the last of the 'cleared' element. What I need though is the elements to be placed along side the first cleared element. I have given the html code.
    When the html is rendered, I would like 'Cell 6' to go along side 'cell 3', instead of 'Cell 5'. What do I need to do to achieve this. I have given the code for you to take a look at. Thanks for your help!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Test</title> 
</head> 
<body> 
    <div style="float:left; padding: 10px;border: 1px solid gray;width: 500px;">
 
        <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> 
            cell 1
        </div> 
        <div style="float:left;width: 150px;border: 1px solid gray;"> 
            cell 2
        </div> 
        <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> 
            cell 3
        </div> 
        <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> 
            cell 4
        </div> 
        <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> 
            cell 5
        </div> 
        <div style="float:left;width: 150px;border: 1px solid gray;height:100px;"> 
            Cell 6
        </div>
    </div>
</center> 
</body> 
</html>
    HTML:

     
    rajivp, May 12, 2010 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Create two columns. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
        
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />

  <title>Test</title>
  <style type="text/css">
/*<![CDATA[*/

  div.col {
    width: 150px;
    float: left;
    }

  div#wrapper {
    border: 1px solid gray;
    overflow: hidden;  /*see link below*/
    padding: 10px;
    width: 500px;
    }

  p {
    border: 1px solid gray;
    margin: 0;
    text-align: center;
    }

  p.oddball {
    height: 150px;
    }

  /*]]>*/
  </style>
</head>

<body>
  <div id="wrapper">
    <div class="col">
      <p>cell 1</p>

      <p>cell 3</p>

      <p>cell 4</p>

      <p>cell 5</p>
    </div>

    <div class="col">
      <p>cell 2</p>

      <p class="oddball">cell 6</p>
    </div>
  </div>
</body>
</html>
    Code (markup):
    See Enclosing float elements.

    cheers,

    gary
     
    kk5st, May 12, 2010 IP
  3. rajivp

    rajivp Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Gary,

    First of all thanks a lot for taking the time to code it up.

    One thing I forgot to mention is that the 2-column option may not work for my purpose.

    The code I put was part of a larger code chunk, which I generate dynamically. I would like to control the layout using CSS only without adding any additional HTML elements. By putting the additional divs, I am restricted to a 2-column layout. I need the flexibility to bring cell 2 to appear under left column. By enclosing the cell 2 and cell 6 in the right column I would lose that.

    What I have appears to be working under IE7, but breaks under firefox/chrome.

    I need to understand why cell 6 remains with last div element and does not float up.

    Thanks again for your help.
     
    rajivp, May 12, 2010 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    kk5st, May 13, 2010 IP