• Locked
4 replies [Last post]
Wed, 2010-09-01 02:04
wivicker
wivicker's picture
User offline. Last seen 1 year 37 weeks ago. Offline
newbie
Timezone: GMT-5
Joined: 2010-09-01
Posts: 3
Points: 4

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.

div problem

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!

Top
Tags:
Wed, 2010-09-01 05:17
#1
Deuce
Deuce's picture
User offline. Last seen 4 weeks 6 days ago. Offline
rank Guru
Guru
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4421
Points: 1840

Research: Containing Floats

Research: Containing Floats which is different from "clearing floats".

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
Thu, 2010-09-02 00:00
#2
wivicker
wivicker's picture
User offline. Last seen 1 year 37 weeks ago. Offline
newbie
Timezone: GMT-5
Joined: 2010-09-01
Posts: 3
Points: 4

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.

Top
Thu, 2010-09-02 00:20
#3
Deuce
Deuce's picture
User offline. Last seen 4 weeks 6 days ago. Offline
rank Guru
Guru
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4421
Points: 1840

Add overflow:hidden to the

Add overflow:hidden to the first div.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
Fri, 2010-09-03 02:49
#4
wivicker
wivicker's picture
User offline. Last seen 1 year 37 weeks ago. Offline
newbie
Timezone: GMT-5
Joined: 2010-09-01
Posts: 3
Points: 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!

Top
  • Locked