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
  • 184 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by AleMonteiro

Dani AI

Generated

Short version: the wrapper you added for "2" and "3" is a normal block, not an independent column, so its children still flow around the floated "1" instead of creating a separate column. In other words, floats affect how inline content and the sides of blocks interact, but a non-floated block will not automatically behave like a separate column unless it has a constrained width or its own formatting context. That is why ’s change (making the wrapper floated) altered the layout, and why and correctly warned about the pitfalls of floats and inline-block workarounds.

Two practical fixes that avoid fragile float-geometry:

  • Make each column a true column (float or flex item) so the middle column naturally stacks 2, the buttons, then 3 in that column. That is the minimal change if you must keep a float-based approach.
  • Prefer a modern layout: use Flexbox or Grid to create three columns and stack content inside the middle column. That will behave predictably across sizes and simplifies placing the buttons under only the middle box.

Example using Flexbox (keeps columns independent and places buttons under the middle item):

<div class="row">
  <div class="col">1</div>
  <div class="col middle">
    <div class="top">2</div>
    <div class="actions"><button>Button1</button><button>Button2</button></div>
    <div class="bottom">3</div>
  </div>
  <div class="col">3</div>
</div>

<style>
.row { display:flex; gap:12px; align-items:flex-start; }
.col { width:120px; }
.actions { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
</style>

Quick debugging tips: add temporary outlines/backgrounds to each column, check widths in DevTools, and if you must keep floats use a clearfix or create a new block formatting context (for example with overflow:auto or display:flow-root) on the wrapper so it contains floats predictably. ’s table idea will line things up but use it only for tabular data; for layout prefer Flexbox/Grid for semantics and responsiveness.

Recommended Answers

All 5 Replies

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.

,
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.