Float/clear divs to both left and right. Awkward space. - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Float/clear divs to both left and right. Awkward space.

webfoo

4:59 pm on Apr 26, 2018 (gmt 0)

10+ Year Member

Hello all, I have some divs - gray boxes to be exact. The number of divs and their content will change a lot, so I'm just using dummy content for now. But the basic structure will not change. I want half of the divs to float left, and the other half to float right. No content will appear between the left and right divs - just whitespace.

I'm 90% of the way there. The left divs are behaving as they should. And the right divs are floating right, but they don't start until after the last left div. This leaves awkward holes in the upper-right and lower-left areas. What am I doing wrong?

CSS:
.graybox {
background-color: #eaecf0;
border-radius: 10px;
padding: 10px;
margin: 10px;
width: 45%;
}
.graybox.left {
float: left;
clear: left;

}
.graybox.right {
float: right;
clear: right;
}

HTML:
<div class="graybox left">Left 1<br/><br/><br/></div>
<div class="graybox left">Left 2</div>
<div class="graybox left">Left 3<br/><br/></div>
<div class="graybox left">Left 4</div>
<div class="graybox left">Left 5</div>

<div class="graybox right">Right 1</div>
<div class="graybox right">Right 2<br/><br/></div>
<div class="graybox right">Right 3</div>
<div class="graybox right">Right 4<br/><br/><br/><br/></div>

webfoo

5:19 pm on Apr 26, 2018 (gmt 0)

10+ Year Member

Well I seem to have found a workaround - not exactly the solution I had in mind but it will do. Added a container around all the left divs, and another container around all the right divs. Floated the containers instead of the individual divs.

CSS:
.graybox {
background-color: #eaecf0;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
.mainleft {
float: left;
clear: left;
width: 50%;
}
.mainright {
float: right;
clear: right;
width: 50%;
}

HTML:
<div class="mainleft">
<div class="graybox">Left 1<br/><br/><br/></div>
<div class="graybox">Left 2</div>
<div class="graybox">Left 3<br/><br/></div>
<div class="graybox">Left 4</div>
<div class="graybox">Left 5</div>
</div>
<div class="mainright">
<div class="graybox">Right 1</div>
<div class="graybox">Right 2<br/><br/></div>
<div class="graybox">Right 3</div>
<div class="graybox">Right 4<br/><br/><br/><br/></div>
</div>

NickMNS

5:42 pm on Apr 26, 2018 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

That is the way to do it.

You may want to consider using flexbox or grid for this type of stuff.
[w3schools.com...]

not2easy

6:14 pm on Apr 26, 2018 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

Your css is clearing the float in the same element where you are setting the float. Nick's link can help and flexbox is a good way to handle the task.

csdude55

2:44 am on Apr 27, 2018 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Your second method is the way I would do it, too... I still have a lot of older browser traffic so I can't rely on flexbox yet :-/

But not2easy is right, you're clear isn't right. Instead of putting it in the .mainleft and .mainright classes, I would have another class like this:

.clear { clear: both }

then after the last </div>, add an empty:

<div class="clear"></div>

Or if you have another parent container surrounding .mainleft and .mainright, you can add this to that parent:

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

So in the end:

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

.graybox { 
 /* 99% sure you could just use background: here */
 background-color: #eaecf0; 
 border-radius: 10px;
 padding: 10px;
 margin: 10px; 
} 

.mainleft { 
 float: left;
 width: 50%; 
} 
.mainright { 
 float: right; 
 width: 50%; 
} 


HTML: 
<div class="parent">
 <div class="mainleft"> 
  <div class="graybox">Left 1<br/><br/><br/></div> 
  <div class="graybox">Left 2</div> 
  <div class="graybox">Left 3<br/><br/></div> 
  <div class="graybox">Left 4</div> 
  <div class="graybox">Left 5</div> 
 </div> 

 <div class="mainright"> 
  <div class="graybox">Right 1</div> 
  <div class="graybox">Right 2<br/><br/></div> 
  <div class="graybox">Right 3</div> 
  <div class="graybox">Right 4<br/><br/><br/><br/></div> 
 </div>
</div>

webfoo

6:40 pm on Apr 27, 2018 (gmt 0)

10+ Year Member

Thank you all for your help.

@ csdude55, I'm not sure I understand what the parent-clear-after accomplishes?

not2easy

10:29 pm on Apr 27, 2018 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

I'm not sure I understand what the parent-clear-after accomplishes?

It clears the left and right floats that were opened after the parent div opened with

display: table;

The .parent div in the suggestion that csdude55 posted contains a right float div and a left float div. Any floats need to be cleared or they can float other elements that follow them. You close a float with clear: left; or clear: right; or clear: both; as is used here for the .parent div that contains the two floated (.mainright and .mainleft) divs.

The

.parent:after

designates that the action is to take place just before the closing </div> tag for the .parent div.

_{I hope I didn't confuse this more.}