Wolfish Wolfish -4 years ago 158
CSS Question

Creating a CSS assembly, floating divs left, right and bottom

I'm trying to create a "pattern" of divs that looks like this:

enter image description here

However, currently it looks more like this:

enter image description here

resulting in my page looking something like this:

enter image description here

In that final snip, everything is also pushed to the right. Ideally, I need the assembly to be centred. The

Get Conditions
button should also reside underneath the
Print Runs
textbox, as they both reside in the same div, and be centred beneath the two upper divs. The dropdown lists and radiobutton list are both where they should be.

I toyed with floating the bottom div, but the various things I tried mostly resulted in the lower div taking up more space between the two upper divs.

I have pasted the HTML and CSS in a JSFiddle, please bear in mind that it doesn't recognise ASP tools so doesn't give an accurate preview of what I'm trying to achieve.

https://jsfiddle.net/h4tr31gt/1/

Answer Source

This doesn't directly address your question of floats, but you can achieve the same result by using flexbox. https://jsfiddle.net/gnw634gv/

.container {
  background-color: lightblue;
  height: 400px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

.block-top {
  width: 50%;
  background-color: yellow;
  height: 50%;
  border: 1px solid black;
  box-sizing: border-box;
}
<div class="container">
  <div class="block-top">A</div>
  <div class="block-top">B</div>
  <div class="block-bottom">C</div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download