Member Avatar for jryans10

Hi everyone.

I'm trying to create a website with a 2x2 layout:

Top-left: logo
Top-right: navigation
Bottom-left: some pictures
Bottom-right: page content

Now, I have all these in a wrapper div.

The logo I set to float-left and that's fine and the navigation I set to float-right and that is fine too.

However I have a problem with the bottom divs: when I try setting the bottom left to float-left it seems to just stick to near the middle rather than the left of the wrapper div but it's still below the logo. It works fine (sticks to the left below the logo) without a float, but then how can I get the bottom-right div in place?

Any idea's what I can do?

Thanks.

Edited by jryans10 because: n/a
  • 2 Contributors
  • 4 Replies
  • 107 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Philippe.Lahaie

Dani AI

Generated

Good catch by — inserting a clearing element between the rows is a simple fix and explains why the bottom-left box was wrapping around the floated top-right item. ’s suggestion to clear floats was on point. For cleaner, more maintainable markup, consider techniques that avoid extra empty elements or fragile float math.

A lightweight, HTML-free containment pattern is the clearfix pseudo-element. It keeps the wrapper aware of its floated children so rows behave predictably without extra nodes:

.wrapper::after {
  content: "";
  display: table;
  clear: both;
}

This preserves the existing float-based layout while removing the presentational helper element.

For a more modern approach, replace floats with a layout system built for this use case. A small Flexbox pattern makes a responsive 2x2 straightforward and avoids clearing entirely:

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex: 0 0 50%;
  box-sizing: border-box;
}

Using semantic blocks (header/nav/section/aside) inside that structure keeps the markup clean and responsive with far less fiddling.

Quick troubleshooting checklist for similar problems: confirm the wrapper’s width and each column’s computed width (including padding and border), set box-sizing to border-box to simplify math, watch for stray margins collapsing, and use developer tools to see which float is occupying space. If supporting very old browsers is required, vendor-prefixed flexbox or a contained float approach is safer; otherwise Flexbox or Grid is the recommended path forward.

Recommended Answers

All 4 Replies

Member Avatar for Philippe.Lahaie

have you tried setting clear ? depending if u fix the width of your wrappers or not you might need to clear:both; instead of clearing just left or right.

also just a personnal opinion but i usualy set all columns in my site float left with display:inline;

Member Avatar for jryans10

Hi,

Thanks. What I did was I created a div called "clear" and set the clear property to both and put <div id="clear" /> between the row.

Thanks!

Member Avatar for Philippe.Lahaie

mark this thread as solved if your problem is fixed please!

also some rep for a quick and helpful answer is always appreciated but optional ! :)

Member Avatar for Philippe.Lahaie

mark this thread as solved if your problem is fixed please!

also some rep for a quick and helpful answer is always appreciated but optional ! :)

To anyone willing to downrate posts for fun : have the balls to leave your name behind.

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.