Member Avatar for theguitarist

Please see here.

The intention was to have 3 <div>'s in decreasing order of height(1,2,3) and to put those 2 buttons under the <div> marked 2.
Something like

1    2    3
-    -    -
-    -    
-   btn1
-   btn2

I floated 1 to the left because I wanted whatever that follows to wrap around it.
I combined both 2 and 3 into a single <div> because I wanted the 2 buttons to fall back down under 2.

So now that the single <div> that holds both 2 and 3, is NOT floated, whatever follows should simply appear in the next line, BUT still wrapping around 1.

The results aren't like that. Can you please tell me what is wrong?

  • 5 Contributors
  • 5 Replies
  • 155 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for Octet

Floats can either be left, right or cleared using the following code:

float: left;

float: right;

clear: both;

When you float something left then it shall move to the left side of the screen, right to the right hand side of the screen and once you have finished floating it is a good idea to clear them to prevent other elements inheriting the position.

If you float multiple elements to the left then the first to be loaded shall be the furthest left and then the next shall be following on from this. With a float element, you should specify the width because if both of them won't fit on the viewport then they shall drop below each other.

I hope this helps?

Member Avatar for Sahil89

Sorry for not explaining but I didnt understand you exactly. Following is the html that I modified, I hope this how you wanted it to look.

<html>
<head>
</head>
<body>
    <div style = "border :1px solid black; height : 100px; width : 80px; float : left">1</div>
    <div style="float:left;">
       <div style = "border :1px solid black; height : 60px; width : 80px;">2</div>
       <input type = "button" value = "Button1" /><br />
       <input type = "button" value = "Button2" />
    </div>
    <div style = "border :1px solid black; height : 40px; width : 80px; float:left;">3</div>
</body>
</html>

I have added 2nd div and buttons in a div and set that wrapping div to float left.

Member Avatar for JorgeM

Keep in mind that when you apply the float property, the element is taken out its normal position. It sounds like you are trying to create a grid of some sort.

Maybe create a table? While the purpose of a table is to display structure data, it would be an easy way to line up the data you want to display.

If you want to do this with divs floating, its going to be challenging since you are going to get unexpected results especially when the size of the screen changes. unless you assign fixed widths and apply a clear property to move to the next line.

Member Avatar for theguitarist

Thanks everyone.
I was able to set it up.

@JorgeM,
I read on the web that using tables for layouts is not a good idea or a good convention. So I thought I'd avoid it.
I mean, what I'm creating isn't a data table after all. It is a small grid like you said.

Member Avatar for AleMonteiro

I think using float is too much risky. If you forget to use clear you may mess up your layout and if you have lots of floats it can be really painfull to find and correct the problem.

I've been using this css class to position elements inline without using float and it's cross browser.

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

    *display: inline; /*for IE < 8 */
}

If you want to align right just wrap the itens with text-align: right;.

This solved a lot of problems for me.

Hope it helps.

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.