Member Avatar for NubTruck

I have been reading some tutorials about floats from various sources on the web. They say that if you want to float one div element next to another you are to put a float attribute into one of the div elements. for example one website says this...

Quote From - maxdesign.com
To float the left nav, we need to use the rule: "#leftnav {float: left;}". When a div is set to float, a width must also be included, so we can add another declaration: "width: 160px;".

However, none of these examples appear to work within my code. When I add float: left; to the #left div element, in the code below, the #right div element disapears behind the #left div element with its text pushed down below the #left div element. Yet if I were to add it to the class .columns it happily aligns the two div elements like in the quoted example.

HTML Code

<!DOCTYPE html>
  <html>
  <body> 
    <div class="columns" id="left">left</div>
    <div class="columns" id="right">right</div>  
  </body>
</html>

CSS Code

body { padding: 0px; margin: 0px; }
.columns { width: 100px; height: 170px; padding: 10px; border: 1px solid black; }
#left { background: #AAAAFF; margin-right: 10px; }
#right { background: #FFAAAA; }

Could someone please explain what I am doing wrong or misunderstand?

  • 3 Contributors
  • 4 Replies
  • 240 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for JorgeM

Ok, so here is a similar example...

<!DOCTYPE html>
  <html>
  <head>
<style type="text/css">
body { padding: 0px; margin: 0px; }
.columns { width: 100px; height: 170px; border:1px solid black;}
#outer {width:204px;margin:0px auto;}
#left { float:left;background: #AAAAFF;}
#right { float:right;background: #FFAAAA; }
</style>
</head>
  <body>
    <div id="outer"> 
      <div class="columns" id="left">left</div>
      <div class="columns" id="right">right</div> 
    </div> 
  </body>
</html>

In this example, i created an div that wraps the two divs (left and right). The width of the outer div is the total of the inner divs plus their borders (left, right, left, right). I applied a float:left to the left div and a float right to the right div. This way they line up next to each other. If I didnt wrap these two divs with the outer div, the result would be similar except that one div would be all the way to the left of my page and the right div would be all the way to the right side of the page.

Edited by JorgeM
Member Avatar for AleMonteiro

I can't explain the theory to you, but I can say somethings from practice.

  1. When you use float on a element, you need to use clear in the next so it doesn't mess up:

    #left { background: #AAAAFF; margin-right: 10px; float: left; }
#right { background: #FFAAAA; clear: left; }

  2. Or, if you want both to be on the same line you need to use float on both(and clear on the next element that will be on another line):

    #left { background: #AAAAFF; margin-right: 10px; float: left; }
#right { background: #FFAAAA; float: left; }
#bottom { clear: left; }

  3. I don't like to use float, it always give me headaches. So, I use this class instead(works for all modern browsers - IE7+) :

        .inline
    {
        position: relative;
        display: -moz-inline-stack;
        display: inline-block;
        zoom: 1;
        vertical-align: top;

        *display: inline;
    }

And the HTML would be:

    <div class="columns inline" id="left">left</div>
    <div class="columns inline" id="right">right</div>

Hope it helps.

Edited by AleMonteiro because: bad code format
Member Avatar for NubTruck

Thank you for your replies, I have solved the issue. I wasn't taking into account the fact that the #left div element's float property causes other elements (including div elements!) to wrap around it. So they need to both be floated left (or one left an the other right) in order to flow correctly. Also, AleMonteiro, I have taken note of your clear: both; method. I would normally add it to a footer div, but I hadn't thought of adding it to div elements being floated.

Member Avatar for AleMonteiro

You are welcome, but mark the post as solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.