Wed, 2010-09-01 02:04
Hi all,
I am having an issue with clearing and divs. Maybe I just don't fully understand how clearing works. Here is the code for what I am trying to do. I'm using php and hoping to have more or less this in a loop for displaying results from a db query.
<? echo '<div style="width: 500px; background-color: yellow;">'; echo '<div style="float: left; width: 50%; height: 50px; border-bottom: 3px solid green;">Div 1</div>'; echo '<div style="float: right; width: 50%; height: 50px; border-bottom: 3px solid red;">Div 2</div>'; echo '<div style="clear: both; height: 50px; border-bottom: 3px solid black;">Div 3</div>'; echo '<div style="float: left; width: 50%; height: 50px; border-bottom: 3px solid green;">Div 4</div>'; echo '<div style="float: right; width: 50%; height: 50px; border-bottom: 3px solid red;">Div 5</div>'; echo '</div>'; ?>
Here is what I get. The black, green, and red lines are the bottom borders of the inner divs obviously the yellow background is of the container div.
I don't understand why the background isn't behind the bottom 2 divs as well. I know clearing clears everything below it but I thought that would only be until a new float was declared.
Any and all help is greatly appreciated!
Thanks!
Wed, 2010-09-01 05:17
#1
Research: Containing Floats
Research: Containing Floats which is different from "clearing floats".
Thu, 2010-09-02 00:00
#2
Thank you!
That completely fixed my issue. Thank you!
Edit: Or maybe not. I guess I got a little ahead of myself. In the little test I made with the yellow background, adding added a horizontal scroll bar to the end of each iteration of the loop and gives the same result.
I read the whole article and thought I understood what it was saying. I'll admit I am a novice though so I'm sure I missed something.
Could it be my loop? I just noticed that divs 1, 2, 4, and 5 contain the information they should, however, div 4 (the middle div that I would like to span the entire width of the container div) only contains the info that it should on the first iteration of the loop.
Thu, 2010-09-02 00:20
#3
Add overflow:hidden to the
Add overflow:hidden to the first div.
Fri, 2010-09-03 02:49
#4
Thank you for helping me. I
Thank you for helping me. I had put that in after reading the article you linked to and still had issues. After staring at y code a while I saw I was missing a closing quotation in my loop. Once I put that it my page looked just how I wanted it to.
Again, thank you for your help and time!